Info Box

[Nik]

Servus und Hallo,

ich hab mir von http://www.web-toolbox.net
ein Infobox script gezogen wo die jeweilige infobox neben der Maus angezeigt wird.

script:

<script type="text/javascript" language="JavaScript">
<!-- Original:  Patrick Lewis, mod: W. Jansen -->
<!-- Begin
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(

/*
:::::::: Texte für die Info-Box ab hier
:::::::: für jeden PopUp-Text je eine Zeile in Reihenfolge der Links mit Komma am Ende
:::::::: außer beim Letzten (kein Komma)
:::::::: WICHTIG !!! innerhalb der Zeilen keinen Zeilenumbruch
*/

"HTML und JavaSript",            // komma
"Info zur Stadt Geilenkirchen "  // letzter kein komma

// ::::: Texte für die Info-Box bis hier

);
overdiv="0";

// zeigt die PopUp-Box
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;
        }
}

//  versteckt die PopUp-Box
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>

<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>

link dazu

<a target="_blank" href="http://www.web-toolbox.net/geilenkirchen/" onMouseOver="popLayer(1)" onMouseOut="setTimeout('hideLayer()',2000)">
Stadt Geilenkirchen</a>

Meine Frage,

ist es möglich das scipt so umzuschreiben das wenn die Infobox zb am rechten rand aus dem browser hinaus ragt. Sie zb links von der maus anzeigen zu lassen?

Und wie?

Schon mal vielen dank im vorraus.

Mfg

Nik

[wahsaga]

hi,

ist es möglich das scipt so umzuschreiben das wenn die Infobox zb am rechten rand aus dem browser hinaus ragt. Sie zb links von der maus anzeigen zu lassen?

Man könnte aus Viewportmaßen, aktuellen Scrollpositionen und Elementmaßen berechnen, ob das Element aus dem Viewport herausragen würde - und dann die Anzeigeposition entsprechend anpassen.

Elementmaße liefern offsetWidth/-Height, und zum Abfragen der Viewportmaße und Scrollposition cross-browser finden sich auf http://www.quirksmode.org/ nützliche Tipps.

gruß,
wahsaga