Livello di difficoltà: |
|
Dynamic Html è una tecnologia approvata dal W3C per la creazione di siti Web dinamici ed interazioni client side con l'utente. In questa sezione sono disponibili centinaia di esempi ed arretrati della mailing list "Una demo Dhtml a settimana".
|
|
Lente di ingrandimento in Dynamic Html
Arretrati lista "Una demo Dhtml a settimana"
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.
|