...

View Full Version : Shaking MouseOver



Drnl
06-28-2009, 07:17 AM
Hello All,
I am having some difficulty with programming 5 rollover jpg onMouseOver that, when mouseover one image replaces the other. I am relatively new to writing Javascript and would greatly appreciate all the help I can get. What I'm looking for is to have five words formatted in Microsoft Wordart that have been altered in Paint and transferred over to my Mac. These WordArt jpegs are to be replaced by five different jpeg files. When I preview my script, the WordArt images show up just fine, but the moment my mouse pointer comes near them, the image begins shaking on the page and another one of my Wordart words appears below the MouseOver image (sorry for the run-on sentence). If it makes any difference, I am programming this script using my Mac. Again, I thank you for your help in advance-I appreciate your time and energy. I have been puling my hair out for a while now trying to debug this script. My script is as follows:
[CODE]
<html>

<<head> <title> About Us </title>

<SCRIPT LANGUAGE="JavaScript">


<!-- Begin

image1 = new Image();
image1.src = "WHOSWAP.jpg";

image2 = new Image();
image2.src = "ISSWAP";

image3 = new Image();
image3.src = "FREEDOMSWAP.jpg";

image4 = new Image();
image4.src = "INSIDESWAP.jpg";

image5 = new Image();
image5.src = "OUTSWAP.jpg";

// End -->
</script>
</HEAD>

<body bgcolor="0000#000000">
<<BODY><div id=EchoTopic>

<a href="" onmouseover="image1.src='WHOSWAP.jpg';"
onmouseout="image1.src='WHO.jpg';">
<img name="image1" src="WHO.jpg" border=0></a>

<a href="" onmouseover="image2.src='ISSWAP';"
onmouseout="image2.src='IS.jpg';">
<img name="image2" src="IS.jpg" border=0></a>

<a href="" onmouseover="image3.src='FREEDOMSWAP.jpg';"
onmouseout="image3.src='FREEDOM.jpg';">
<img name="image3" src="FREEDOM.jpg" border=0></a>

<a href="" onmouseover="image4.src='INSIDESWAP.jpg';"
onmouseout="image4.src='INSIDE.jpg';">
<img name="image4" src="INSIDE.jpg" border=0></a>

<a href="" onmouseover="image5.src='OUTSWAP.jpg';"
onmouseout="image5.src='OUT.jpg';">
<img name="image5" src="OUT.jpg" border=0></a>

</BODY>
[CODE]

Old Pedant
06-29-2009, 03:18 AM
Can you show this "live" someplace??

*PROBABLY* the problem is that the image size changes such that the mouse is no longer over the image when the swap takes place. So the browser says "oh, we're no longer over the image, so we're no longer over the <A> tag, so let's call onmouseout." And, of course, when the images swap back, *now* the mouse is once again over the image and the cycle repeats.

It's a common problem. One way to solve it is to make sure that the two images are the same size, even if it means adding unused background to the smaller one. But if you can't reasonably do that, show us what you have.

Drnl
07-02-2009, 02:31 PM
Thank you Old Pedant!
I had just assumed that all of my files were the same size when I created them-apparently not. I ended up resizing them using Gimp and they worked like a charm. I did, however, decide to go with a different rollover script, but all the same, thank you for your suggestion, it helped with my second rollover script.
Many thanks,
Drnl



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum