Double Image Mouseover

[krichard]

Hello...

I would like to mouseover Image 1 in the center of my page, and have Image A and Image B appear above and below Image 1 and stay on mouseout... Can anyone help me out with a script for this function?? THANKS KIMBERLY!

 

[BillyRayPreachersSon]

If you add an onmouseover to the "main" image:

<img src="wibble.gif" width="10" height="10" onmouseover="showImages();">

And have the other images already on the page, each with a unique ID and a style setting them to hidden:

<img src="wibble.gif" width="10" height="10" id="imageID1" style="visibility:hidden;">

Then you can have a function called showImages in your Javascript section:

function showImages()
{
   document.getElementById('imageID1').style.visibility = 'visible';
   document.getElementById('imageID2').style.visibility = 'visible';
}

Hope this helps,
Dan

 

[krichard]

Hello... I added the code that you gave me above, and i can't get the two images to appear when I mouseover, nor does the opacity change on the main image, when I mouseover... Could you please take a look at my code??? THANKS

<script>
function showImages()
{
document.getElementById('imageID1').style.visibility = 'visible';
document.getElementById('imageID2').style.visibility = 'visible';
}
</script>

<img src="Images/verb.JPG" width="852" height="142" id="imageID1" style="visibility:hidden;">

<a href="javascript:ChangeMenu('

http://www.pckeyboarding.com/Illuminate.htm')"><img

src="Images/ae2.jpg" width="122" height="122" border="0"style="filter:alpha(opacity=30);-moz-opacity:0.3" onMouseOver="high(this)";"showImages();" onMouseOut="low(this)"></a>

<img src="Images/noun.JPG" width="836" height="188" id="imageID2" style="visibility:hidden;">

 

[BillyRayPreachersSon]

Try changing this:

onMouseOver="high(this)";"showImages();"

to this:

onMouseOver="high(this); showImages();"

You had an extra pair of quotes in there.

Hope this helps,
Dan

 

[krichard]

hmmm... sorry! It still isn't working... any suggestions?

 

[krichard]

NEVERMIND.. I GOT IT! I put the mouseover code in the link section instead of the image code! THANKS SO MUCH!