Visa verktygstips

Det finns många sätt att visa verktygstips under muspekaren. En fördel med den här metoden är att rutan med texten inte försvinner efter några sekunder, utan visas så länge muspekaren inte flyttas. Det innebär att du kan använda längre texter i dina tips.

Metoden går att använda för att förklara vart länkar leder, eller helt enkelt för att komplettera texten – till exempel förklara krångliga ord.

Det här fungerar i de webbläsare jag har prövat – Internet Explorer 6, Netscape 6 och Firefox 0.9.

Jag har lagt hela koden i formuläret nedan, så att du kan kopiera den komplett med anvisningar.

1. Stilmallen läggs i HEAD-elementet. Du kan ändra värdena i den, och lägga till eller ta bort attribut.

2. Den här DIV-taggen lägger du alldeles efter den inledande BODY-taggen. Observera att den har samma id som i stilmallen ovan.

3. Skriptet placerar du där du vill visa verktygstipsen. Kommentarerna visar var du kan ändra.

var xled=0 //Förskjuter tipsrutan i X-led i förhållande till muspekaren
var yled=20 //Förskjuter tipsrutan i Y-led i förhållande till muspekaren
var ie=document.all
var ns6=document.getElementById && !document.all
var enabletip=false
if (ie||ns6)
var tipsobjekt=document.all? document.all["tipsruta"] : document.getElementById? document.getElementById("tipsruta") : ""

function iebrowser(){
return (document.compatMode && document.compatMode!="BackCompat")? document.documentElement : document.body
}

function tipsruta2(_texten_, faargen, _bredden_){
if (ns6||ie){
if (typeof _bredden_!="undefined") tipsobjekt.style.width=_bredden_+"px"
if (typeof faargen!="undefined" && faargen!="") tipsobjekt.style.backgroundColor=faargen
tipsobjekt.innerHTML=_texten_
enabletip=true
return false
}
}

function placeraruta(e){
if (enabletip){
var pekareX=(ns6)?e.pageX : event.x+iebrowser().scrollLeft;
var pekareY=(ns6)?e.pageY : event.y+iebrowser().scrollTop;
//Hur nära webbläsarfönstrets kanter befinner sig muspekaren
var hoogerkant=ie&&!window.opera? iebrowser().clientWidth-event.clientX-xled : window.innerWidth-e.clientX-xled-20
var nederkant=ie&&!window.opera? iebrowser().clientHeight-event.clientY-yled : window.innerHeight-e.clientY-yled-20

var vaensterkant=(xled<0)? xled*(-1) : -1000

//om det horisontella avståndet inte är tillräckligt
if (hoogerkant<tipsobjekt.offsetWidth)
//flytta åt vänster
tipsobjekt.style.left=ie? iebrowser().scrollLeft+event.clientX-tipsobjekt.offsetWidth+"px" : window.pageXOffset+e.clientX-tipsobjekt.offsetWidth+"px"
else if (pekareX<vaensterkant)
tipsobjekt.style.left="5px"
else
//placera horisontellt där muspekaren befinner sig
tipsobjekt.style.left=pekareX+xled+"px"

//samma sak vertikalt
if (nederkant<tipsobjekt.offsetHeight)
tipsobjekt.style.top=ie? iebrowser().scrollTop+event.clientY-tipsobjekt.offsetHeight-yled+"px" : window.pageYOffset+e.clientY-tipsobjekt.offsetHeight-yled+"px"
else
tipsobjekt.style.top=pekareY+yled+"px"
tipsobjekt.style.visibility="visible"
}
}

function goomtipsruta2(){
if (ns6||ie){
enabletip=false
tipsobjekt.style.visibility="hidden"
tipsobjekt.style.left="-1000px"
tipsobjekt.style.backgroundColor=''
tipsobjekt.style.width=''
}
}
document.onmousemove=placeraruta
</script>

4. Efter skriptet hamnar taggarna som kommer att visa det "pekbara" objektet" och anropa funktionen i javaskriptet när man pekar på objektet. I exemplen här ser du några varianter på hur du kan stoppa in värden och förändra dem. Var noga med citationstecknen - om skriptet inte fungerar beror det oftast på att du har använt enkla citationstecken där det skall vara dubbla, eller tvärtom.

<P><a href="almanack.html" onMouseover="tipsruta2('Lägg en snygg almanacka på hemsidan.', '#00FFFF')";
 onMouseout="goomtipsruta2()">Almanackan</a></P>
<DIV onMouseover='tipsruta2("Mina \"värsta\" grodor", "#FFFFCC")';
 onMouseout="goomtipsruta2()"><P>Text i en DIV-tagg.</P></div>
<P><a href="linkeff.html" target="_top" onMouseover="tipsruta2('Det finns många sätt att förändra utseendet på länkarna.', '#C0C0C0', 200)";
 onMouseout="goomtipsruta2()">Styla länkarna</a></P>

Verktygstips vid musmarkören