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".
 

Onmousedown e onmouseup

Arretrati lista "Una demo Dhtml a settimana"
CONOSCENZE CONSIGLIATE PER QUESTO ARTICOLO: Html, Javascript

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

Dynamic Html, è maggiormente usato per i tipici effetti chiamati rollover, ossia di immagini che vengono sostituite da altre, creando molte volte un effetto spento/acceso.
A volte però, potrebbe esserci la necessità di avere immagini che vengano sostituite non al passaggio del mouse, come solitamente si usa, ma bensì quando vi si clicca sopra.
Potrebbe essere il caso di voler creare dei tasti illudendo l'utente di avere di fronte a sè una tastiera. Ma questo è solo uno dei molteplici casi in cui si potrebbero utilizzare i gestori degli eventi onmousedown e onmouseup.
La demo che andremo a scoprire questa settimana, si compone di un solo file Html dimostrando, di fatto, la sua semplicità.
Ma vediamo di analizzare il codice, osservando il Javascript racchiuso tra <head></head>:

<script language="javascript1.2">
<!--
img1=new Image()
img1.src="up.gif"
img2=new Image()
img2.src="down.gif"
// -->
</script>

Come si può vedere, la facilità di personalizzazione è il punto forte di questo script. In queste righe di codice vengono specificati i file che devono essere caricati in base agli eventi.

Se si volesse estendere lo stesso effetto su più immagini, basterebbe modificare il Javascript precedentemente impostato nella seguente maniera:

<script language="javascript1.2">
<!--
img1=new Image()
img1.src="up.gif"
img2=new Image()
img2.src="down.gif"

img3=new Image()
img3.src="down.gif"
img4=new Image()
img4.src="up.gif"

// -->
</script>

Una volta impostato il Javascript, basta richiamare le funzioni appena descritte, nel corpo del documento:

<a href="http://computer.digiland.it/1957"
onmousedown="document.images['example'].src=img2.src"
onmouseup="document.images['example'].src=img1.src">
<img src="up.gif" name="example" border=0></a>

Se invece avessimo optato per estendere l'effetto su più immagini, ecco come andrebbe impostato il codice al'interno del tag <body>

<a href="http://computer.digiland.it/1957"
onmousedown="document.images['example'].src=img2.src"
onmouseup="document.images['example'].src=img1.src">
<img src="up.gif" name="example" border=0></a>

<a href="http://computer.digiland.it/1957"
onmousedown="document.images['example'].src=img4.src"
onmouseup="document.images['example'].src=img3.src">
<img src="down.gif" name="example" border=0></a>

La demo è stata così portata a termine. Un'ultima considerazione la meritano i gestori
onmousedown
e
onmouseup

che servono rispettivamente a:
Cambiare immagine quando si clicca su di essa
Cambiare un seconda volta l'immagine quando si lascia il tasto del mouse.
 

 
 
Home > dhtml > teoria > 1999 > giugno > ...   © 1999-2018 Risorse.net, tutti i diritti riservati