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