Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 2 of 2
  1. #1
    Regular Coder
    Join Date
    Mar 2006
    Posts
    160
    Thanks
    0
    Thanked 0 Times in 0 Posts

    onMouseover image help

    Hi, This is my code:
    Code:
    <html>
    <head>
    <title>Your Document Title Goes Here</title>
    <script language="javascript">
    <!-- hide script from old browsers
    
    //detect browser:
    browserName = navigator.appName;
    browserVer = parseInt(navigator.appVersion);
    if (browserName == "Netscape" && browserVer >= 3) browserVer = "1";
    else if (browserName == "Microsoft Internet Explorer" && browserVer == 4) browserVer = "1";
    else browserVer = "2";
    
    //preload images:
    if (browserVer == 1) {
    a1 = new Image;
    a1.src = "button1.bmp";
    a2 = new Image;
    a2.src = "button2-2.bmp";
    b1 = new Image;
    b1.src = "button4.bmp";
    b2 = new Image;
    b2.src = "button3-3.bmp";
    }
    
    //image swapping function:
    function hiLite(imgDocID, imgObjName, comment) {
    if (browserVer == 1) {
    document.images[imgDocID].src = eval(imgObjName + ".src");
    window.status = comment; return true;
    }}
    //end hiding -->
    </script>
    </head>
    <body background="some_image.jpg" text="#000000" link="#ff0000" alink="#00ff00" vlink="#0000ff">
    <a href="menuz.html" onMouseOver="hiLite('a','a2','Your Comment Here')" onMouseOut="hiLite('a','a1','')"><img name="a" src="button1.bmp" border=0 ></a>
    <a href="menuz.html" onMouseOver="hiLite('b','b2','Your Comment Here')" onMouseOut="hiLite('b','b1','')"><img name="b" src="button4.bmp" border=0 ></a>
    </body>
    my problem is when I put my mouse on one button the other moves to the left a little when i do it. I want it to not move to the left or right at all. Can you help? Just put your own images in there to see what i mean.

    Thanks

  • #2
    Senior Coder Arbitrator's Avatar
    Join Date
    Mar 2006
    Location
    Splendora, Texas, United States of America
    Posts
    3,339
    Thanks
    29
    Thanked 282 Times in 276 Posts
    First check that the images you're using for each rollover are exactly the same size. Second, specify the height and width properties on your images. Example: <img style="width: 60px; height: 30px; border: 0;">. Otherwise, I would guess that there'd be no positioning problems; however I can't exactly test it now can I? When you want to test positioning that's directly related to images you should provide the images to allow others to test your code without guesswork.

    I should also mention that both your HTML and JavaScript markup seems to be terribly deprecated (out-dated) and should be updated using modern code such as CSS; in addition, you're missing a Document Type Declaration (DTD).
    For every complex problem, there is an answer that is clear, simple, and wrong.


  •  

    Posting Permissions

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