Spojrzałem na podobne pytania i odpowiedzi na Stack Overflow, z którymi nie mogę pracować. wszystko jest znalezione po załadowaniu strony, ale kiedy najeżdżam kursorem, nie wyświetla się nowy gif.

Podczas inspekcji kodu w przeglądarce wydaje się, że przełącza się między dwoma obrazami.

<!DOCTYPE html>
<html>
<head>
<script>


function normalImg() {
  document.getElementById("smile").src = "/smiley.gif"
}
function singing() {
  document.getElementById("smile").src = "/sing.gif"
}

</script>
</head>
<body>


<img onmouseout="normalImg()" border="0" src="smiley.gif" alt="Smiley" width="32" height="32" id="smile" 
onmouseover="singing()" border="0" src="sing.gif" alt="singing" width="32" height="32">


<p>onmouse out and onmouseover changing images</p>

</body>
</html>
1
Ryan JT 31 marzec 2020, 20:56

3 odpowiedzi

Najlepsza odpowiedź

Powinieneś mieć tylko jeden atrybut src w tagu , możesz wypróbować poniższy kod:

<!DOCTYPE html>
<html>
<head>
<script>


function singing() {
  document.getElementById("smile").src = "https://upload.wikimedia.org/wikipedia/commons/0/06/180717_%EC%97%B4%EB%A6%B0%EC%9D%8C%EC%95%85%ED%9A%8C_%ED%8A%B8%EC%99%80%EC%9D%B4%EC%8A%A4_%2818%29.jpg"
  document.getElementById("smile").alt="smiling"
}

function crying() {
  document.getElementById("smile").src = "https://upload.wikimedia.org/wikipedia/commons/c/cd/Chou_Tzuyu_at_the_Golden_Disc_Awards_2019.png"
  document.getElementById("smile").alt="crying"
}

</script>
</head>
<body>


<img onmouseover="singing()" onmouseout="crying()" src="https://upload.wikimedia.org/wikipedia/commons/c/cd/Chou_Tzuyu_at_the_Golden_Disc_Awards_2019.png" alt="singing" width="100" height="100" id="smile">


<p>onmouse out and onmouseover changing images</p>

</body>
</html>
1
Kuo-hsuan Hsu 31 marzec 2020, 18:21

Zamiast używać javascript do zmiany źródła obrazu po najechaniu myszą i najechaniu myszą, lepiej będzie zmienić źródło obrazu na podstawie samego najechania kursorem.

Spójrz na to: CSS: zmień źródło obrazu na img: hover

  • Hover obsługuje zarówno zdarzenie mouseenter, jak i mouseleave.

  • Najechanie myszą jest najlepsze w sytuacjach, w których obchodzi Cię tylko wtedy, gdy mysz przekroczyła granicę elementu i nie obchodzi Cię, co się stanie, jeśli opuści. Jeśli chcesz wywołać jakieś zdarzenie na elemencie.

0
Pranshu Pranjal 31 marzec 2020, 18:05

Nie potrzebujesz / na początku swojej ścieżki do gif.

Zastąpić document.getElementById("smile").src = "/smiley.gif" z document.getElementById("smile").src = "smiley.gif"

To samo dotyczy sing.gif

0
Nikola Dim 31 marzec 2020, 18:01