Infobox bei Mouseover

[Michael]

Guten Morgen miteinander!

Ich habe eine Tabelle mit 6x6 gleichen Bildern. Wenn ich mit der Maus über ein Bild fahre (mousover), geht gerade neben dem Zeiger eine Infobox auf, die den Bildnamen enthält (Bild1, Bild2 etc.). Ich möchte aber, dass diese Infobox jeweils angrenzend an die rechte untere Ecke des betreffenden Bildes angezeigt wird, also für ein Bild immer am gleichen Ort. Geht das überhaupt?

Grüsse Michael

Hier der Quellcode, gefunden auf Web-Toolbox:

CODE
Im Head:


<!-- generelle schriftformatierung für die Box -->
<style type="text/css">
<!--
td {
font-family:arial,helvetica;
font-size:12px;
color:#000000;
}
-->
</style>

<script type="text/javascript" language="JavaScript">
<!-- Original: Patrick Lewis, mod: W. Jansen -->
<!--

if (document.layers) {navigator.family = "nn4"}
if (document.all) {navigator.family = "ie4"}
if (window.navigator.userAgent.toLowerCase().match("gecko")) {navigator.family = "gecko"}

descarray = new Array(

"Bild1",
"Bild2"

);

overdiv="0";
function popLayer(a){
if(!descarray[a]){descarray[a]="<font color=red>Dieses PopUp (#"+a+") ist nicht korrekt definiert - Beschreibung fehlt</font>";}
if (navigator.family == "gecko") {pad="0"; bord="1 bordercolor=black";}
else {pad="1"; bord="0";}
desc = "<table cellspacing=0 cellpadding="+pad+" border="+bord+" bgcolor=000000><tr><td>\n"
+"<table cellspacing=0 cellpadding=10 border=0 width=100%><tr><td bgcolor=#DDFFFF><center><font size=-1>\n"
+descarray[a]
+"\n</td></tr></table>\n"
+"</td></tr></table>";
if(navigator.family =="nn4") {
document.object1.document.write(desc);
document.object1.document.close();
document.object1.left=x+15;
document.object1.top=y-5;
}
else if(navigator.family =="ie4"){
object1.innerHTML=desc;
object1.style.pixelLeft=x+15;
object1.style.pixelTop=y-5;
}
else if(navigator.family =="gecko"){
document.getElementById("object1").innerHTML=desc;
document.getElementById("object1").style.left=x+15;
document.getElementById("object1").style.top=y-5;
}
}

function hideLayer(){
if (overdiv == "0") {
if(navigator.family =="nn4") {eval(document.object1.top="-500");}
else if(navigator.family =="ie4"){object1.innerHTML="";}
else if(navigator.family =="gecko") {document.getElementById("object1").style.top="-500";}
}
}

var isNav = (navigator.appName.indexOf("Netscape") !=-1);
function handlerMM(e){

// entweder feste x/y-Position für die Info-Box
// x = 300; // Infobox x-Position bei 300 von links
// y = 0; // Infobox y-Position bei 0 (oben)

// oder Plazierung neben Mauszeiger
x = (isNav) ? e.pageX : event.clientX + document.body.scrollLeft;
y = (isNav) ? e.pageY : event.clientY + document.body.scrollTop;

}
if (isNav){document.captureEvents(Event.MOUSEMOVE);}
document.onmousemove = handlerMM;
// End -->
</script>


im Body:


<!-- ::::::::::::::::::::: div-definition :::::::::::::::::::::::-->
<div id="object1" style="position:absolute; background-color:FFFFDD;color:black;border-color:black;border-width:20; visibility:show; left:25px; top:-100px; z-index:+1" onmouseover="overdiv=1;" onmouseout="overdiv=0; setTimeout('hideLayer()',1000)">
pop up description layer
</div>
<!-- ::::::::::::::::::::: /div-definition :::::::::::::::::::::::-->

 

[Michael]

Löse es jetzt auf eine andere Art:
Mit diesem Script

Michael