Keskustelu: Nettisivujen teko: Kuvan näyttö & piilotus - osa 2

Eli jatkoa tähän aiheeseen johon en enää kysymystä saanut lisättyä...
https://www.ohjelmointiputka.net/keskustelu/19468-kuvan-näyttö-ja-piilotus

Missä tässä seuraavassa systeemissä on vika? Ensimmäisen ison kuvan näyttää ihan oikein, mutta toisen ison kuvan kohdalla näkyykin se ensimmäinen iso kuva.
Kaikkea omaan mieleen tulevaa olen kokeillut ilman tulosta joten jos te kokeneemmat täällä osaisitte auttaa...

<script>
function nayta(kuva) {
    kuva = document.getElementById(kuva);
    kuva.style.visibility = "visible";
}
function pois(kuva) {
    kuva = document.getElementById(kuva);
    kuva.style.visibility = "hidden";
}
</script>
<img style="position:absolute;left:100px;top:400px" id="pieni" src="pienikuva1.jpg" onmouseover="nayta('suuri')" onmouseout="pois('suuri')">

<img style="position:absolute;left:300px;top:200px;visibility:hidden" id="suuri" src="isokuva1.jpg">


<script>
function nayta(kuva) {
    kuva = document.getElementById(kuva);
    kuva.style.visibility = "visible";
}
function pois(kuva) {
    kuva = document.getElementById(kuva);
    kuva.style.visibility = "hidden";
}
</script>
<img style="position:absolute;left:100px;top:500px" id="pieni" src="pienikuva2.jpg" onmouseover="nayta('suuri')" onmouseout="pois('suuri')">

<img style="position:absolute;left:300px;top:300px;visibility:hidden" id="suuri" src="isokuva2.jpg">

Mod. lisäsi kooditagit

Skriptin kuuluu olla sivulla vain kerran, ja kukin id-attribuutti (tässä siis id="suuri" ja id="pieni") saa esiintyä sivulla vain kerran, joten nayta('suuri') ja nayta('pieni') käsittelevät selaimesta riippuen aina joko ensimmäistä tai viimeistä niistä elementeistä, joille id="suuri" tai id="pieni" on määritelty. Vaihda toisesta kuvasta id:t (id="suuri2" ja id="pieni2") ja vastaavasti nuo nayta-funktion parametrit.

Suurkiitokset! Nyt toimii moitteetta! :)

Vielä löytyi yksi kysymys.
Saako tuota isoa kuvaa "A" näkymään niin että alle jäävät pikkukuvat "b" ja "c" eivät näkyisi ison kuvan "A" läpi/päällä?

Laita isolle kuvalle CSS:ään (style-attribuuttiin) vielä "z-index: 1;" (tai suurempi luku, jos tämä ei riitä). Normaalisti koodissa myöhemmin olevat elementit näkyvät päällimmäisinä, ja z-index-arvolla saa muutettua järjestystä.

Suurkiitokset!