Why doesnt my simple javascript rollover work?

问题

Hi guys I have a simple rollover onmouseover effect, I have tried several scripts but none of them work, can anyone tell me why?`

javascript:

<script language="JavaScript" type="text/javascript">
<!--
if (document.images) {
    homebuttonup = new Image();
    homebuttonup.src = "./images/gym-light.png";
    homebuttondown = new Image();
    homebuttondown.src = "./images/buttonright.png";
}

function buttondown(buttonname) {
    if (document.images) {
        document[buttonname].src = eval(buttonname + "down.src");
    }
}

function buttonup(buttonname) {
    if (document.images) {
        document[buttonname].src = eval(buttonname + "up.src");
    }
}
// -->
</script>

and link:

    <a href="index.html" onmouseover="buttondown('homebutton')"       onmouseout="buttonup('homebutton')">
  <img id='Img4Inner' name="homebutton" src='./images/gym-light.png' alt="" />

  </a>

回答1:

**UPDATE 2 (last one lol) ** you currently have the onmouseout and onmouseover on the a tag, move them to the image tag and it will work:

you're code:

<a onmouseout="buttonup('homebutton')" onmouseover="buttondown('homebutton')"        
href="http://www.[...].com" style="height:120px;width:100px;">
<img id="Img4Inner" alt="" src="http://[..].com/images/gym-light.png" name="homebutton">
</a>

Working code:

<a onmouseout="buttonup('homebutton')" onmouseover="buttondown('homebutton')"        
href="http://www.[...].com" style="height:120px;width:100px;">
 <img alt="" src="http://[...]/images/gym-light.png"  onmouseout="buttonup(this)" 
     onmouseover="buttondown(this)" name="homebutton" id="Img4Inner">
</a>

Update: because you're invoking the functions on the anchor tags they need to have a height and a width similar to the following (place your height and width accordingly):

<a style="height:25px;width:25px;" href="http://www.[...].com" 
onmouseover="buttondown('homebutton')" onmouseout="buttonup('homebutton')">
...
</a>

and I"m out...

I just used firebug, edited the HTML with the height and width and it worked fine :

)

and while I"m sure that will solve the problem.. the doctype is set to <!doctype html> and should be something like what's here (LINK)

if you would've implemented the below approach, the image would have a height and width, and since that is the image that is being targeting, might make more sense..

http://jsfiddle.net/ETHaM/2/

if (document.images) {
    homebuttonup = new Image();
    homebuttonup.src = "http://www.placekitten.com/100/100/";
    homebuttondown = new Image();
    homebuttondown.src = "http://dummyimage.com/100x100/000/fff";
}

function buttondown(obj) {
    if (document.images) {
        obj.src = eval(obj.name+ "down.src");
    }
}

function buttonup(obj) {
    if (document.images) {
        obj.src = eval(obj.name + "up.src");
    }
}


<a href="index.html">
<img id='Img4Inner' onmouseover="buttondown(this)" onmouseout="buttonup(this)" name="homebutton" src='http://www.placekitten.com/100/100/' alt="" />
</a>

回答2:

Your code works

Here is however a more unobtrusive version

http://jsfiddle.net/mplungjan/927nN/

<a href="index.html" id="homeLink"><img
 id='Img4Inner' class="hoverImg"
 name="homebutton" src='http://www.placekitten.com/100/100/' alt="" /></a>
 <a href="about.html" id="aboutLink"><img
 id='Img5Inner' class="hoverImg"
 name="aboutbutton" src='http://www.placekitten.com/100/100/' alt="" /></a>

var buttons={};
if (document.images) {
    buttons["homebuttonup"] = new Image();
    buttons["homebuttonup"].src = "http://www.placekitten.com/100/100/";
    buttons["homebuttondown"] = new Image();
    buttons["homebuttondown"].src = "http://dummyimage.com/100x100/000/fff";
    buttons["aboutbuttonup"] = new Image();
    buttons["aboutbuttonup"].src = "http://www.placekitten.com/100/100/";
    buttons["aboutbuttondown"] = new Image();
    buttons["aboutbuttondown"].src = "http://dummyimage.com/100x100/000/fff";
}

window.onload=function() {
    var images = document.getElementsByTagName("img");
    for (var i=0,n=images.length;i<n;i++) {
        if (images[i].className=="hoverImg") {
            images[i].parentNode.onmouseover=function() {
              var buttonname=this.id.replace("Link","button");
              document[buttonname].src = buttons[buttonname + "down"].src;
            }
            images[i].parentNode.onmouseout=function() {
              var buttonname=this.id.replace("Link","button");
              document[buttonname].src = buttons[buttonname + "up"].src;
            }
        }
    }   
}

来源：https://stackoverflow.com/questions/10215938/why-doesnt-my-simple-javascript-rollover-work

标签

javascript

image

onmouseover

rollover