0

いくつかの JavaScript 呼び出しを含む画像がありますが、そのほとんどは問題なく動作します。

基本的に、私がやりたいことは、スワップ画像をクリックしてから、現在どの画像にあるかに応じて、マウスオーバーでもスワップすることです。

ここに私のHTMLがあります:

<a href="#show" class="show_hide">
<img src="<?php echo WEB_URL; ?>/images/show-more-arrow.jpg" width="61" height="45" id="clicktoggleimage" onclick="changeImage()" onMouseOver="checkMouseOver()" onMouseOut="checkMouseOut()" /></a>

そして私のJavascript：

function changeImage() {
    if (document.getElementById("clicktoggleimage").src == "http://www.pete.com/images/show-less-arrow.jpg") {
        document.getElementById("clicktoggleimage").src = "http://www.pete.com/images/show-more-arrow.jpg";
    } else {
        document.getElementById("clicktoggleimage").src = "http://www.pete.com/images/show-less-arrow.jpg";
    }
}

function checkMouseOver() {
    if (document.getElementById("clicktoggleimage").src == "http://www.pete.com/images/show-less-arrow.jpg") {
        document.getElementById("clicktoggleimage").src = "http://www.pete.com/images/show-less-arrow-over.jpg";
    } else if (document.getElementById("clicktoggleimage").src == "http://www.pete.com/images/show-more-arrow.jpg") {
        document.getElementById("clicktoggleimage").src = "http://www.pete.com/images/show-more-arrow-over.jpg";    
    }
}

function checkMouseOut() {
    if (document.getElementById("clicktoggleimage").src == "http://www.pete.com/images/show-less-arrow-over.jpg") {
        document.getElementById("clicktoggleimage").src = "http://www.pete.com/images/show-less-arrow.jpg";
    } else if (document.getElementById("clicktoggleimage").src == "http://www.pete.com/images/show-more-arrow-over.jpg") {
        document.getElementById("clicktoggleimage").src = "http://www.pete.com/images/show-more-arrow.jpg"; 
    }
}

ボタンが 2 回目にクリックされたときを除いて、これは正常に機能します。画像は show-less-arrow.jpg に戻りません。

助けてくれて本当にありがとうございます

4

1 に答える 1

1

この JS をより効率的にすることができます。

関数内で、またはその逆にのみ置き換えているように見えるので'more'、それはまさに関数が行うべきことです。マウスオーバー/オフは、文字列のセクションを切り替えるだけです。'less'changeImage'-over'

したがって、HTML からイベント リスナーを削除します。

<a href="#show" class="show_hide">
    <img src="<?php echo WEB_URL; ?>/images/show-more-arrow.jpg" width="61" height="45" id="clicktoggleimage" />
</a>

そして、このJavascriptを使用してください：

var img = document.getElementById("clicktoggleimage");

function changeImage() {
    if (img.src.indexOf('less') == -1) {
        img.src = img.src.replace('more', 'less');
    } else {
        img.src = img.src.replace('less', 'more');
    }
}

function hoverImage() {
    if (img.src.indexOf('arrow-over') == -1) {
        img.src = img.src.replace('arrow', 'arrow-over');
    } else {
        img.src = img.src.replace('arrow-over', 'arrow');
    }
}

img.onclick = cangeImage;
img.onmouseover = img.onmouseout = hoverImage;
于 2013-01-09T11:47:48.913 に答える