För musen över länkarna nedan!
Eller för musen över bilden nedan!
Som vanligt läggs detta script inom HEAD-taggarna.
<script type="text/javascript" language="JavaScript">
<!--
function show(id)
{
if (document.layers)
document.layers[id].visibility = "show"
else if (document.all)
document.all[id].style.visibility = "visible"
}
function hide(id)
{
if (document.layers)
document.layers[id].visibility = "hide"
else if (document.all)
document.all[id].style.visibility = "hidden"
}
//-->
</script>
Varje länkbeskrivning erfordrar en div-tagg. Döp varje div med ett unikt id, här beskrivning1. Sedan nästa beskrivning2 och nästa beskrivning3 osv. Motsvarande unika id ska givetvis anropas via länken sedan. Se det rödmarkerade i exemplen. Tänk på att det kan bli oavsiktliga radbrytningar i exemplet nedan.
<div id="beskrivning1" style="visibility: hidden; position: absolute; left: 100; top: 100; width: 100; font-family: verdana,arial,helvetica; font-size: 11px; background-color: #cccccc; padding: 3px; border: 2px solid #999999">
Länkbeskrivning till länk 1</a>
</div>
<div id="beskrivning2" style="visibility: hidden; position: absolute; left: 100; top: 100; width: 100; font-family: verdana,arial,helvetica; font-size: 11px; background-color: #cccccc; padding: 3px; border: 2px solid #999999">
Länkbeskrivning till länk 2</a>
</div>
<div id="beskrivning3" style="visibility: hidden; position: absolute; left: 100; top: 100; width: 100; font-family: verdana,arial,helvetica; font-size: 11px; background-color: #cccccc; padding: 3px; border: 2px solid #999999">
Länkbeskrivning till bilden</a>
</div>
Du styr vart länkbeskrivningen ska hamna via position: absolute; left: 100; top: 100; och själva länken skriver du som nedan, tänk på att det kan bli oavsiktliga radbrytningar i exempelkoden:
<a href="../graftext.html" onmouseover="javascript:show('beskrivning1');" onmouseout="javascript:hide('beskrivning1');">Länk 1</a>
<a href="../formtext.html" onmouseover="javascript:show('beskrivning2');" onmouseout="javascript:hide('beskrivning2');">Länk 2</a>
<a href="../graftext.html" onmouseover="javascript:show('beskrivning3');" onmouseout="javascript:hide('beskrivning3');"><img src="bild.gif" width=50 height=50 border=0></a>
Är du osäker, så spara ned detta dokument via Save As/Spara Som i browserns meny eller högerklicka med musen och välj View Soure/Visa källa för att se hela koden.