ako pogledas DOM stablo te strane mozes da vidis da taj efekat funkcionise tako sto element koji sluzi kao kontejner oko link sa manjom slikom sadzi jos jedan element koji u sebi sadrzi vecu sliku i taj element je inicijalno sakriven. kada se kontejen hoveruje element koji u sebi sadrzi vecu sliku se prikaze pomocu
.animate() metode.
dakle, struktura bi u osnovi bila ovakva:
Code (html):
<div class="container">
<a href=".."><img src="small.png" /></a>
<div class="large">
<a href=".."><img src="large.png" /></a>
</div>
</div>
sto se potrebnog css-a tice, .container mora da ima
position: relative dok .large mora da ima
position: absolute; display: none;, ukoliko su ti .container i .large fiksne velicine onda mozes u css-u definisati
left i
top za .large, u suprotnom moraces da izracunas te vrednosti pomocu javascripta.
sam javascript je veoma prost, ako uzmemo jquery:
Code (javascript):
jQuery(function($) {
$('.container').hover(
function() { $(this).find('>.large').stop().animate({opacity: 1}); },
function() { $(this).find('>.large').stop().animate({opacity: 0}); }
);
});
ovo je samo jedan od nacina kako da se postigne taj efekat, mislim da je dovoljno jednostavan za pocetnike.
Potpis