Michele Basso
a- a+

Scroller Tooltip

In un precedente articolo avevamo visto come sipossono utilizzare le finestre Tooltip. Oggiinvece parleremo di Scrolling Tooltip,ovvero una Tooltip con all'interno un testo scorrevole.Lo script è compatibile con tutti i browser; unicanota per Internet Explorer, in cui per visualizzare leTooltip dobbiamo aspettare che la pagina si carichicompletamente.

Vediamo come utilizzarle.

Per prima cosa copiamo questo codice all'interno del tagbody, nella pagina in cui vogliamo inserirei Tooltip:

<script>/*Scrolling Tooltip Script- © Dynamic Drive (www.dynamicdrive.com)For full source code, installation instructions,100's more DHTML scripts, and Terms OfUse, 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+10document.all.tooltip2.style.pixelTop= event.clientY + document.body.scrollTop+10document.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=0currentscroll=setInterval("scrolltip()" ,100)document.tooltip2.left=e.pageX+10document.tooltip2.top=e.pageY+10document.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-=5elsedocument.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 altag <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="https://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