views:

2047

answers:

2

I am using the JavaScript onmouseover event for the menu on my website, but it does not work in firefox when I declare a doctype. And if i don't declare a doctype IE displays the page wrong. Here is the method that I used.

loadImage1 = new Image();
loadImage1.src = "http://broken.gif"; 
staticImage1 = new Image();
staticImage1.src = "http://broken.gif";

loadImage2 = new Image();
loadImage2.src = "http://broken.gif";
staticImage2 = new Image();
staticImage2.src = "http://broken.gif";

loadImage3 = new Image();
loadImage3.src = "http://broken.gif";
staticImage3 = new Image();
staticImage3.src = "http://broken.gif";

function showa() {
    image1.src=loadImage1.src;
}

function hidea() {
    image1.src=staticImage1.src;
}

function showb() {
    image2.src=loadImage2.src;
}

function hideb() {
    image2.src=staticImage2.src;
}

function showc() {
    image3.src=loadImage3.src;
}

function hidec() {
    image3.src=staticImage3.src;
}

And in the body:

    <a href="http://broken.html" onMouseOver="showa()" onmouseout="hidea()">
        <img name="image1" src="http://broken.gif" alt="Browse" width="193" height="47" border="0" />
    </a>

    <a href="http://broken.html" onmouseover="showb()" onmouseout="hideb()">
        <img name="image2" src="http://broken.gif" width="193" height="47" alt="Make a List" border="0" />
    </a>

    <a href="http://broken.html" onmouseover="showc()" onmouseout="hidec()">
        <img name="image3" src="http://broken.gif" width="193" height="47" alt="Requests" border="0" />
    </a>
</div>

<div id="searchbar">
    <img  src="..broken.gif" width="222" height="41" />
    <img src="..broken.gif" width="108" height="41" alt="Search" />
+3  A: 

Firefox does not like the way you refer to your images by name. Use Id and getElementById instead.

Edit. Notice excellent Ben Blank' comment that for some reason WMD won't correctly display in the post.

buti-oxa
In other words, in your show/hide functions, replace "`image#.src =`" with "`document.getElementById("image#").src =`" and in the body change "`<img name=`" to "`<img id=`"
Ben Blank
A: 

Ok great I got it working with javascript. I have to say I'm so impressed with this community, thanks for all your help. Now I'm going to learn to do it the right way ;).

Atomix