Forum dei Forum: Aiuto per Forumattivo
Benvenuto sul forum di supporto di Forumattivo .



Per trarre il massimo vantaggio da tutti i servizi offerti dal nostro forum, effettua il login se sei già un nostro utente oppure registrati per far parte della nostra grande comunità. Il tutto gratuitamente!

Crea anche tu un forum gratuitamente come questo! Clicca qui

Ingrandire immagini al passaggio del mouse


Astuzia Ingrandire immagini al passaggio del mouse

Messaggio Da the crow il Sab 26 Nov 2011, 19:17

Ingrandire immagini al passaggio del mouse
I codici sono presi dalla rete io li ho solo divisi per gestirli meglio..se potete lasciate la fonte

>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 (Ragione : Eliminate immagini non funzionanti)
avatar
the crow
Veterano dello staff

Sesso : Maschile
Età : 25
Messaggi : 8797
Località : Roma


Vedere il profilo dell'utente http://aiuto.forumattivo.it/forum
the crow è stato ringraziato dall'autore di questo topic.

Astuzia Spartano

Messaggio Da the crow il Sab 26 Nov 2011, 19:26

Ingrandire immagini al passaggio del mouse
>Dove inserirlo : Dove volete (inserite solo le immagini )

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 (Ragione : Eliminate immagini non funzionanti)
avatar
the crow
Veterano dello staff

Sesso : Maschile
Età : 25
Messaggi : 8797
Località : Roma


Vedere il profilo dell'utente http://aiuto.forumattivo.it/forum
the crow è stato ringraziato dall'autore di questo topic.

Vedere l'argomento precedente Vedere l'argomento seguente Tornare in alto

- Argomenti simili

 
Permesso di questo forum:
Non puoi rispondere agli argomenti in questo forum