Puntatore modello radar sul documento

Arretrati lista "Una demo Dhtml a settimana"
di Risorse.net

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.

© Risorse.net (www.risorse.net)
pagina in versione stampabile:
http://www.risorse.net /dhtml/teoria/2000/settembre/51.asp?print=ok