2

srcJavascriptを使用してHTML画像を変更しようとしています。私は 2 つの画像 Plus.gif と Minus.gif を持っています。HTML タグを挿入し、クリックしたときimgに画像を変更する Javascript 関数を作成しました。src

問題は、ユーザーが画像をクリックしたときに元に戻したいということです。たとえば、ページが読み込まれるとPlus.gifショーが表示され、ユーザーがクリックすると画像が に変わりますMinus.gif。

画像が でMinus.gifあり、ユーザーがそれをクリックすると、これが に変更されPlus.gifます。

ここに私のJavascript関数があります:

<script language="javascript" type="text/javascript">
  function chngimg() {
    var img = document.getElementById('imgplus').src; //= 'Images/Minus.gif';

    if (img) {
      document.getElementById('imgplus').src = 'Images/Minus.gif';
    } else if (!img) {
      document.getElementById('imgplus').src = 'Images/Plus.gif';
      alert(img);
    }

  }
</script>

画像タグ:

<img id="imgplus" alt="" src="Images/Plus.gif" onmouseover="this.style.cursor='pointer'" onclick="chngimg()"   />
4

3 に答える 3

13

機能させるために行った変更を確認してください

<script language="javascript" type="text/javascript">
    function chngimg() {
        var img = document.getElementById('imgplus').src;
        if (img.indexOf('Plus.gif')!=-1) {
            document.getElementById('imgplus').src  = 'Images/Minus.gif';
        }
         else {
           document.getElementById('imgplus').src = 'Images/Plus.gif';
       }

    }
</script>

<img id="imgplus" alt="" src="Images/Plus.gif" onmouseover="this.style.cursor='pointer'" onclick="chngimg()"   />

あなたの質問が解決することを願っています。

于 2012-09-01T07:42:29.247 に答える
4

1 つの方法は、関数にトグル変数を追加することです。

var toggle = false;
function chngimg() {
    if (toggle === true) {
        document.getElementById('imgplus').src  = 'Images/Minus.gif';
    } else {
       document.getElementById('imgplus').src = 'Images/Plus.gif';
       alert(img); 
    }
    toggle = !toggle; 
}

この種のものにはスプライトを使用する方が良いことに注意してください。2 つの画像を使用している場合、最初に画像をクリックしたときに 2 番目の画像が読み込まれるまでにわずかな遅延が発生するため、ユーザー エクスペリエンスはぎこちなくなります。

2 つの画像をスプライト シートとして用意し、JQuery を使用するのが理想的です。次に、このようにするだけです。

HTML

<img id="imgplus" src="Images/Sprite.gif" onclick="chngimg()" />

CSS

#imgplus .clicked { background-position: 0 -30px; }

Javascript

function chngimg() {
    $("#imgplus").toggleClass("clicked");
}
于 2012-09-01T07:34:51.320 に答える