Cambiare stile alle immagini al volo in DHTML
Articolo scritto da Luca Ruggiero
Attraverso il DOM di Javascript ed attraverso degli script DHTML possiamo effettuare la gestione stilistica delle immagini in maniera molto semplice e veloce, chiamando in causa via Javascript gli attributi CSS che ci interessano.
Passiamo direttamente alla pratica. Creiamo un'immagine a cui assegnamo un ID, scatenando agli eventi mouseover e mouseout delle funzioni:
<img src="img.gif" id="img" onmouseover="on()" onmouseout="off()">Assegnamo degli stili predefiniti all'immagine:
#img
{
position: Absolute;
top: 100px;
left: 200px;
width: 150px;
height: 150px;
border: Solid 1px #000000;
z-index: 0;
}
Abbiamo posizionato l'immagine, assegnatole delle dimensioni ed un bordo.
Vediamo quindi, attraverso poche righe di codice Javascript cosa possiamo fare:
var immagine = document.getElementById("img").style;
function on()
{
immagine.width = "350";
immagine.height = "350";
immagine.borderColor = "#FF0000";
immagine.borderStyle = "dashed";
immagine.borderWidth = "5px";
}
function off()
{
immagine.width = "150";
immagine.height = "150";
immagine.borderColor = "#000000";
immagine.borderStyle = "solid";
immagine.borderWidth = "1px";
}
Al passaggio del mouse sull'immagine il suo aspetto cambierà, sia nelle dimensioni che nello stile del bordo; all'uscita del mouse dall'area dell'immagine ripristiniamo le stilizzazioni di default.
