Linkmessage II

HTML-Einbindung
<!-- Script-Anfang --> <!-- Diesen Code musst Du in den head-Tag einfügen--> <style type="text/css"> #divDescription{position:absolute; width:200; visibility:hidden; z-index:200} .clDescription{width:250; font-family:verdana,arial,helvetica; font-size:11px; background-color:#FFFFF0; padding:3px; border: 1px solid #00FF00} #divlinks{position:absolute; left:10; top:120; z-index:1} </style> <script type="text/javascript" language="JavaScript"> //Default browsercheck, added to all scripts! function checkBrowser(){ this.ver=navigator.appVersion this.dom=document.getElementById?1:0 this.ie5=(this.ver.indexOf("MSIE 5")>-1 && this.dom)?1:0; this.ie4=(document.all && !this.dom)?1:0; this.ns5=(this.dom && parseInt(this.ver) >= 5) ?1:0; this.ns4=(document.layers && !this.dom)?1:0; this.bw=(this.ie5 || this.ie4 || this.ns4 || this.ns5) return this } bw=new checkBrowser() /*************************************************************************************** Variables to set: ***************************************************************************************/ messages=new Array() //Write your descriptions in here. messages[0]="Hier kann man beliebige Beschreibungstexte platzieren. Auch Bilder kann man mit einbinden, man sollte aber die Anführungszeichen weglassen im img-Tag.<img src=dino.jpg width=175 height=70 border=0 alt=Dino> Auch die Textlänge spielt keine Rolle." messages[1]="Linkbeschreibung 1" messages[2]="Linkbeschreibung 2" messages[3]="Linkbeschreibung 3" messages[4]="Ändert man den Parameter auf <b>onclick</b> bleibt die Beschreibung stehen. Ein klick bzw. ein überfahren eines anderen Linkes wechselt dann die Beschreibung. " //To have more descriptions just add to the array. fromX=50 //How much from the actual mouse X should the description box appear? fromY=-20////How much from the actual mouse Y should the description box appear? //To set the font size, font type, border color or remove the border or whatever, //change the clDescription class in the stylesheet. //Makes crossbrowser object. function makeObj(obj){ this.css=bw.dom? document.getElementById(obj).style:bw.ie4?document.all[obj].style:bw.ns4?document.layers[obj]:0; this.wref=bw.dom? document.getElementById(obj):bw.ie4?document.all[obj]:bw.ns4?document.layers[obj].document:0; this.writeIt=b_writeIt; return this } function b_writeIt(text){if(bw.ns4){this.wref.write(text);this.wref.close()} else this.wref.innerHTML=text} //Capturing mousemove var descx,descy; function popmousemove(e){descx=bw.ns4?e.pageX:event.x; descy=bw.ns4?e.pageY:event.y} //Initiates page var isLoaded; function popupInit(){ oDesc=new makeObj('divDescription') if(bw.ns4)document.captureEvents(Event.MOUSEMOVE) document.onmousemove=popmousemove; isLoaded=true; } //Shows the messages function popup(num){ if(isLoaded){ oDesc.writeIt('<span class="clDescription">'+messages[num]+'</span>') if(bw.ie5) descy=descy+document.body.scrollTop oDesc.css.left=descx+fromX; oDesc.css.top=descy+fromY oDesc.css.visibility='visible' } } //Hides it function popout(num){ if(isLoaded) oDesc.css.visibility='hidden' } //initiates page on pageload. onload=popupInit; </script> <!-- Diesen Code musst Du in den -body- einbauen --> <div id="divDescription" style="position: absolute; left: 132; top: 132; width: 200; height: 15"> <!--Empty div--></div><div id="divLinks" style="width: 377; height: 140; position: absolute; z-index: 0; left: 313; top: 209"> <!-- Just delete this layer, it's just here for the example links --><p><a href="#" onmouseover="popup(0)" onmouseout="popout(0)">link 0</a> <br> <a href="#" onmouseover="popup(1)" onmouseout="popout(1)">link 1</a> <br> <a href="#" onmouseover="popup(2)" onmouseout="popout(2)">link 2</a> <br> <a href="#" onmouseover="popup(3)" onmouseout="popout(3)">link 3</a> <br> <font face="Verdana, Arial" size="2" color="gold">Hier ein Beispiel mit onclick:</font><br> <a href="#" onclick="popup(4)" onclick="popout(4)">link 4</a> <br> </div><p></p> <!-- Script-Ende --> <!-- www-java24.net - DIE Javascript - Ressource -->