Hello and welcome to our community! Is this your first visit?
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 3 of 3
  1. #1
    New to the CF scene
    Join Date
    Jun 2009
    Thanked 0 Times in 0 Posts

    Shaking MouseOver

    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:

    <<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 -->

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

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

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

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

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

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


  • #2
    Supreme Master coder! Old Pedant's Avatar
    Join Date
    Feb 2009
    Thanked 4,745 Times in 4,707 Posts
    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.

  • Users who have thanked Old Pedant for this post:

    Drnl (07-02-2009)

  • #3
    New to the CF scene
    Join Date
    Jun 2009
    Thanked 0 Times in 0 Posts

    Macintosh Voilà!

    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,


    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts