CSS Popup Image Viewer

CSS Popup Image Viewer

« Older topic | Newer topic »

Track this topic | Email this topic | Print this topic

~»Revolution«~

Posted on 15/4/2009, 08:56

Group: Informatica Staff
Posts: 1222
Location: I-T-A-L-I-A

Status: Utente anonimo

ecco il modo per utilizare il thumbnail staff funziona anche x l'effetto ke c'e un immagine piccola e ke quando passi con il mouse si allarga :

INserire il seguente codice in cima al forum:

HTML

<style type="text/css">

/*Credits: Dynamic Drive CSS Library */
/*URL: http://www.dynamicdrive.com/style/ */

.thumbnail{
position: relative;
z-index: 0;
}

.thumbnail:hover{
background-color: transparent;
z-index: 9;
}

.thumbnail span{ /*CSS for enlarged image*/
position: absolute;
background-color: lightyellow;
padding: 5px;
left: -1000px;
border: 1px dashed gray;
visibility: hidden;
color: black;
text-decoration: none;
}

.thumbnail span img{ /*CSS for enlarged image*/
border-width: 0;
padding: 2px;
}

.thumbnail:hover span{ /*CSS for enlarged image on hover*/
visibility: visible;
top: 0;
left: 60px; /*position where enlarged image should offset horizontally */

}

</style>

Inserire questo codice per far apparire le immagini desiderate, e la scritta desiderata:

CODICE

<a class="thumbnail" href="INDIRIZZO ACCOUNT"><img src="IMMAGINE PICCOLA (quella che si vede senza passarci con il mouse) " width="45px" height="90px" border="0"> <img src="IMMAGINE GRANDE (quella che si apre al apssaggio del mouse)" border="0" alt="Image and video hosting by TinyPic"> NICK GRUPPO</a>

Tags: CSS Popup Image Viewer, thumbnail staff

0 replies since 15/4/2009, 08:56

Track this topic | Email this topic | Print this topic