Lente di ingrandimento in Dynamic Html

Arretrati lista "Una demo Dhtml a settimana"
di Risorse.net

CONOSCENZE CONSIGLIATE PER QUESTO ARTICOLO: Html, Javascript

COMPATIBILITÀ: Ms Ie
FILES ESTERNI: Nessuno
Visualizza la demo
Scarica la demo

L'esempio di oggi può essere ben applicato a negozi virtuali che necessitino di esporre i propri prodotti all'interno del sito Internet. Il tanto amato e-commerce, deve essere supportato da una disposizione degli elementi tanto semplice ed intuitivo, quanto accattivante.
Il semplice script di oggi funziona esattamente come una lente di ingrandimento. Le immagini infatti, verranno ingrandite al passaggio del mouse (evento onmouseover) e le dimensioni originali vengono ripristinate con l'allontanamento del mouse dalla zona dell'immagine (evento onmouseout).
Il coefficiente di zoom, è pari a 2 (ovvero la foto viene raddoppiata al passaggio del mouse). Questo effetto viene creato semplicemente con:

function lentep() {
document.img1.width=document.img1.width*2
document.img1.height=document.img1.height*2
}

Per ripristinare le impostazioni di default, è necessario aggiungere allo stesso Javascript il codice:

function lentem() {
document.img1.width=document.img1.width/2
document.img1.height=document.img1.height/2
}

Definite le funzioni, è necessario richiamarle tramite gli eventi onmouseover e onmouseout all'interno del tag <a> che racchiude il collegamento fittizio all'immagine.

<a href="#" onMouseOver="lentep()" onMouseOut="lentem()">
<img name="img1" src="foto.jpg" width=120 height=80 border=1>
</a>

Per aumentare il coefficiente di zoom (per es. portarlo a 3x) e' necessario modificare il codice delle due funzioni:

function lentep() {
document.img1.width=document.img1.width*3
document.img1.height=document.img1.height*3
}
function lentem() {
document.img1.width=document.img1.width/3
document.img1.height=document.img1.height/3
}

Le altre parti del sorgente non vanno modificate. L'esempio è compatibile esclusivamente con Ms Ie perché Netscape interpreta gli attributi width e height in sola lettura e non è quindi in grado di modificarli. Comunque, l'effetto non crea in Netscape alcun tipo di errore.

© Risorse.net (www.risorse.net)
pagina in versione stampabile:
http://www.risorse.net /dhtml/teoria/2000/gennaio/21.asp?print=ok