Sziasztok!
Olyat szeretnék csinálni, hogy van 4-5 szöveg és egy kép az oldalon, és amikor az egyes szövegek fölé megyek az egérrel, akkor kicseréli a képet egy másikra.
Tud valaki erre valami egyszerű kódot mutatni?
Köszi.
Printable View
Sziasztok!
Olyat szeretnék csinálni, hogy van 4-5 szöveg és egy kép az oldalon, és amikor az egyes szövegek fölé megyek az egérrel, akkor kicseréli a képet egy másikra.
Tud valaki erre valami egyszerű kódot mutatni?
Köszi.
Ez nagyon egyszerű:
Az img tagnél az id megadása a lényeg és hogy az a tagnél erre hivatkozz.Kód:<img src="alapkép elérésnek címe" id="pic" />
<a href="#" onmouseover="document.getElementById('pic').src='új kép elérésének címe';return false;">új kép 1</a>
<a href="#" onmouseover="document.getElementById('pic').src='egy következő kép elérésének címe';return false;">új kép 2</a>
Vagy esetleg ha nincsen kedved a JS-hez akkor css-el;
Kód:#kep{background:url('./')}
#kep:hover{background:url('./')}
Köszi srácok.
Ez tényleg egyszerű.:)
Ha nagy képről van szó, akkor érdemes a következő két csel valamelyikéhez folyamodnod:
1. JavaScript-es megvalósítás esetén pre-loadold a felbukkanó képet.
2. CSS esetén pedig mentsd el egy képbe a kettőt, és csak mozgasd el függőleges irányban Y pixelnyit a background-position-el. ;)
Szerintem fölösleges ide JavaScript, használj inkább stíluslapot!
CSS:
HTML:Kód:#kepcsere {
background-image: url(./a_kep_eleresi_utja/fajl_neve.jpg);
display: block;
width: 640px; /* A kép szélessége pixelben. */
height: 480px; /* A kép magassága pixelben. */
}
#kepcsere:hover {
background-position: 0px -480px; /* Az első az X a második az Y koordináta. */
}
Kód:<div id="kepcsere"></div>
És ez úgy is használható, ha több képet kell cserélgetni?
Esetemben 5-6 név van, és mindegyik névhez más fénykép és térképfedvény tartozik.
Az egyes nevek főlé érve kell váltakoznia az adott cellában a képnek.
Tényleg műxik!
Nem tudom, hogy eddig mit bénáztam.:)
Köszi.