Почему мой простой прокрутка javascript не работает?

Question

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

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

** UPDATE 2 (последний один лол) ** вы в настоящее время имеют 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> 

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

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

и я "м из ...

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

)

и в то время как я "м уверен, что позволит решить проблему .. Для доктайпа установлен в < ! doctype html > и должен быть чем-то вроде того, что здесь (LINK)

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

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