REDAZIONE

In questo articolo vi mostriamo un metodo per migliorare l'aspetto grafico del blog, come sostituire un'immagine quando si posizione il puntatore sopra di essa. Questa tecnica è chiamata rollover e potete utilizzarla per distinguere le immagini che hanno un collegamento ad un articolo, nei menu formati da immagini oppure per semplici scherzi divertenti, come questo.

Lo script da utilizzare è molto semplice. La base è la stessa che si utilizza per inserire una immagine con link in un post o nelle barre laterali di navigazione.

HTML

 <a href=”http://pagina_da_aprire.it”><img src="http://immagine1.jpg"></a>     

A questa riga di codice aggiungiamo alcuni parametri.

HTML

 <a href=”http://pagina_da_aprire.it”><img src="http:// immagine1.jpg" 
 onmouseover='this.src = "http:// immagine2.jpg";' 
 onmouseout="this.src='http:// immagine1.jpg';"></a>     

Dove:

• a è il tag utilizzato per la creazione dei link;
• href=”http://pagina_da_aprire.it” contiene, all'interno delle virgolette, l’indirizzo della pagina che si apre cliccando sopra l’immagine;
• img è il tag utilizzato per la creazione delle immagini;
• src="http:// immagine1.jpg" contiene, all'interno delle virgolette, l’indirizzo della prima immagine da visualizzare;
• onmouseover='this.src = "http:// immagine2.jpg";' contiene, all’interno delle virgolette, l’indirizzo dell’immagine che si vuole mostrare al passaggio del mouse;
• onmouseout='this.src = "http:// immagine1.jpg";' contiene, all’interno delle virgolette, l’indirizzo della prima immagine che si era voluto mostrare.

Questo è il metodo più semplice per creare un effetto rollover anche se esistono script che possono adattare meglio e rendere più flessibile l’effetto all’interno di un contesto.

In alcuni siti, specialmente in quelli di poesia, i paragrafi iniziano sempre con una lettera a cui è associato uno stile diverso dalle altre. Un paragrafo in HTML è compreso tra i tag <p> e </p>.
Oltre a migliorare l’effetto grafico, questa decorazione diventa utile nella lettura per non sbagliare riga in testi molto lunghi.

Entrate nella sezione “Presentazione > Opzioni avanzate” e cliccate sul link “Modifica modello” del Foglio di stile. Nella colonna destra incollate le seguenti righe.

CSS

    #center p:first-letter{
    font-size:200%;
    font-weight: bold;
    }    

Il codice CSS che abbiamo scritto sopra è solo un punto di inizio da cui partire per dare l’effetto che più desiderate. Potete cambiare il colore, aggiungere dei bordi, etc. Ad esempio:

CSS

    #center p:first-letter { 
    border-style: outset;
    border-width: 2px;
    padding: 2px;
    font-weight: bold;
    font-size: 200%;
    background-color: yellow;
    }