Risorse per webmaster

L A   C O M U N I T À   V I R T U A L E   I T A L I A N A   P E R   W E B   M A S T E R S

 
 
      Tecnologie
      HTML
      CSS
      DHTML
      FLASH
      ASP
      PHP
      JSP
      PERL
      XML
      SMIL
      WIRELESS
      PALMARI
      APACHE
      MYSQL
      PICOSQL
 
      Grafica
 
      Servizi
 
      Raccolte
 
      Recensioni
 
      Analisi
 
      Disclaimer

   Per tutti
 
  .: Magazine
  .: Editor
  .: Appunti
  .: Gratis
  .: Scripts
  .: Components
 
   Home page

Partner
Magazine di tecnologie
Magazine di viaggio e turismo
Magazine di musica e spettacoli
Negozio di Informatica
Basilicata turismo
Food e territori
Agenzia di comunicazione turistica e Digital PR

versione stampabile Mostra una versione adatta per la stampa  

Livello di difficoltà:Livello di difficoltà: medio  
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.
 

 
 
Home > dhtml > teoria > 2000 > gennaio > ...   © 1999-2024 Risorse.net, tutti i diritti riservati