Почему мой простой ролловер Javascript не работает?

Question

Привет, ребята, у меня есть простой эффект опрокидывания, я пробовал несколько сценариев, но ни один из них не работает, может кто-нибудь сказать мне, почему?`

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>

и ссылка:

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

  </a>

Answer 1

** ОБНОВЛЕНИЕ 2 (последний раз lol) ** у вас в настоящее время есть onmouseout и onmouseover на теге, переместите их в тег изображения, и это будет работать:

вы код:

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

Рабочий код:

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

Обновление: поскольку вы вызываете функции для тегов привязки, они должны иметь высоту и ширину, аналогичные приведенным ниже (соответственно укажите ваши высоту и ширину):

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

и я вышел...

Я просто использовал firebug, отредактировал HTML с высотой и шириной, и он работал нормально:

)

и хотя я уверен, что это решит проблему.. тип документа имеет значение и должен быть примерно таким, как здесь ( ССЫЛКА)

Если бы вы реализовали описанный ниже подход, изображение имело бы высоту и ширину, и, поскольку это целевое изображение, может иметь больше смысла.

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>

Answer 2

Ваш код работает

Вот, однако, более ненавязчивая версия

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