Michele Basso
a- a+

Scroller Tooltip

In un precedente articolo avevamo visto come si possono utilizzare le finestre Tooltip. Oggi invece parleremo di Scrolling Tooltip, ovvero una Tooltip con all'interno un testo scorrevole. Lo script è compatibile con tutti i browser; unica nota per Internet Explorer, in cui per visualizzare le Tooltip dobbiamo aspettare che la pagina si carichi completamente.

Vediamo come utilizzarle.

Per prima cosa copiamo questo codice all'interno del tag body, nella pagina in cui vogliamo inserire i Tooltip:

<script>

/*
Scrolling Tooltip Script- 
© Dynamic Drive (www.dynamicdrive.com)
For full source code, installation instructions,
100's more DHTML scripts, and Terms Of
Use, visit dynamicdrive.com
*/

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+10
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>

<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 associare ad un link il tooltip, dobbiamo aggiungere al tag <a> questo attributo:

onMouseover="showtip2(this,event,'WebMasterPoint.org, il punto di riferimento dei webmaster italiani')" onMouseout="hidetip2()"

La parte in grassetto è il testo che scorrerà nella Tooltip.

Riassumendo, il link verrà come questo:

<a href="http://www.webmasterpoint.org" onMouseover="showtip2(this,event,'WebMasterPoint.org, il punto di riferimento dei webmaster italiani')" onMouseout="hidetip2()">

 

 

 

 



Ti potrebbe interessare anche

commenta la notizia

C'è 1 commento
Graziano
Hai qualche domanda da fare?