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:
à à
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:
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:
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!
Pacman
Nostradamus
Magical Cat Adventure
Snake