www.lipfert-malik.de>webdesign>tutorial>JavaScript für alle Browser> onClick Impressum

„onClick” 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, onClick

Die neue Möglichkeit den Event onClick für Netscape 4 auch bei Divs nutzen oder simulieren zu können vereinfacht Cross-Browser Strategien und ermöglicht eine einheitlichere Syntax bei JavaScript, zugleich werden Sonderwege für Netscape 4 bei HTML und CSS fast entbehrlich. Und auch für Opera 4 wird ein onClick bei Divs ermöglicht, in Bezug auf den Internet Explorer 4 wird zudem die Syntax vereinheitlicht.

onClick Beispiel

ka
kb
kc
kd
kax
kbx
kcx
kdx

Die eigens entwickelte Lösung erfordert lediglich die 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.

Das Beispiel zitiert teilweise das Layout von http://online.statistik-mv.de/index_mv.htm, Anlass war der dortige wohl eher unnötige Verzicht auf Zugänglichkeit mit verschiedenen Browsern. Um Divs für Netscape 4 per Event ansprechen zu können müssen die Divs per CSS mit einer position versehen sein. Viele Möglichkeiten gibt es bereits bei relativ positionierten Divs, so das Setzen der visibility. Um also eine solche Funktionalität ohne onClick, welche unter Netscape 4 für Divs nicht verfügbar ist, dennoch zu ermöglichen gibt es mehrere Wege.

Das einfachste ist ein Link, hier können viele EventHandler abgefragt werden, wie auch beim HTML-Tag Image. Aufwändig aber gut möglich ist es per DHTML über die Divs neu erzeugte Layer zu legen welche besser zur Abfrage geeignet sind. Hier möchte ich aber auf eine einfachere Methode aufmerksam machen, die bei absolut positionierten Divs funktioniert, die mit einem zusätzlichen Div, welches für alle Browser gleich vorteilhaft sein kann, relativ positioniert im Dokument eingesetzt werden könnne.

Ersatz für onClick bei Divs und Netscape 4

Die als Schaltflä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 onFocus bei den Schaltflächen-Divs abzufragen, der hier gleich einsetzbar ist wie das vermisste onClick ist. Im Hinblick auf andere, auch zukünftige, Browser wird onClick aber für die Mehrheit der Browser beibehalten.

onClick HTML Code

  1
  2
  3
  4
  5
  6
  7
  8
  9
 10
 11
 12
 13
 14
<div id=ilayer>

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

 <div id=kax> kax </div>
 <div id=kbx> kbx </div>
 <div id=kcx> kcx </div>
 <div id=kdx> kdx </div>

</div>

JavaScript Code für onClick

Der nötige Code für modernere Browser adressiert die Divs per getElementById. Beim Klick auf die kleinen Schaltflächen-Divs wird die visibility der verschiedenen Ebenen über eine Funktion aktualisiert, ein solcher Codeabschnitt hat folgen Syntax: document.getElementById( "kax" ).style.visibility = "hidden";. Für Netscape 4 müßten die Divs zusätzlich angesprochen werden, üblicherweise umständlich als verschachtelte Layer a la document.layers[ 0 ].document.layers[ "kax" ].visibility = "hide" ; . Browserabfragen müßten auch mehrfach erfolgen.

Einheitliches onClick

Wie schon mit den Entwicklungen getElementById und innerHTML für Netscape 4 ist es auch hier möglich onClick automatisch anzupassen und mit einem einheitlichen Code per getElementById zu arbeiten. Auch der Internet Explorer 4 wird berücksichtigt.

Das einzubindene Script onclick-div-nc4.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.

510
511
512
513
514
515
516
517
518
519
520
521
531
532
533
534
535
536
537
538
539


<script type="text/javascript" src="onclick-div-nc4.js"></script>

<script type="text/javascript">

function rxset(x){
document.getElementById("kax").style.visibility="hidden";
document.getElementById("kbx").style.visibility="hidden";
document.getElementById("kcx").style.visibility="hidden";
document.getElementById("kdx").style.visibility="hidden";
document.getElementById(x).style.visibility="visible";
}
document.getElementById("ka").onclick=function(){rxset("kax");};
document.getElementById("kb").onclick=function(){rxset("kbx");};
document.getElementById("kc").onclick=function(){rxset("kcx");};
document.getElementById("kd").onclick=function(){rxset("kdx");};

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

  1
  2
  3
  4
  5
  6
  7
  8
  9
 10
 11
 12
 13
 14
 15
 16
 17
 18
 19
 20
 21
 22
 23
/*  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;}

onClick barrierefreier

Beim vorliegenden Beispiel sollten noch Alternativen zum nötigen JavaScript angeboten werden. Eine Lösung mittels CSS und :hover wäre hier nicht oder zumindest nicht barrierefrei realisierbar. Ene validere Variante des noscript-Beispiels besteht darin, die Angaben in das erste Stylesheet einzubinden, und die passenden Werte für die Scriptversion per document.write zu erzeugen.

  1
  2
  3
  4
  5
  6
  7
  8
  9
 10
 11
 12
 13
 14
 15
 …
    #kax,#kbx,#kcx,#kdx{ position:relative;visibility:visible;}
    #ilayer{  padding-bottom:20px;}

</style>
<script type="text/javascript">

document.write('<style type="text/css">'+
 '#kax,#kbx,#kcx,#kdx { position:absolute; }'+
 '#kbx,#kcx,#kdx { visibility:hidden; }'+
 '#ilayer {padding-bottom:220px;}'+
 '</style>');

</script>

Bei passender Auslegung kann so sichergestellt werden dass bei deaktiviertem JavaScript alle Divs sichtbar und untereinander angeordnet sind. Nachteil dieser Lösung ist die für Netcsape 4 problematische Auswertung des dynamisch erzeugten Styles, so kann nach einem Resize die Seite instabil werden.

Bei Tests erfolgreich bei den meisten Browsern war aber noch folgende W3C-valide Lösung als Ersatz für den noscript-Tag, nur für Opera 4 müßte die Methode noch angepaßt werden:

  1
  2
  3
  4
  5
  6
  7
  8
  9
 10
 11
 12
 13
 14
 15

<script type="text/javascript">
         document.write('<!-- ');</script>

<style type="text/css"><!--

   #kax,#kbx,#kcx,#kdx{ position:relative;visibility:visible;}

   #ilayer{padding-bottom:20px;}

--></style>

<script type="text/javascript"><!--
         document.write(' -->'); //--></script>


Die folgende Lösung ist eigentlich ideal, entspricht aber nicht ganz den Vorstellungen des W3C darüber welche HTML-Tags im Head und welche im Body einer HTML-Datei stehen dürfen:

  1
  2
  3
  4
  5
  6
  7
  8
  9
 10
<noscript>
  <style type="text/css">

    #kax,#kbx,#kcx,#kdx{ 
              position:relative;visibility:visible;}
    #ilayer{  padding-bottom:20px;}

  </style>
</noscript>

onClick für Opera 4

Opera 4 beherrscht immerhin die Abfrage von onMouseDown bei Divs. Eine Anpassung von Opera 4 ist nach folgendem Schema möglich:

 14
 15
 16
 17
 18
 19
 20
 21
 22
 ...
document.getElementById("kd").onclick=function(){rxset("kdx");};

if(!window.Option&&getElementById){
document.getElementById("ka").onmousedown =
              document.getElementById("ka").onclick;
 ...
                  }

Geteste Browser

Autor, Entwicklung

© Dipl.-Des.FH Kristof Lipfert Webdesign GbR Düsseldorf 2001 Redesign 2004