- Home Page
- > Script DHTML
- > Script DHTML Links
- > Link with tooltip
Link with tooltip
Link with explanatory text shown when you move the mouse over.
<HTML><HEAD><TITLE>TOOLTIP</TITLE>
<STYLE type=text/css>
.tooltip {
BORDER-RIGHT: #000000 1px solid; PADDING-RIGHT: 8px; BORDER-TOP: #000000 1px
solid; PADDING-LEFT: 8px; FONT-SIZE: 8pt; VISIBILITY: hidden; PADDING-BOTTOM:
0px; MARGIN: 0px; BORDER-LEFT: #000000 1px solid; PADDING-TOP: 0px; BORDER-BOTTOM:
#000000 1px solid; FONT-FAMILY: sans-serif; POSITION: absolute; BACKGROUND-COLOR:
#ffffcc; layer-background-color: #ffffcc
}
</STYLE>
<SCRIPT language=JavaScript>
var mouseX = 0;
var mouseY = 0;
if (document.layers)
document.captureEvents(Event.MOUSEMOVE);
document.onmousemove = getCursor;
function getCursor(e) {
if (document.layers) {
mouseX = e.pageX;
mouseY = e.pageY;
}
if (document.all) {
mouseX = event.clientX + document.body.scrollLeft;
mouseY = event.clientY + document.body.scrollTop;
}
return true;
}
function showToolTip(name) {
var tip = getHandle(name);
if (tip.timerID)
clearTimeout(tip.timerID);
tip.left = mouseX;
tip.top = mouseY + 20;
if (document.layers)
tip.visibility = "show";
if (document.all)
tip.visibility = "visible";
tip.timerID = setTimeout("hideToolTip('" + name + "')", 3000);
}
function hideToolTip(name) {
var tip = getHandle(name);
if (tip.timerID)
clearTimeout(tip.timerID);
if (document.layers)
tip.visibility = "hide";
if (document.all)
tip.visibility = "hidden";
}
function getHandle(name) {
if (document.layers)
return(document.layers[name]);
if (document.all) {
var block = eval('document.all.' + name + '.style');
return(block);
}
}
</SCRIPT>
</HEAD>
<BODY onmousemove=getCursor()>
<DIV class=tooltip id=link1 style="WIDTH: 260px">Questo è il
testo esplicativo del primo link</DIV>
<DIV class=tooltip id=link2 style="WIDTH: 240px">Questo è il
testo esplicativo del primo link</DIV>
<A onmouseover="showToolTip('link1')"
onmouseout="hideToolTip('link1')" href="#">LINK1</A> | <A
onmouseover="showToolTip('link2')"
onmouseout="hideToolTip('link2')" href="#">LINK2</A></BODY></HTML>
A colpo d'occhio
Be Responsive
HTML 5
HTML 5 è un linguaggio di markup utilizzato per la strutturazione e il contenuto delle pagine Web.
CSS 3
CSS 3 è l'ultima evoluzione dei fogli di stile CSS. Contiene molte novità come angoli arrotondati, ombre, sfumature, transizioni o animazioni.
jQuery
jQuery è una libreria JavaScript cross-platform progettata per semplificare lo scripting lato client.
