Tutorial Javascript: creare una thumbnail con effetto rollover

Iniziamo il lunedì con un bel mix di Javascript e Css pulito e ordinato per creare un semplice ma efficace effetto rollover su una thumbnail, per ora senza l’ausilio di alcun elaborato plugin: prossimamente vedremo come integrare la gallery Thickbox e l’effetto Accordion per arricchire e movimentare il layout. Approfitteremo inoltre per capire come centrare perfettamente nella pagina il contenuto che abbiamo realizzato. Creiamo una cartella e al suo interno un file Index.html; apriamo quest’ultimo con nostro editor preferito. All’interno del tag <head> inseriamo il seguente Css, commentato per istruire sul funzionamento di alcuni comandi:

Thumbnail Rollover

<style type="text/css">

html,body{

background-color: #fefefe;

height: 100%;

width: 100%;

margin: 0;

overflow: hidden;

}

div#container{

margin:0px auto;

text-align:center;

background-color:#fefefe;

}

/*Il valore negativo di margin-top e margin-left corrisponde rispettivamente alla metà
dell'altezza (height) e larghezza (width); poi top e left al 50%, position:absolute
e il <div> content sarà centrato verticalmente; margin:0 auto centra il div orizzontalmente; */

#content{

position: absolute;

margin:0 auto;

width:960px;

height:294px;

top: 50%;

left: 50%;

margin-top: -147px;

margin-left: -480px;

background-color:#fefefe;

}

#footer{

position:absolute;

bottom:0;

}

/*Elimino gli stili della lista (asterischi, numeri, bullets) */

ul{

list-style: none;

margin: 0;

padding: 0;

padding-bottom: 9px;

}

/*Settiamo la disposizione della lista in orizzontale*/

li {

display: inline;

margin:0px auto;

padding:10px;

}

</style>

Apriamo Photoshop e la seguente immagine di esempio:

Con lo strumento Selezione, isoliamo le 4 immagini in altrettanti nuovi file rifiniti perfettamente ai lati:

Salviamo all’interno di una cartella nominata images le 4 immagini con nomi che vanno dall’1 al 4, formato jpg. Apriamo il file 1.jpg, sblocchiamo il livello (doppio click sulla miniatura del livello e Ok), e abbassiamo l’Opacità al 50%.

Salviamo l’immagine col nome 1_over. Ripetiamo adesso la medesima operazione con l’Opacità sulle restanti 3 immagini (salvando il risultato e aggiungendo al nome _over).

Torniamo con l’editor sul nostro Index, e inseriamo all’interno del tag <body> il seguente Html:

<div id="container">

<div id="content">

</div>

</div>

Ora nel all’interno del <div content> potremo inserire la lista con le immagini e il relativo Javascript per avviare il Rollover. Vediamo il codice per intero:

 <div id="container">

<div id="content">

<ul>

<li>

<a href="#"><img alt="1" src="images/1.jpg" onmouseover="this.src='images/1_over.jpg';" onmouseout="this.src='images/1.jpg';"/></a></li>

<li>

<a href="#"><img alt="2" src="images/2.jpg" onmouseover="this.src='images/2_over.jpg';" onmouseout="this.src='images/2.jpg';"/></a></li>

<li>

<a href="#"><img alt="3" src="images/3.jpg" onmouseover="this.src='images/3_over.jpg';" onmouseout="this.src='images/3.jpg';"/></a></li>

<li>

<a href="#"><img alt="4" src="images/4.jpg" onmouseover="this.src='images/4_over.jpg';" onmouseout="this.src='images/4.jpg';"/></a></li>

</ul>

</div>

</div>

Semplicissimo ed elegante. Per ora naturalmente il tag <a> non linka da nessuna parte: vedremo presto come collegarlo alla gallery Thickbox. In download, l’intero tutorial fornito di immagini. Alla prossima!

Scritto da Magoo

Magoo

Web Developer & Mobile Developer, Game Lover insomma un Nerd.
Co-founder Iwebdesigner.it, Nerdzhouse SRL.
Prendo a schiaffi la tastiera fino a quando non succede qualcosa di buono.

COMMENTA

Loading Disqus Comments ...
Loading Facebook Comments ...

Un Commento

Lascia una risposta
  1. Cool blog! Is your theme custom made or did you
    download it from somewhere? A theme like yours with a few simple tweeks would
    really make my blog stand out. Please let me know where you got your design.
    Appreciate it

Lascia un commento

Il tuo indirizzo email non sarà pubblicato. I campi obbligatori sono contrassegnati *