Zmena obrázku na aktuálne vznášajúcom sa obrázku na základe názvu triedy - JavaScript - javascript

Snažím sa vytvoriť funkciu pomocou čistého JavaScriptu na zmenu zdroja obrázkov, ktorý je momentálne nad týmto obrázkom, zo sady obrázkov s rovnakou triedou. S nasledujúcim kódom sa nič nestane:

<section id="imgs">
<div class="boundary">
<img class="cage" src="/images/cage.png" height="150px" />
</div>
<div class="boundary">
<img class="cage" src="/images/cage.png" height="150px" />
</div>
<div class="boundary">
<img class="cage" src="/images/cage.png" height="150px" />
</div>
<div class="boundary">
<img class="cage" src="/images/cage.png" height="150px" />
</div>

</section>

A moja funkcia JavaScript:

<script language="JavaScript">

var x = document.getElementsByClassName("cage");
for (var i = 0; i < x.length; i++) {
x[i].onMouseOver = function () {
this.src = "cageF.png";
}
}

</script>

odpovede:

musíte sa starať case sensitivity, použitie onmouseover namiesto onMouseOver

var x = document.getElementsByClassName("cage");
for (var i = 0; i < x.length; i++) {
x[i].onmouseover = function () {
this.src = "cageF.png";
}
}

demonštrácie

Rozumiem, že ste odpovedali na svoju otázku. Prezrite si odkazy uvedené nižšie, aby ste lepšie pochopili JavaScript.

JavaScript rozlišuje veľké a malé písmená

JavaScript rozlišuje veľké a malé písmená a používa znakovú sadu Unicode.

Udalosť myšou JavaScript