ToolTip



Plasser musa over bildet...



Teksten og boksen er "stylet" sånn:
<style type="text/css">
<!--
#toolTipBox {
display: none; padding: 5; font-size: 12px; border: black solid 1px; font-family: verdana;
position: absolute; background-color: #ffd038; color: 000000;
}
-->
</style>



Så putter du dette scriptet mellom HEAD-taggene:
<script type="text/javascript">
<!--
var theObj="";
function toolTip(text,me) {
theObj=me;
theObj.onmousemove=updatePos;
document.getElementById('toolTipBox').innerHTML=text;
document.getElementById('toolTipBox').style.display="block";
window.onscroll=updatePos;
}
function updatePos() {
var ev=arguments[0]?arguments[0]:event;
var x=ev.clientX;
var y=ev.clientY;
diffX=24;
diffY=0;
document.getElementById('toolTipBox').style.top = y-2+diffY+document.body.scrollTop+ "px";
document.getElementById('toolTipBox').style.left = x-2+diffX+document.body.scrollLeft+"px";
theObj.onmouseout=hideMe;
}
function hideMe() {
document.getElementById('toolTipBox').style.display="none";
}
-->
</script>



Bilde-oppsettet går sånn:
<span id="toolTipBox" width="200"></span>
<img src="yourImage.jpg" width="350" height="60" border="0" onmouseover="toolTip('Teksten din her',this)">
(NB: ",this" må stå sist i parantesen!)