În mod normal, banerele vor fi unul după altul, iar după poziționarea cursorului pe unul din ele, încet, el va fi afișat în întregime. Un fel de acordeon pentru a economisi spațiul.
Instalare: Panoul de Control - Design - Administrarea design-ului (şabloane) - Secţiuni globale [Partea superioară a site-ului] - adăugați codul:
Cod
<style>
img#lastimg {opacity:0.9 !important;margin:0px !important;}
</style>
<script>
$(document).ready(function() {
$('div.footer-r img:last').attr("id","lastimg");
$('div.footer-r img').hover(function() {
$(this).stop().animate({marginRight:"0px",opacity:"0.9"},500);
},function() {
$(this).stop().animate({marginRight:"-70px",opacity:"0.5"},500);
}).attr("style","margin:0px -70px 0px 0px;opacity:0.3;");;
});
</script>
iar unde vor fi banerele:
Cod
<div class="footer-r">
<a href="/" target="_blank"><img src="http://www.filelist-md.tk/banner88x31.gif" alt="Titlul" border="0" width="88" height="31"></a>
<a href="/" target="_blank"><img src="http://www.trafic-site.ro/imagini/promovare-88x31b.gif" alt="Titlul" border="0" width="88" height="31"></a>
<a href="/" target="_blank"><img src="http://fierbinte.ucoz.ro/Prieteni/Lunetistii.gif" alt="Titlul" border="0" width="88" height="31"></a>
<a href="/" target="_blank"><img src="http://emporysmedia.ucoz.ro/BANNER/bannerEM.jpg" alt="Titlul" border="0" width="88" height="31"></a>
</div>
Rezultatul: