„a:hover” für Netscape 4
^{Kristof Lipfert
Dipl.-Des.(FH)}

Einfache Lösung gesucht

Workarounds um einen Hover-Effekt für Netscape 4 zu simulieren sind oft aufwändig. Mit zusätzlich per JavaScript erzeugten Layern gelingen zwar eindrucksvolle Effekte, aber es sind Probleme möglich, so gibt es z.B. je nach Netscapeversion bzw. OS einen unterschiedlichen Versatz der Layerposition.

Oft reicht aber eine einfacher zu realisierende Änderung der Hintergrundfarbe aus um die Ergonomie einer Navigation zu erhöhen. Bislang gab es mehrere Hindernisse zu einer einfachen Umsetzung die jetzt mit den folgenden Betrachtungen und Entwicklungen immerhin besser handhabbarer sind.

DHTML möglich?

Netscape 4 kann sehr schön die Hintergrundfarbe von "document" oder Layern ändern. Voraussetzung ist allerdings die Adressierung als Layer, hierzu gibt es noch weiteregehende Informatiohnen vom Autor wie die Adressierung automatisiert werden kann.

Zur Adressierung als Layer bei Netscape 4 kursieren verschiedene Überinterpretationen und Pauschalisierungen, die hinterfragt werden können.

Layer position relative

Wir benötigen keinen Layertag um ansprechbare Layer zu erzeugen. Es reicht die Angabe von "position" im Stylesheet um Divs als Layer einsetzen zu können. Dabei reicht bereits eine relative Position um z.B. visibility oder Hintergrundeigenschaften ändern zu können.

A-tag

Bekannt ist daß der A-Tag bei Formatierung durch CSS seine Eigenschaften als ausführbarer Link verliert. Nun soll für Netscape 4 natürlich der HTML-Code nicht angepasst werden, ist aber auch gar nicht nötig da der A-Tag hier eben doch ansprechbar bleibt.

Farbwerte

Rätselraten gab es auch immer wieder um Farben, transparent, inherit, null, wie bring ich es dem Netscape bei? Hier ist erfreulicherweise eine Methode entwickelt worden welche die Farbe wieder auf transparent setzt, eine Hoverfläche muss also nicht nach dem mouseout auf einen deckenden Farbwert gestellt werden.

Beispiel

Code

Voraussetzung im Stylesheet ist die Layereigemschaft der A-tags, oder besser vergleichbar mit ilayer:

  1
  2
  3
  4
  5
  6
 

/*  Kristof Lipfert Duesseldorf (c) 2002, 2003      */
/*  a:hover fuer NC 4                               */

#beispiel a {position:relative}

Hier wurde auch noch das Div mit der ID "Beispiel" als Layer behandelt, damit die Hovereffekte auf das Beispiel begrenzt bleiben. Dazu noch das JavaScript um die Event-Handler zu setzen:

  1
  2
  3
  4
  5
  6
  7
  8
  9 

/*  Kristof Lipfert Duesseldorf (c) 2002, 2003      */
/*  a:hover fuer NC 4                               */

dld=document.layers['beispiel'].document;
dld.links[0].onmouseover=
function(){dld.layers[0].bgColor="#f3f3f3"};
dld.links[0].onmouseout=
function(){dld.layers[0].bgColor=null};

Resizebug

Hier wird der Resizebug ohne ein Neuladen der Seite behandelt:

  1
  2
  3
  4
  5
  6
  7
  8 

/*  Kristof Lipfert Duesseldorf (c) 2002, 2003      */

window.onresize=
function(){dld.layers[0].bgColor=null};

JavaScript

Das ganze Script des Beispiels, bei mehreren Links würde noch eine for-Schleife zum Einsatz kommen:

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

/*  Kristof Lipfert Duesseldorf (c) 2002, 2003      */

if( document.ids){
dld=document.layers['beispiel'].document;
dld.links[0].onmouseover=
function(){dld.layers[0].bgColor="#f3f3f3"};
dld.links[0].onmouseout=
function(){dld.layers[0].bgColor=null};
window.onresize=function(){dld.layers[0].bgColor=null};
}

Fazit

Einfache Hovereffekte sind leicht und bis auf die Scripteinbindung ohne Eingriff in den HTML-Code realisierbar. Bei der hier gezeigten Lösung können aber doch noch fehlerhafte Wechselbeziehungen des relativ positionierten A-Tag zu den umgebenden Elementen bestehen. Je nach Umsetzung sind Resizebug oder ähnliche Effekte möglich aber einfach korrigierbar.

Autor

9/ 2001 © Copyright Kristof Lipfert Düsseldorf 2002, 2003 Rel. 2004