Web-Design Beispiel zu den Tutorien JavaScript für alle Browser und
CSS für alle Browser,
onmouseover
Netscape 4 unterstützt onmouseover nicht nur bei Links, sondern auch bei Layern. Dabei ist onmouseover bei „absolute” positionierten Divs und auch bei Bildern möglich.
Netscape 4 supports onmouseover not only at links but at layers too. From that onmouseover can be used at positioned divs and at images.
Die Adressierung im JavaScript Code kann bei Bildern oft einheitlich für alle Browser erfolgen, allerdings nur solange diese nicht in positionierten Elementen, also Layern des Netscape 4, untergebracht sind. Für Netscape 4 kann und muß dann per JavaScript eine andere Adressierung genutzt werden, im folgenden Codebeispiel erhalten die anderen Browser einfach ein Attribut onmouseover beim Image-Tag.
JavaScript adressing of images is often the same at all browsers as far as the images are not placed in Netscapes layers.
<img onmouseover="alert(1)"
src=""
alt="Beispiel 1">
<script type="text/javascript">
if(document.layers)
document.layers[0].document.images[0].onmouseover=
function(){
alert(1);
};
Diese Netscape 4 typische Einschränkung kann natürlich durch Anpassungen per JavaScript umgangen werden, der einfache Umgang ohne ID oder Name mit dem Event per Inlinescript im Attribut des Tags ist aber erstmal nicht möglich.
That known problem does not allow a simple use of onmouseover at inlinescript or the image tags attributes.
Nach einer gezielten Suche nach einer Alternative entwickelte ich aber doch noch eine solche neue Lösung: Netscape 4 kennt bei Bildern bereits Eventhandler als Attribut des IMG-Tags, und hier weiss Netscape 4 sehr genau um welches Element es sich gerade handelt. So kennt Netscape 4 u.a. beim img Tag die Ereignisse onload und onerror.
After looking for an other method I got a new solution: Netscape 4 uses events at the image tag already. Therefore Netscape 4 knows about the identity of that elements. Here at the image tag I use onload and onerror of the given events.
Bei diesen Events kann mittels this adressiert werden, und über einen Umweg kann für alle Browser gleich ohne weitere Adressierung des Elements vorgegangen werden:
At these events it is possible to adress the object by "this", so this way allows to work without further adressing by an id or name.
onload="this.onmouseover=
function(){
alert(0)
};"
Nur bei Opera 4 ist diese Vorgehensweise zunächst nicht nur nicht erfolgreich, der Browser stürzt auch ab. Nach meinen Erfahrungen mit verschiedenen Operaversionen ist oft eine Zwischenvariable hilfreich:
Only Opera 4 doesent like that scripting and crashes. As I knew Opera likes some oldfashioned kind like more steps and vars:
onload="xxx=function(){alert(0)};
this.onmouseover=xxx;"
Schließlich fand ich noch eine elegantere Lösung, bei der Opera 4 sogar die volle Funktion des Events zur Verfügung steht:
Next I got the solution which works with full function at Opera 4 too:
1
2
3
4
5
6
7
8<!-- Kristof Lipfert Duesseldorf 2001, 2002 -->
<img
onload="this.onmouseover=new Function('alert(1);');"
onmouseover="this.onload();this.onmouseover();"
onerror="this.onload();"
src=" ... ">
Zwei Vorteile ergeben sich bei dieser Lösung, einheitliche Syntax - es kann für alle Browser gleich vorgegangen werden auch ohne Rücksicht auf etwaige Layer des Netscape, und der auszuführende Code muß immer noch nur einmal notiert werden.
The advantages of that solution are on code only without thinking about Netscapes layers and only on Code at one place.
Es gibt noch weitere Möglichkeiten das Layermodell automatisch zu berücksichtigen, die Layerstruktur kann gescannt werden. Ein Weg ist die komplette Abfrage der Layer und der in ihnen enthaltenen Objekte, ihre Verwaltung und Adressierung in einem eigens erstellten Array. Einfacher kann es mitunter sein die jeweilige Adresse zu suchen, zumindest wenn dieser Vorgang nur einmal bei oder nach dem Seitenaufbau für wenige Elemente erfolgt.
There are more ways to get the image in the structure of Netscape 4 by scanning the layers. One solution is the complete scan of all layers to build an complete array. If there are only a few elements and if the call of this elements is needed only one time at loading the page a search for that element and its adress may be simplier.
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18<img name="bsp" src=" ... ">
<script type="text/javascript"><--
/* Kristof Lipfert Duesseldorf 2001, 2002 */
function layerScanB(bez, d, dl){
if(!d)d=document;
db=d[bez];dl=d.layers;
if(dl&&!db)for(var i=0;i<dl.length;i++)
db=layerScanB(bez, dl[i].document);
return db;
}
window.onload=function(){
layerScanB("bsp").onmouseover=
function(){ alert(2) };
}
Falls das name-Attribut beim Image Tag etwa beim Doctype xhtml-strict nicht zur Verfügung steht bleibt bei neueren Browsern die id um das Bild per JavaScript anzusprechen, ggf. nach window.onload. Statt über das Image Array mit id statt name -und der Nummer für Netscape 4- ist der Zugriff auch per getElementById möglich.
If the name attribut is not available at the doctype xhtml-strict newer browser allow the use of id to access the image, after window.onload if needed.
1
2
3
4
5
6
7
8
9
10
11
12
13
14<img id="bspx" alt=" ... " src=" ... " />
<script type="text/javascript">
/* Kristof Lipfert Duesseldorf 2001, 2002 */
/* <![CDATA[ /> */
if(document.ids)document.images.bspx =
document.bspx = document.images[0];
document.images["bspx"].onmouseover=
function(){alert("x")};
/* <! ]]> */
</script>
© Dipl.-Des.FH Kristof Lipfert Webdesign GbR Düsseldorf 09/2001 Redesign 2004