Effetto hover sulle miniature
Inviato: 14/08/2010, 14:27
Descrizione
Script basato su MooTools che aggiunge un particolare effetto animato quando si passa con il mouse sulla miniatura di un'immagine.
(per vedere l'effetto andare QUI! <--Sito esterno)
Prima di tutto scaricare questo archivio e inserire nella root del forum: Attenzione: il css e settato per inserire la miniuatura all'interdo di un testo, quindi la miniatura se è presente un qualsiasi testo, si posizionerà a sinistra, mentre il testo a destra.
poi iserite il BBcode..
BBcode:
Trasforma in HTML
Aiuto in linea
Script basato su MooTools che aggiunge un particolare effetto animato quando si passa con il mouse sulla miniatura di un'immagine.
(per vedere l'effetto andare QUI! <--Sito esterno)
Prima di tutto scaricare questo archivio e inserire nella root del forum: Attenzione: il css e settato per inserire la miniuatura all'interdo di un testo, quindi la miniatura se è presente un qualsiasi testo, si posizionerà a sinistra, mentre il testo a destra.
poi iserite il BBcode..
BBcode:
Codice: Seleziona tutto
[hoverimg={URL}]{TEXT}[/hoverimg]Codice: Seleziona tutto
<script type="text/javascript" src="js/mootools-yui-compressed.js"></script>
<link rel="stylesheet" href="css/1.css" />
<div class="container">
<div class='thumb'>
<div class='someContent'>
<div class='content'>{TEXT}</div>
<div class='more'><a href="{URL}" target="_blank">Vedi »</a></div>
</div>
<div class='divLeft' style='left:0px'>
<div class='divLeftImage' style='background:url({URL});'></div>
<div class='divLeftShadow'></div>
</div>
<div class='divRight' style='left:0px;background-image:url({URL});'></div>
<img class="thumbnail-shadow" alt="bottom" src="images/thumbnail-shadow.png"/>
</div>
<script type="text/javascript">
window.addEvent('domready',function(){
$$('div.thumb').each(function(div){
div.getElement('div.someContent').set('tween', {duration:'700'});
div.getElement('div.divLeft').set('tween', {duration: '450'});
div.getElement('div.divRight').set('tween', {duration: '450'});
div.addEvent('mouseenter',function(e){
this.getElement('div.divLeft').tween('left','-70px')
this.getElement('div.divRight').tween('left','80px')
this.getElement('div.someContent').tween("background-position", "-20px 0px");
})
div.addEvent('mouseleave',function(e){
this.getElement('div.divLeft').tween('left','0px')
this.getElement('div.divRight').tween('left','0px')
this.getElement('div.someContent').tween("background-position", "0px -167px");
})
})
})
</script>Codice: Seleziona tutto
[hoverimg=URL Immagine]Testo[/hoverimg] - Passandoci sopra l'immagine si apre e fa visualizzare il testo.