0

マウスオーバーとマウスアウトで画像を変更するための一般的なスクリプトを作成しようとしています。

これは私が試していることですが、機能していません。

<script language="javascript" type="text/javascript">
   function mouseOverImage()
   {
      document.getElementById(this.id).src = "/templates/articulistas/images/" + this.id + ".gif";
                        }
   function mouseOutImage()
   {
      document.getElementById(this.id).src = "/templates/articulistas/images/" + this.id + "-off.gif";
   }
</script>

HTML：

<a href="" title="Aumentar o Tamanho da Letra" class="increaseFont">
<img id="aumentar-letra" src="/templates/articulistas/images/aumentar-letra-off.gif" onmouseover="mouseOverImage(this)" onmouseout="mouseOutImage(this)" /></a>
<a href="" title="Diminuir o Tamanho da Letra" class="decreaseFont">
<img id="diminuir-letra" src="/templates/articulistas/images/diminuir-letra-off.gif" onmouseover="mouseOverImage(this)" onmouseout="mouseOutImage(this)" /></a>
4

2 に答える 2

2

そのコードは画像ソースを更新する必要がありますが、それを適切な要素に接続した場合に限りますimg（そして、に依存しているため、適切な方法でthis）。document.getElementById(this.id) is nullあなたが上で述べ たエラーを考えると、あなたはこれを正しく行っていません。

img要素をハンドラー関数にリンクする1つの方法については、次の例を確認してください。

http://jsfiddle.net/NdJJZ/2

于 2012-10-07T05:41:50.737 に答える
1

パスが正しいことを確認することをお勧めします。

"/templates/articulistas/images/" + this.id + ".gif";

これは相対パスのように見えるので、それが../templates/articulistas/images/" + this.id + ".gif";正しい相対パスであると想定するように変更する必要があります。

また、関数内のパラメーターを正しくマップする必要があります。

function mouseOverImage(object) // Accepting an object as argument.
   {
      document.getElementById(object.id).src = "/templates/articulistas/images/" + object.id + ".gif";
                        }
   function mouseOutImage(object)
   {
      document.getElementById(object.id).src = "/templates/articulistas/images/" + object.id + "-off.gif";
   }
于 2012-10-07T05:35:11.540 に答える