View Full Version : onMouseover image help

05-04-2006, 01:19 AM
Hi, This is my code:

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

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.


05-04-2006, 02:55 AM
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).