Javascript onclick с onmouseover и onmouseout

Question

У меня есть изображение с несколькими вызовами 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"; 
    } 
} 

Это работает отлично, за исключением того, когда кнопка будет нажата во второй раз, изображение не возвращается назад к шоу-менее arrow.jpg

Большое спасибо за вашу помощь

Answer 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;