„onMouseOver” für Divs bei Netscape 4
^{Kristof Lipfert
Dipl.-Des.(FH)}

Web-Design Beispiel zu den Tutorien HTML für alle Browser und CSS für alle Browser, onMouseOver

Der Event onMouseOver ist unter Netscape 4 auch bei Divs verfügbar. Dabei ist eine einfache Cross-Browser Strategie möglich, bei einheitlicher Syntax im JavaScript.

onMouseOver Beispiel

Vereinfacht wird die Lösung durch ein einheitliches Ansprechen der Divs. Einbindung als externes JavaScript, Anpassungen und Browserweichen können abgesehen von einer Erweiterung für Opera 4 entfallen, alle Browser erhalten die Zuweisung der Eventhandler mit gleicher Syntax per getElementById.

onMouseOver bei Divs und Netscape 4

Die als Hover-Flächen benötigte Divs werden absolut positioniert, sind aber auch für Netscape 4 in einem relativ positioniert (als Ilayer interpretiertem) Div eingebunden. Nun ist es möglich den Event onMouseOver bei den Schaltflächen-Divs abzufragen.

onMouseOver HTML Code

<div id=ilayer>
 
 <div id=ka> ka </div>
 <div id=kb> kb </div>
 <div id=kc> kc </div>
 <div id=kd> kd </div>
 
</div>

JavaScript Code für onMouseOver

Im Unterschied zur direkten Einbindung der Scripte in das HTML bzw. den Div-Tag werden die Divs per Id adressiert. Der Zugriff erfolg hier im Beispiel über getElementById.

Einheitliches onMouseOver und backgroundColor

Wie schon mit den Entwicklungen getElementById und innerHTML für Netscape 4 ist es aber auch hier möglich mit einem einheitlichen Code per getElementById zu arbeiten. Auch der Internet Explorer 4 wird berücksichtigt. Der Unterschied beim Netscape 4 bgColor statt backgroundColor zu verwenden kann statt einer Lösung bei dem externen Script auch sehr einfach in die nötige Funktion zum Farbwechsel eingebunden werden:

  
with (document.getElementById(arguments[0]).style)
 
        { bgColor=backgroundColor=arguments[1];}}
   

Das einzubindene Script x4-getelementbyid.js erfasst automatisch die Layerebenen und erlaubt eine einheitliche Syntax. Für Netscape 4 ist der Resizebug gleich mit berücksichtigt, ein onload wird bei diesem Script übrigens nicht genutzt, Parameter werden auch nicht benötigt. Für den Internet Explorer 4 wird ebenfalls die Methode getElementById bereitgestellt.

function setcx(){with (document.getElementById(arguments[0]).style)
                           { bgColor=backgroundColor=arguments[1];}}
 
document.getElementById('ka').onmouseover=
                             function(){setcx('ka','silver');};
document.getElementById('kb').onmouseover=
                             function(){setcx('kb','#ececec');};
document.getElementById('kc').onmouseover=
                             function(){setcx('kc','red');};
document.getElementById('kd').onmouseover= 
                             function(){setcx('kd','silver');};
document.getElementById('ka').onmouseout=
                             function(){setcx('ka',"#f9f999");};
document.getElementById('kb').onmouseout=
                             function(){setcx('kb',"#f999f9");};
document.getElementById('kc').onmouseout=
                             function(){setcx('kc',"#99f9f9");};
document.getElementById('kd').onmouseout=
                             function(){setcx('kd',"#9999f9");};
 
</script>
 
</body>
</html>

Gleiches CSS

Die Angaben für das CSS sind für alle Browser gleich. Lediglich zur vollständigen Färbung der Hintergründe ist für Netscape 4 die layer-background-color ergänzt worden. Zusätzlich wurden die Passagen per Kommnentar vor anderen Browsern versteckt, damit ist der Code W3C-validierbar, nötig ist diese Maßnahme nicht unbedingt da es mit anderen Browsern womöglich eher Interferenzen durch die CSS-Weiche als durch den eigentlichen Code gibt.

/*  Autor 2001 2004 Kristof Lipfert, Duesseldorf         */
 
#ka,#kb,#kc,#kd{width:50px;height:20px;margin:0;
                       clip:rect(0px 49px 20px 0px);}
#ka{left:0px;}
#kb{left:50px;}
#kc{left:150px;}
#kd{left:200px;}
#kax,#kbx,#kcx,#kdx{top:20px;width:300px;
                        visibility:hidden;height:150px;}
#ka,#kax{border:.1px solid white;background-color:#f9f999;
           /*/*//*/layer-background-color:#f9f999;/* */}
#kb,#kbx{border:.1px solid white;background-color:#f999f9;
           /*/*//*/layer-background-color:#f999f9;/* */}
#kc,#kcx{border:.1px solid white;background-color:#99f9f9;
           /*/*//*/layer-background-color:#99f9f9;/* */}
#kd,#kdx{border:.1px solid white;background-color:#9999f9;
           /*/*//*/layer-background-color:#9999f9;/* */}
#kax {visibility:visible}
#ka,#kb,#kc,#kd,#kax,#kbx,#kcx,#kdx{ position:absolute;}
#ilayer{margin:0;padding:0;left:30%;position:relative;
                      padding-bottom:220px;width:300px;}

Autor, Entwicklung

© Dipl.-Des.FH Kristof Lipfert Webdesign GbR Düsseldorf 02/2002 Redesign 2004