Help
Testo descrittivo del link al passaggio del mouse.
¤ Clicca qui per visualizzare la demo... ¤
<html>
<head><title>Tooltip</title></head>
<script>
var nn = (document.layers) ? 1 : 0;
var ie = (document.all) ? 1 : 0;
var coord_x = 0;
var coord_y = 0;
var auto_close = null;
var inizio_hint = '';
var fine_hint = '';
var supporto = '<table border="0" cellpadding="0" cellspacing="0"><tr><td></td></tr></table>';
if (ie)
{
document.write('<span id="hint_txt" style="position: absolute; top: 0; left: 0; visibility: hidden; z-index: 99"></span>');
}
if (nn)
{
document.write('<layer id="hint_txt" top="0" left="0" visibility="hide" zindex="99"></layer>');
}
inizio_hint += '<table border="0" cellpadding="0" cellspacing="0">';
inizio_hint += '<tr>';
inizio_hint += '<td bgcolor="#E0E0E0" width="1" height="1" nowrap>' + supporto + '</td>';
inizio_hint += '<td bgcolor="#E0E0E0" height="1" nowrap>' + supporto + '</td>';
inizio_hint += '<td bgcolor="#E0E0E0" height="1" nowrap>' + supporto + '</td>';
inizio_hint += '<td bgcolor="#E0E0E0" height="1" nowrap>' + supporto + '</td>';
inizio_hint += '<td bgcolor="#000000" width="1" height="1" nowrap>' + supporto + '</td>';
inizio_hint += '</tr>';
inizio_hint += '<tr>';
inizio_hint += '<td bgcolor="#E0E0E0" width="1" nowrap>' + supporto + '</td>';
inizio_hint += '<td bgcolor="#FFFFE6" width="5" height="3" nowrap>' + supporto + '</td>';
inizio_hint += '<td bgcolor="#FFFFE6" height="3" nowrap>' + supporto + '</td>';
inizio_hint += '<td bgcolor="#FFFFE6" width="5" height="3" nowrap>' + supporto + '</td>';
inizio_hint += '<td bgcolor="#000000" width="1" nowrap>' + supporto + '</td>';
inizio_hint += '</tr>';
inizio_hint += '<tr>';
inizio_hint += '<td bgcolor="#E0E0E0" width="1" nowrap>' + supporto + '</td>';
inizio_hint += '<td bgcolor="#FFFFE6" width="5" nowrap>' + supporto + '</td>';
inizio_hint += '<td bgcolor="#FFFFE6" height="13"><font face="MS Sans Serif, Verdana, Arial" size="1" color="#000000">';
fine_hint += '</font></td><td bgcolor="#FFFFE6" width="5" nowrap>' + supporto + '</td>';
fine_hint += '<td bgcolor="#000000" width="1" nowrap>' + supporto + '</td>';
fine_hint += '</tr>';
fine_hint += '<tr>';
fine_hint += '<td bgcolor="#E0E0E0" width="1" nowrap>' + supporto + '</td>';
fine_hint += '<td bgcolor="#FFFFE6" width="5" height="3" nowrap>' + supporto + '</td>';
fine_hint += '<td bgcolor="#FFFFE6" height="3" nowrap>' + supporto + '</td>';
fine_hint += '<td bgcolor="#FFFFE6" width="5" height="3" nowrap>' + supporto + '</td>';
fine_hint += '<td bgcolor="#000000" width="1" nowrap>' + supporto + '</td>';
fine_hint += '</tr>';
fine_hint += '<tr>';
fine_hint += '<td bgcolor="#000000" width="1" height="1" nowrap>' + supporto + '</td>';
fine_hint += '<td bgcolor="#000000" height="1" nowrap>' + supporto + '</td>';
fine_hint += '<td bgcolor="#000000" height="1" nowrap>' + supporto + '</td>';
fine_hint += '<td bgcolor="#000000" height="1" nowrap>' + supporto + '</td>';
fine_hint += '<td bgcolor="#000000" width="1" height="1" nowrap>' + supporto + '</td>';
fine_hint += '</tr>';
fine_hint += '</table>';
if (ie)
document.onmousemove = get_coord;
if (nn)
{
document.captureEvents (Event.MOUSEMOVE);
document.onmousemove = get_coord;
}
function get_coord (e)
{
if (ie)
{
coord_x = event.clientX + document.body.scrollLeft;
coord_y = event.clientY + document.body.scrollTop;
event.srcElement.onmouseout = off_hint;
}
if (nn)
{
coord_x = e.pageX + window.pageXOffset;
coord_y = e.pageY + window.pageYOffset;
e.target.onmouseout = off_hint;
}
return true;
}
function hint (testo)
{
if (typeof testo != 'undefined')
{
if (testo == "")
testo = " ";
clearTimeout(auto_close);
auto_close = null;
if (ie)
{
hint_txt.innerHTML = inizio_hint + testo + fine_hint;
hint_txt.style.pixelTop = coord_y + 15;
hint_txt.style.pixelLeft = coord_x;
hint_txt.style.visibility = "visible";
}
if (nn)
{
document.layers.hint_txt.document.open();
document.layers.hint_txt.document.write(inizio_hint + testo + fine_hint);
document.layers.hint_txt.document.close();
document.layers.hint_txt.left = coord_x;
document.layers.hint_txt.top = coord_y + 15;
document.layers.hint_txt.visibility = "show";
}
auto_close = setTimeout("off_hint()", 10000);
}
}
function off_hint ()
{
if (ie) hint_txt.style.visibility = "hidden";
if (nn) document.layers.hint_txt.visibility = "hide";
}
</script>
<p><a href="javascript:void(0)" onmouseover="hint('INSERIRE QUI IL MESAGGIO')">PASSA CON IL MOUSE SUL LINK...</a></p>
</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.