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".
|
| |
Alternate text con scrolling
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
L'alternate text, o testo alternativo (l'attributo alt del tag <img> per
intenderci) è molto utilizzato per associare una descrizione a delle
immagini. Il loro uso può migliorare il ranking
(per approfondire www.risorse.net/motori) del ns. sito e facilita la navigazione degli utenti durante l'attesa per il caricamento della pagina.
Essi però non vengono utilizzati nei normali link testuali (attributo title
del tag <a>) anche perche Netscape ignora tale specifica.
La potenza di Dynamic Html ci viene in aiuto ed oltre a rendere crossbrowser
l'effetto, anima il testo in modo da renderlo scorrevole.
Ecco la sintassi da utilizzare:
<script>
if (!document.layers&&!document.all)
event="test"
function showtip2(current,e,text){
if (document.all&&document.readyState=="complete"){
document.all.tooltip2.innerHTML='<marquee style="border:1px solid
black">'+text+'</marquee>'
document.all.tooltip2.style.pixelLeft=event.clientX+document.body.scrollLeft
+10
document.all.tooltip2.style.pixelTop=event.clientY+document.body.scrollTop+1
0
document.all.tooltip2.style.visibility="visible"
}
else if (document.layers){
document.tooltip2.document.nstip.document.write('<b>'+text+'</b>')
document.tooltip2.document.nstip.document.close()
document.tooltip2.document.nstip.left=0
currentscroll=setInterval("scrolltip()",100)
document.tooltip2.left=e.pageX+10
document.tooltip2.top=e.pageY+10
document.tooltip2.visibility="show"
}
}
function hidetip2(){
if (document.all)
document.all.tooltip2.style.visibility="hidden"
else if (document.layers){
clearInterval(currentscroll)
document.tooltip2.visibility="hidden"
}
}
function scrolltip(){
if
(document.tooltip2.document.nstip.left>=-document.tooltip2.document.nstip.document.width)
document.tooltip2.document.nstip.left-=5
else
document.tooltip2.document.nstip.left=150
}
</script>
In questo script vengono definite alcune importanti caratteristiche:
la posizione del testo rispetto al mouse visibilità o invisibilità del testo a secondo degli eventi onmouseover e onmouseout.
Creato il motore dell'esempio, è necessario inserire un layer che conterrà il testo scorrevole.
<div id="tooltip2" style="position:absolute;visibility:hidden;clip:rect(0
150 50 0);width:150px;background-color:lightyellow">
<layer name="nstip" width=1000px bgColor="lightyellow"></layer>
</div>
Per concludere, inseriamo il link con la descrizione che apparirà scorrendo
onmouseover.
<A HREF="http://www.risorse.net" onMouseover="showtip2(this,event,'Risorse.net gratuite per il Web master')" onMouseout="hidetip2()">http://www.risorse.net</A>
|
