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
Comunicati stampa
Proposte di viaggio
Prenotazione hotel
Prenota vacanze
Accessori palmari
Cerca alberghi
Guide turistiche

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

Puntatore modello radar sul documento

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

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

Il puntatore del mouse è un elemento che ha attirato, attira e continua ad attirare i Web developers di tutte le nazionalità. Che esso sia cambiato, seguito da un'immagine o da un testo, non fa differenza, quello che importa, in fin dei conti, è modificarlo, vivacizzarlo, in modo da attirare l'attenzione del visitatore. Già all'interno di questa stessa mailing list abbiamo seguito due esempi ad hoc: "Effetto sul puntatore del mouse" (www.risorse.net/dhtml/teoria/1999/luglio/11.asp) e "Testo che segue il mouse" (www.risorse.net/dhtml/teoria/2000/aprile/34.asp). Anche all'interno del sito Risorse.net, abbiamo visto come modificare il cursorse con una qualsiasi immagine, grazie all'utilizzo di appositi plug in: www.risorse.net/gratis categoria "Cursori per pagine Web".
Oggi ritorniamo ancora una volta sull'affascinante argomento di come vivacizzare il puntatore del mouse. Sfrutteremo naturalmente la tecnologia Dhtml con poche righe di codice ed un risultato di sicuro effetto, soprattutto per Web sites che trattino argomenti ludici.
Esaminiamo quindi la sintassi da inserire nell'<HEAD> della pagina:

<style type="text/css">
<!--
#leftright, #topdown{
position:absolute;
left:0;
top:0;
width:1px;
height:1px;
layer-background-color:black;
background-color:black;
z-index:100;
font-size:1px;
}
--> </style>


Questo foglio di stile (se non sapessi cosa sia, visita la Guida ai Css: www.risorse.net/css) indica la posizione delle due linee rispetto al mouse. Nel <BODY> va invece inserito il codice per il funzionamento dell'esempio:

<div id="leftright" style="width:expression(document.body.clientWidth-2)"></div>
<div id="topdown" style="height:expression(document.body.clientHeight-2)"> </div>
<script language="JavaScript1.2"> <!--

if (document.all&&!window.print){
leftright.style.width=document.body.clientWidth-2
topdown.style.height=document.body.clientHeight-2
}
else if (document.layers){
document.leftright.clip.width=window.innerWidth
document.leftright.clip.height=1
document.topdown.clip.width=1
document.topdown.clip.height=window.innerHeight
}

function followmouse1(){
// move cross engine for IE 4+
leftright.style.pixelTop=document.body.scrollTop+event.clientY+1
topdown.style.pixelTop=document.body.scrollTop
if (event.clientX topdown.style.pixelLeft=document.body.scrollLeft+event.clientX+1
else
topdown.style.pixelLeft=document.body.clientWidth-2
}

function followmouse2(e){
// move cross engine for NS 4+
document.leftright.top=e.y+1
document.topdown.top=pageYOffset
document.topdown.left=e.x+1
}

if (document.all)
document.onmousemove=followmouse1
else if (document.layers){
window.captureEvents(Event.MOUSEMOVE)
window.onmousemove=followmouse2
}

function regenerate(){
window.location.reload()
}
function regenerate2(){
setTimeout("window.onresize=regenerate",400)
}
if ((document.all&&!window.print)||document.layers)
// if the user is using IE 4 or NS 4, both NOT IE 5+
window.onload=regenerate2

// -->
</script>


Per il corretto svolgimento dello script, il codice ora riportato non va modificato in nessuna parte.

N.B.: Non hai capito alcuni termini che sono stati utilizzati all'interno di questa e-mail? Risorse.net sta preparando un glossario per spiegare le parole dedicate al Web publishing ed alla rete in generale. Per visitarlo, clicca su www.risorse.net/glossario.
 

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