IndiceIngrandire immagini al passaggio del mouse
Ingrandire immagini al passaggio del mouse
Da the crow Sab 26 Nov 2011 - 19:17
Ingrandire immagini al passaggio del mouse |
>Dove inserirlo:Pannello > Visualizzazione > Immagini & colori > Colori > foglio di stile CSS
- Codice css:
- Codice:
/* http://www.dynamicdrive.com */
/* Se le immagini non sono il collegamento ad altre pagine lasciare i collegamenti come href="#nogo"> */
.ienlarger {
float: left;
clear: none; /* set to left or right if needed */
padding-bottom: 5px; /* space between thumbs. Don't change this to margin */
padding-right: 5px; /* space between thumbs and wrapping text when there is any text around it */
}
.ienlarger a {
display:block;
text-decoration: none;
/* add cursor:default; to this rule to disable the hand cursor */
}
.ienlarger a:hover{ /* don't move this positioning to normal state */
position:relative;
}
.ienlarger span img {
border: 1px solid #FFFFFF; /* adds a border around the image */
margin-bottom: 8px; /* pushes the text down from the image */
}
.ienlarger a span { /* this is for the large image and the caption */
position: absolute;
display:none;
color: #FFCC00; /* caption text colour */
text-decoration: none;
font-family: Arial, Helvetica, sans-serif;
font-size: 13px; /* caption text size */
background-color: #000000;
font-weight: bold;
padding-top: 10px;
padding-right: 10px;
padding-bottom: 13px;
padding-left: 10px;
}
.ienlarger img { /* leave or IE puts a border around links */
border-width: 0;
}
.ienlarger a:hover span {
display:block;
top: 50px; /* means the pop-up's top is 50px away from thumb's top */
left: 90px; /* means the pop-up's left is 90px far from the thumb's left */
z-index: 100;
/* Se si desidera che il pop-up aperta sopra il pollice, rimuovere il top: 50px; e aggiungere
bottom: 50px; Questo significherebbe in fondo alla finestra pop-up è 50px lontano dalla parte inferiore del pollice * /
/ * Add cursor: default; a questa regola per disabilitare il cursore mano solo per l'immagine grande*/
}
.resize_thumb {
width: 150px; /* enter desired thumb width here */
height : auto;
}
>Dove inserirlo : Dove volete (sostituire solo le immagini
- Codice html:
- Codice:
<div class="ienlarger"><a href="http://www.dynamicdrive.com/"><img src="http://img406.imageshack.us/img406/4920/63734582.jpg" alt="thumb" class="resize_thumb" /><span>
<img src="http://img406.imageshack.us/img406/4920/63734582.jpg" alt="large" /><br />
Some text can go here.</span></a></div>
<div class="ienlarger"><a href="http://www.google.co.uk/"><img src="http://img257.imageshack.us/img257/1926/92628379.jpg" alt="thumb" class="resize_thumb" /><span>
<img src="http://img257.imageshack.us/img257/1926/92628379.jpg" alt="large" /><br />
Some text can go here.</span></a></div>
<div class="ienlarger"><a href="http://www.facebook.com/"><img src="http://img442.imageshack.us/img442/6325/87011940.jpg" alt="thumb" class="resize_thumb" /><span>
<img src="http://img442.imageshack.us/img442/6325/87011940.jpg" alt="large" /><br />
Some text can go here.</span></a></div>
<div class="ienlarger"><a href="#nogo"><img src="http://img691.imageshack.us/img691/7360/89815502.jpg" alt="thumb" class="resize_thumb" /><span>
<img src="http://img691.imageshack.us/img691/7360/89815502.jpg" alt="large" /><br />
Some text can go here.</span></a></div>
<br style="clear:left" />
fonte
| Per domande o chiarimenti Gestire l'aspetto del forum |
Tutoriale tradotto da :The crow
Copyrigth © FORUMATTIVO.COM
Ultima modifica di VIRTUALDEEJAY il Dom 15 Feb 2015 - 20:53 - modificato 1 volta. (Motivazione : Eliminate immagini non funzionanti)
the crow- Veterano dello staff
- Sesso :
Età : 33
Messaggi : 8782
Località : Roma -
Spartano
Da the crow Sab 26 Nov 2011 - 19:26
Ingrandire immagini al passaggio del mouse |
- Codice html:
- Codice:
<img src="URL IMMAGINE PICCOLA N1" onmouseover='this.src = "URL IMMAGINE GRANDE";' onmouseout="this.src='URL IMMAGINE PICCOLA N1';">
>Puoi trovare un'altro modo QUI
| Per domande o chiarimenti Gestire l'aspetto del forum |
Tutoriale di :The crow
Copyrigth © FORUMATTIVO.COM
Ultima modifica di VIRTUALDEEJAY il Dom 15 Feb 2015 - 20:54 - modificato 1 volta. (Motivazione : Eliminate immagini non funzionanti)
the crow- Veterano dello staff
- Sesso :
Età : 33
Messaggi : 8782
Località : Roma -
Argomenti simili» Ingrandire le immagini al passaggio del mouse
» Help me, immagini che si ingrandiscono al passaggio del mouse
» Applicare una descrizione al passaggio del mouse
» Profili illuminati al passaggio del mouse
» Targhetta con descrizione al passaggio del mouse??
» Help me, immagini che si ingrandiscono al passaggio del mouse
» Applicare una descrizione al passaggio del mouse
» Profili illuminati al passaggio del mouse
» Targhetta con descrizione al passaggio del mouse??
Pagina 1 di 1
Permessi in questa sezione del forum:
Non puoi rispondere agli argomenti in questo forum.
Facebook
Twitter
Youtube
