I am trying to create a popup window that opens automatically when a mouse scrolls over a certain term, (e.g., to provide a definition of the term scrolled over). I've looked at the archives and just don't see how to do it. Help?!
iWeb '08, Mac OS X (10.6.8)
One way to do this is to use tooltips. To see what a tooltip looks like, hover your cursor over any hyperlink created with iWeb. The URL to the linked file appears in a box with a yellow background.
Creating these tooltips should simply be a matter of creating a hyperlink and entering your descriptive text instead of the URL. Unfortunately, iWeb thinks we are dumb if we don't add the http:// and does it for us so that's no use!
Most methods describing tooltips for iWeb involve editng the HTML file post publishing - which is a total pain.
This test page shows some tooltip methods that can be done using an iWeb Snippet. The one using the image tag is the easiest to achieve...
I apologize for being dense about this, but the image my mouse will roll over is a jpg file, dragged and dropped onto the page, the text that is supposed to appear when the mouse rolls over the first image is also a jpg. Neither have URLs. All of the directions you provided say, "insert URL to image file." That has me stumped!
The file needs to be upload, in a folder, to the root folder on the server and the URL will be...
http://www.domain-name/Folder-Name/Image-Name.jpg
See this page for more info...
Uploaded the images in folders to root folder as directed. Didn't work. Not one of the mouse over directions worked. (I tried them all.) Insanely frustrated at this point! I am ready to give up on mouse over and would settle for a hyperlink to the new image, (appearing on the same page like a pop up text box), but a hyperlink to the image URL doesn't work either. Is there a secret to that too? I sincerely appreciate your help!!
Test the URL to an image in the browser to make sure its correct.
The images do appear in the browser, but when I insert the HTML snippet in iWeb, nothing appears on my published page. It's as if I didn't add the HTML snippet at all.
What is the URL to one of your images?
Ok, getting there. Using this HTML language, it works, but the second image is teeny weeny, (presumably the same size as the first):
<script type="text/javascript">
function mouseOver()
{document.rollover_one.src="http://www.bonniecrockettconsulting.com/text-box.jpg"}
function mouseOut(){
document.rollover_one.src="http://www.bonniecrockettconsulting.com/question-mark-40x41.jpg"}
</script>
<img alt="Link Title" src="http://www.bonniecrockettconsulting.com/question-mark-40x41.jpg"} name="rollover_one" width="25" height="" onmouseover="mouseOver()" onmouseout="mouseOut()" style="border: none;"/></a>
When I try method #3 on http://oldtoad.net/Demo_1/Rollover.html, which says it allows the second image to be larger than the first, it doesn't work at all. However, I can't cut and paste the method #3 language, (it must be a jpg), so maybe I am doing something wrong when retyping it. I've tried is many times.
The URL image to appear on the page:
http://www.bonniecrockettconsulting.com/question-mark-25
The URL to the image I was to popup:
OT's instructions are for toads and normal people. My instructions are for musicians...
http://www.iwebformusicians.com/Website-Photos/Rollover-Image.html
In your code the image width is set to "25" and you don't have a height !
Try this...
<SCRIPT LANGUAGE="JavaScript">
<!-- Begin
loadImage1 = new Image();
loadImage1.src="http://www.bonniecrockettconsulting.com/text-box.jpg";
staticImage1 = new Image();
staticImage1.src="http://www.bonniecrockettconsulting.com/question-mark-25.jpg";
// End -->
</script>
<span onmouseover="image1.src=loadImage1.src;" onmouseout="image1.src=staticImage1.src;">
<img name="image1" src="http://www.bonniecrockettconsulting.com/question-mark-25.jpg" border=0></span>
Ok, tried the following cut and paste from your link, but the rollover image is still the same size as the intact image. I also pasted the language you just sent me -- same result. The rollover image is the same size as the intact image.
I've got it!! In order to have the rollover image appear correctly, all I had to do was expand the HTML Snippet box. (Sometimes the dumbest mistakes stump me the longest.) Yay! THANK YOU Roddy. You are my hero!
You can wrap the whole thing in a div and specify its size...
<div style="width: 350px; height: 153px">
<SCRIPT LANGUAGE="JavaScript">
<!-- Begin
loadImage1 = new Image();
loadImage1.src="http://www.bonniecrockettconsulting.com/text-box.jpg";
staticImage1 = new Image();
staticImage1.src="http://www.bonniecrockettconsulting.com/question-mark-25.jpg";
// End -->
</script>
<span onmouseover="image1.src=loadImage1.src;" onmouseout="image1.src=staticImage1.src;">
<img name="image1" src="http://www.bonniecrockettconsulting.com/question-mark-25.jpg" border=0></span>
</div>
In this first line...
<div style="width: 350px; height: 153px">
... enter the width and height of the enlarged image.
I am trying to create a popup window that opens automatically when you scroll over certain text, (e.g., to provide a definition to the terms scrolled over). Help!
