なぜ私の単純なJavaScriptのロールオーバーは機能しませんか？なぜ誰も私を伝えることができ、私はシンプルなロールオーバーのonmouseover効果を持っている

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

** UPDATE 2（最後の1笑）** あなたは現在、タグ上のonmouseoverれるonmouseoutとを持っているイメージタグに移動し、それが動作します：

あなたがコードしている：更新

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

と、私は "アウトmの

私だけ使用放火犯は、高さと幅でHTMLを編集し、それがうまく働いた：

）を

と私は「DOCTYPEが<に設定します。..問題を解決することを確信している間、 ！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; 
      } 
     } 
    } 
}