Javascript onclick with onmouseover and onmouseout

本文关键字：and onmouseout onmouseover with onclick Javascript 更新时间：2023-09-26

我有一个带有几个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"; 
    }
}

这很好，除了第二次单击按钮时，图像不会恢复到show-less-arrow.jpg

非常感谢您的帮助

你可以让这个JS更高效。

因为看起来你只是用'less'代替'more'，反之亦然，在你的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;