Lo script che presentiamo è simile ad uno analizzato. La differenza principale sta nel fatto che, per ogni link, sarà possibile aggiungere un'immagine all'area descrittiva.
Ogni tooltip può essere personalizzato nei colori e nel testo. Lo script è perfettamente compatibile con Explorer 4.x, Netscape 6.x, Netscape 4.x.
L'esempio si compone di 4 file:
- esempio.htm
- 01.gif
- 02.gif
- 03.gif
Per una più semplice comprensione del presente script fai continuamente riferimento ai file sopracitati, verificando le procedure e i dati espressi. Solo in questo modo, con un continuo confronto, comprenderai le peculiarità di questo Javascript.
Inseriamo questo codice tra gli <head> della pagina:
<script language="javascript" type="text/javascript">
<!--
var dom = (document.getElementById) ? true : false;
var ns5 = ((navigator.userAgent.indexOf("Gecko")>-1) && dom) ? true: false;
var ie5 = ((navigator.userAgent.indexOf("MSIE")>-1) && dom) ? true : false;
var ns4 = (document.layers && !dom) ? true : false;
var ie4 = (document.all && !dom) ? true : false;
var nodyn = (!ns5 && !ns4 && !ie4 && !ie5) ? true : false;
var origwidth, origheight;
if (ns4) {
origwidth = window.innerwidth; origheight = window.innerheight;
window.onresize = function() { if (window.innerwidth != origwidth ||
window.innerheight != origheight) history.go(0); }
}
if (nodyn) { event = "nope" }
var tipFollowMouse= true;
var tipwidth= 120; //larghezza area del tooltip
var offX= 20; // distanza orizzontale dal mouse
var offY= 12; //distanza verticale dal mouse
var tipFontFamily= "Verdana, arial, helvetica, sans-serif";
var tipFontsize= "8pt";
var tipFontColor= "#000000";
var tipBgColor= "#c6c6c6";
var tipborderColor= "#ff0000";
var tipborderwidth= 5;
var tipborderStyle= "ridge";
var tipPadding= 8;
var messages = new Array();
messages[0] = new Array('01.gif','Questo è il logo di Html.it',"#FFFFFF");
messages[1] = new Array('02.gif','Questo è il logo di Gifanimate.it',"#DDECFF");
messages[2] = new Array('03.gif','Questo è il logo di
Cgipoint.it','black','whitè);
if (document.images) {
var theImgs = new Array();
for (var i=0; i<messages.length; i++) {
theImgs[i] = new Image();
theImgs[i].src = messages[i][0];
}
}
var startStr = '<table width="' + tipwidth + '"><tr><td align="center"
width="100%"><img src="';
var midStr = '" border="0"></td></tr><tr><td valign="top">';
var endStr = '</td></tr></table>';
var tooltip, tipcss;
function initTip() {
if (nodyn) return;
tooltip = (ns4)? document.tipDiv.document: (ie4)? document.all['tipDiv']:
(ie5||ns5)? document.getElementById('tipDiv'): null;
tipcss = (ns4)? document.tipDiv: tooltip.style;
if (ie4||ie5||ns5) {
tipcss.width = tipwidth+"px";
tipcss.fontFamily = tipFontFamily;
tipcss.fontsize = tipFontsize;
tipcss.color = tipFontColor;
tipcss.backgroundColor = tipBgColor;
tipcss.borderColor = tipborderColor;
tipcss.borderwidth = tipborderwidth+"px";
tipcss.padding = tipPadding+"px";
tipcss.borderStyle = tipborderStyle;
}
if (tooltip&&tipFollowMouse) {
if (ns4) document.captureEvents(Event.MOUSEMOVE);
document.onmousemove = trackMouse;
}
}
window.onload = initTip;
var t1,t2;
var tipOn = false;
function doTooltip(evt,num) {
if (!tooltip) return;
if (t1) clearTimeout(t1); if (t2) clearTimeout(t2);
tipOn = true;
if (messages[num][2]) var curBgColor = messages[num][2];
else curBgColor = tipBgColor;
if (messages[num][3]) var curFontColor = messages[num][3];
else curFontColor = tipFontColor;
if (ns4) {
var tip = '<table bgcolor="' + tipborderColor + '" width="' + tipwidth +
'" cellspacing="0" cellpadding="' + tipborderwidth + '" border="0"><tr><td><table bgcolor="' + curBgColor + '" width="100%"
cellspacing="0" cellpadding="' + tipPadding + '" border="0"><tr><td>'+ startStr + messages[num][0] + midStr + '<span style="font-family:' +
tipFontFamily + '; font-size:' + tipFontsize + '; color:' + curFontColor + ';">' + messages[num][1] + '</span>' + endStr +
'</td></tr></table></td></tr></table>';
tooltip.write(tip);
tooltip.close();
} else if (ie4||ie5||ns5) {
var tip = startStr + messages[num][0] + midStr + '<span style="font-
family:' + tipFontFamily + '; font-size:' + tipFontsize + '; color:' + curFontColor + ';">' + messages[num][1] + '</span>' + endStr;
tipcss.backgroundColor = curBgColor;
tooltip.innerHTML = tip;
}
if (!tipFollowMouse) positionTip(evt);
else t1=setTimeout("tipcss.visibility='visiblè",100);
}
var mouseX, mouseY;
function trackMouse(evt) {
mouseX = (ns4||ns5)? evt.pageX: window.event.clientX +
document.body.scrollLeft;
mouseY = (ns4||ns5)? evt.pageY: window.event.clientY +
document.body.scrollTop;
if (tipOn) positionTip(evt);
}
function positionTip(evt) {
if (!tipFollowMouse) {
mouseX = (ns4||ns5)? evt.pageX: window.event.clientX +
document.body.scrollLeft;
mouseY = (ns4||ns5)? evt.pageY: window.event.clientY +
document.body.scrollTop;
}
var tpWd = (ns4)? tooltip.width: (ie4||ie5)? tooltip.clientwidth:
tooltip.offsetwidth;
var tpHt = (ns4)? tooltip.height: (ie4||ie5)? tooltip.clientheight:
tooltip.offsetheight;
var winWd = (ns4||ns5)? window.innerwidth-20+window.pageXOffset:
document.body.clientwidth+document.body.scrollLeft;
var winHt = (ns4||ns5)? window.innerheight-20+window.pageYOffset:
document.body.clientheight+document.body.scrollTop;
if ((mouseX+offX+tpWd)>winWd)
tipcss.left = (ns4)? mouseX-(tpWd+offX): mouseX-(tpWd+offX)+"px";
else tipcss.left = (ns4)? mouseX+offX: mouseX+offX+"px";
if ((mouseY+offY+tpHt)>winHt)
tipcss.top = (ns4)? winHt-(tpHt+offY): winHt-(tpHt+offY)+"px";
else tipcss.top = (ns4)? mouseY+offY: mouseY+offY+"px";
if (!tipFollowMouse) t1=setTimeout("tipcss.visibility='visiblè",100);
}
function hideTip() {
if (!tooltip) return;
t2=setTimeout("tipcss.visibility='hidden'",100);
tipOn = false;
}
//-->
</script>
Vediamo cosa personalizzare:
var tipFollowMouse= true;
Se la variabile è impostata su "true" il tooltip si muoverà seguendo il mouse sopra il link. Viceversa impostiamo "false" se vogliamo tenere il tooltip bloccato.
var tipwidth= 120;
è la larghezza dell'area del tooltip
var offX= 20;
è la distanza orizzontale del tooltip dal mouse
var offY= 12;
è la distanza verticale del tooltip dal mouse
var tipFontFamily= "Verdana, arial, helvetica, sans-serif";
è il tipo di font utilizzato nell'area del tooltip
var tipFontsize= "8pt";
è la grandezza del testo
var tipFontColor= "#000000";
è il colore del testo nell'area del tooltip (vedremo in seguito come impostarlo in altro modo)
var tipBgColor= "#c6c6c6";
è il colore di sfondo del tooltip
var tipborderColor= "#ff0000";
il colore del bordo del tooltip
var tipborderwidth= 5;
lo spessore del bordo (in pixel)
var tipborderStyle= "ridge";
è lo stile del bordo del tooltip. può essere sostituito , ad esempio, con "solid" o "dashed"
var tipPadding= 8;
la distanza dell'immagine dal bordo del tooltip
Adesso dobbiamo impostare gli array che conterranno le immagini ed il testo dei link. Ricordo sempre che gli array seguono una numerazione progressiva partendo da zero.
messages[0] = new Array('01.gif','Questo è il logo di Html.it',"#FFFFFF");
messages[1] = new Array('02.gif','Questo è il logo di Gifanimate.it',"#DDECFF");
messages[2] = new Array('03.gif','Questo è il logo di Cgipoint.it','black','whitè);
Il primo parametro è il nome dell'immagine. Il secondo parametro è il testo all'interno del tooltip. Gli altri parametri (opzionali) sono, rispettivamente, il colore di sfondo ed il colore del testo all'interno dell'area. Se omessi questi valori verranno considerati quelli inseriti per default precedentemente.
Nel <body>, a questo punto, inseriamo i link che saranno così strutturati
<a href="#" onmouseover="doTooltip(event,0)" onmouseout="hideTip()">Link 1</a>
<a href="#" onmouseover="doTooltip(event,1)" onmouseout="hideTip()">Link 2</a>
<a href="#" onmouseover="doTooltip(event,2)" onmouseout="hideTip()">Link 3</a>
Come vedete l'unica cosa da cambiare è il numero tra le parentesi tonde. Il numero inserito corrisponde al relativo array creato poco fa. Al link 2, ad esempio, è associato l'array numero 2 e così via. Il link, ovviamente, può anche essere un'immagine e non solo del testo.
L'ultima cosa da fare, molto importante, è inserire questa stringa subito sopra il tag </body>:
<div id="tipDiv" style="position:absolute; visibility:hidden; z-index:100"></div>
Altre modifiche non sono necessarie.
