Tervehdys Ohjelmointiputkalaiset.
Haussa olisi parempi tyylitys kyseiselle toiminnolle.
<!DOCTYPE html
PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fi" lang="fi">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<style type="text/css">
.wrapper {
position: relative;
}
#image1 {
position: absolute;
top: 0;
left: 0;
z-index: 1;
}
#image1:hover {
z-index: -1;
}
#image2 {
position: absolute;
top: 0;
left: 0;
z-index: 0;
}
#image2:hover {
z-index: 2;
}
</style>
<title>Kuvat päällekkäin</title>
</head>
<body>
<div class="wrapper">
<img src="image1.jpg" alt="image1" id="image1" />
<img src="image2.jpg" alt="image2" id="image2" />
</div>
</body>
</html>Edit: Esimerkki Kuvat päällekkäin
Onko tuossa tyylityksessä sitten jokin ongelma?
Itse toteuttaisin ehkä tähän malliin:
<!DOCTYPE html>
<html>
<head>
<title>Kuvan vaihto hoverilla</title>
<style type="text/css">
.kuvat {
position: relative;
display: inline-block;
}
.kuvat img:first-child {
position: absolute;
z-index: 1;
}
.kuvat:hover img:first-child {
display: none;
}
</style>
</head>
<body>
<span class="kuvat">
<img src="image1.jpg" alt="image1" />
<img src="image2.jpg" alt="image2" />
</span>
</body>
</html>Kiitokset.
Jos tässä halutaan vain kuvan vaihtuvan toiseksi hoverilla, niin siihen olisi vielä yksinkertaisempi ja varmemmin (aika vanhoissakin selaimissa) toimiva tapa: Laitetaan sivulle tyhjä elementti ja sille taustakuva, jota vaihdetaan pelkällä CSS:llä. Tilanteesta (tarkoituksesta) riippuu, onko tällainen sopiva ja ehkä jopa parempi tapa kuin se, missä kuvat ovat sisältönä.
<!DOCTYPE html>
<html>
<head>
<title>Kuvan vaihto hoverilla</title>
<style type="text/css">
.kuvat { width: 200px; height: 200px;
background: url(image1.jpg); }
.kuvat:hover { background: url(image2.jpg); }
</style>
</head>
<body>
<div class="kuvat"></div>
</body>
</html>Metabolixin esimerkki toimii IE7+. Esimerkkisi toimii myös IE7+, mutta se toimii huonommin erityisesti vanhoilla selaimilla, koska ainakin IE7 taisi vielä latailla kuvat uudelleen joka kerran kun background-image vaihtuu. Omalla koneella testaillessa tätä ei huomaa, kun taas netin ylitse viive korostuu selaimen tarkistaessa, onko kuva edelleen olemassa palvelimella.
Uudemmat selaimet välimuistittavat jo fiksummin, mutta niilläkin taustakuvan vaihtaminen aiemmin täysin piilossa/käyttämättömissä olleeseen kuvaan aiheuttaa ensimmäisellä kerralla viiveen, koska kuva tarvitsee ladata. En tosin ole tutkinut, osaavatko nykyään selaimet tehdä poikkeuksen :hoverin kohdalla, voi olla että osaavat. Vanhemmat selaimet eivät kuitenkaan osanneet.
Turvallisinta on kuitenkin saada kuvat lataamaan saman tien ja pitää ne käytössä, aivan kuten Metabolixin esimerkki tekee. Sitä voisi korkeintaan "parantaa" vaihtamalla display: none; tilalle z-index: -1;
Tässä vielä IE6:n rajoitukset huomioiva versio:
<!DOCTYPE html>
<html>
<head>
<title>Kuvan vaihto hoverilla</title>
<style type="text/css">
a.kuvat {
background-repeat: no-repeat;
cursor: default;
display: inline-block;
}
a.kuvat img {
border: 0;
display: block;
visibility: hidden;
}
a.kuvat:hover {
background-position: -20000em;
}
a.kuvat:hover img {
visibility: visible;
}
</style>
</head>
<body>
<a href="#" class="kuvat" style="background-image:url(lue_lisaa3.jpg)">
<img src="lue_lisaa2.jpg" alt="image1" />
</a>
<a href="#" class="kuvat" style="background-image:url(lue_lisaa5.jpg)">
<img src="lue_lisaa4.jpg" alt="image2" />
</a>
</body>
</html>Rajoituksia ovat mm. :hoverin toiminta vain a-elementeissä, :first-childin puute sekä visibility-bugi kun isäntäelementissä on taustakuva. Ei kukaan järkevä IE6:lle enää kehitä.
Kiitos jälleen asiantuntevasta tarkennuksesta Merri. Itselleni riittää tosiaan, että kaikki "nykyaikaiset" selaimet tukevat kyseistä pätkää.
Aihe on jo aika vanha, joten et voi enää vastata siihen.