nicht angemeldet
Rollover-Effekt in Verschachtelung von TABLE mit DIV
Hi!
Mein Problem bringt mich schon zu Verzweiflung.
Auf meiner Seite habe ich eine Verschachtelung so gestaltet:
<table>
<tr><td><div id="object1" style="position:absolute; visibility:show; left:10px; top:13px; z-index:2; width: 40px; height: 14px">
<p><a href="news.htm" target="_top"><img src="../pics/layout/bnews.gif" width="152" height="29" border="0" vspace="2" alt="news" name="news"></a></p>
</div></td></tr></table>
Ein dazugehörendes ausgelagertes JavaScript sorgt dafür, dass dieser "Layer" mitscrollt, wenn man das Fenster scrollt:
function setVariables() {
if (navigator.appName == "Netscape") {
v=".top=";
dS="document.";
sD="";
y="window.pageYOffset";
}
else {
v=".pixelTop=";
dS="";
sD=".style";
y="document.body.scrollTop";
}}
function checkLocation() {
object="object1";
ya=eval(y);
eval(dS+object+sD+v+ya+'+13');
setTimeout("checkLocation()",5);
}
Das Script wird im <body> Tag initalisiert mit:
<body OnLoad="setVariables();checkLocation()">
Der Grund dieser Gestaltung ist, dass ein Benutzer mit aktiviertem JavaScript dieses Menü mitscrollen sieht, wenn die Seite gescrollt wird.
Hat der Benutzer kein JavaScript und evtl. keine Layer-Funktionalität, so wird das Menü trotzdem positioniert und zwar in der Tabelle.
Ich will auf jeden Fall Frames vermeiden.
Bisher funktioniert alles einwandfrei. Da ich mein Design jetzt mit mouseover-Effekt ändern möchte bin ich auf ein Problem gestossen:
Ich habe folgendes versucht. Die Zeile mit dem Bild habe ich so geändert...
<p><a href="news.htm" target="_top" onMouseOut="hilite(0,'news0')" onMouseOver="hilite(0,'news1')"><img src="../pics/layout/bnews.gif" width="152" height="29" border="0" vspace="2" alt="news" name="news"></a></p>
...und das Script so erweitert:
function preload(pfad) {
if (document.images) {
news0 = new Image(152,29); news0.src = pfad+"bnews.gif";
news1 = new Image(152,29); news1.src = pfad+"cnews.gif";
}}
function hilite(bild,bildname) {
if (document.images) {
document.images[bild].src = eval(bildname + ".src");
}}
Den body habe ich folgendermassen geändert:
<body OnLoad="setVariables();checkLocation();preload('../pics/layout/')">
Es sollte nun eigentlich funktionieren, tut es aber nur beim IE 5 (und wahrscheinlich auch IE 4). Netscape bringt einen JavaScript-Fehler.
Am Netscape 4.7 funktioniert es nicht. Komischerweise kann ich auch keinen Text und Bilder auf der Seite
auswählen, beim IE geht es.
Wer diesen Effekt nachvollziehen möchte kann ja selber mal probieren, Text auszuwählen:
http://www.w-4.de/~drmad/news.htm (noch ohne MouseOver...)
Wer kann mir bei diesem Problem helfen? Ist es evtl. ein Bug im NS 4.7? Muss ich evtl. den "Layer" irgendwie ansprechen? Wenn ja, wie?
Wie kriege ich den MouseOver-Effekt hin?
Hab hier im Forum leider nix gefunden.
Vielen Dank schon mal im voraus... :-)
Martin
-
Hi!
Wer kann mir bei diesem Problem helfen? Ist es evtl. ein Bug im NS 4.7? Muss ich evtl. den "Layer" irgendwie ansprechen? Wenn ja, wie?
Wie kriege ich den MouseOver-Effekt hin?Der Layer ist für den Netscape ein eigenes Dokument (so quasi ein Kind-Dokument im Dokument)
Ein Bild darin sprichst du dann folgendermaßen an:document.layers.layername.document.bildname.src=bildi.gif
mfG
BRAND-
Hallo Brand...
Der Layer ist für den Netscape ein eigenes Dokument (so quasi ein Kind-Dokument im Dokument)
Ein Bild darin sprichst du dann folgendermaßen an:document.layers.layername.document.bildname.src=bildi.gif
mfG
BRANDHab ich leider auch schon probiert, aber NS gibt einen Javascript-Error aus:
document.layers.object1.images has no properties.Ich habe das Script wie folgt geändert:
function hilite(bild,bildname) {
if (document.images) {
document.layers.object1.images[bild].src = eval(bildname + ".src");
}}Trotzdem vielen Dank!
BTW: Ich glabe es hängt damit zusammen, dass auf meiner Seite kein Text auswählbar ist.
Irgendwie scheint mir der NS mit der Verschachtelung von TABLE und DIV nicht zurechtzukommen...Martin
-
Hi!
Hab ich leider auch schon probiert, aber NS gibt einen Javascript-Error aus:
document.layers.object1.images has no properties.So habe ich es ja auch nicht geschrieben.
Es sollte folgendermaßen heißen:document.layers.object1.document.images[bild].src = eval(bildname + ".src");
BTW: Ich glabe es hängt damit zusammen, dass auf meiner Seite kein Text auswählbar ist.
Das verstehe ich jetzt nicht ganz?
Irgendwie scheint mir der NS mit der Verschachtelung von TABLE und DIV nicht zurechtzukommen...
Absolut positionierte DIVs stehen für Netscape nicht in einer Table (auch wenn du sie zwischen <td></td> schreibst) sie "schweben" quasi drüber.
mfG
BRAND-
Hi Brand!
Danke für deine schnelle Antwort.
Es sollte folgendermaßen heißen:
document.layers.object1.document.images[bild].src = eval(bildname + ".src");
danke! hab ich übersehen. Ich habe meinen 2. Versuch schon hier gepostet, drum schreib ichs nicht nochmal.
BTW: Ich glabe es hängt damit zusammen, dass auf meiner Seite kein Text auswählbar ist.
Das verstehe ich jetzt nicht ganz?
Ich meinte damit, dass der Text nicht selektiert werden kann, wenn man mit gedrückter Maustaste über den Text fährt...
Irgendwie scheint mir der NS mit der Verschachtelung von TABLE und DIV nicht zurechtzukommen...
Absolut positionierte DIVs stehen für Netscape nicht in einer Table (auch wenn du sie zwischen <td></td> schreibst) sie "schweben" quasi drüber.
Jepp, das war auch meine Absicht, um in Browsern, die keine LAYERs oder DIVs kennen, trotzdem die Position der Bilder zu bestimmen.
Bye, Martin
-
-
Hallo Martin
document.layers.layername.document.bildname.src = bildi.gif;
^.......document
»» document.layers.object1.images[bild].src = eval(bildname + ".src");
^........?Auch wenn Brand die Ehre gebührt die korrekte Antworte bereits gegeben zu haben, mische im mich trotzdem noch mal ein ;-)
Wie Du oben sehen kannst, ist das was Du verwendest nicht identisch mit dem, was Dir Brand gepostet hat.
Unterhalb des Layer-Objects liegt nochmal ein document-object. Deshalb ist die obere Version auch richtig. Bei Deiner fehlt eben das document.
Es sollte also folgendermaßen ausschauen:document.layers.object1.document.images[bild].src = eval(bildname + ".src");
Das funktioniert natürlich nur beim NN (IE kennt kein layer-objekt), weshalb Du Deine Mousoverfunktion für "beide" Browser unterschiedlich schreiben musst. das images-Objekt wird wohl mittlerweile von den meisten Browseren verstanden (vom Lynx wahrscheinlich nicht, oder? ;-). Am besten verwendest Du zur Unterscheidung 'document.all' bzw. 'document.layers'. Allerdings wird das nur solange funktionieren, bis der NN6 beginnt, seine Siegeszug anzutreten ;-) Aber dann geht bestimmt sowieso wieder alles ganz anders als bis jetzt ;-(.
Ich hoffe das hilft Dir weiter.Gruß AlexBausW
-
Servus AlexBausW!
Erstmal vielen, vielen Dank für deine schnelle Antwort! :-)
document.layers.object1.document.images[bild].src = eval(bildname + ".src");
uups. hab ich übersehen... JavaScript ist ganz schön verwirrend...
Das funktioniert natürlich nur beim NN (IE kennt kein layer-objekt), weshalb Du Deine Mousoverfunktion für "beide" Browser unterschiedlich schreiben musst. das images-Objekt wird wohl mittlerweile von den meisten Browseren verstanden (vom Lynx wahrscheinlich nicht, oder? ;-). Am besten verwendest Du zur Unterscheidung 'document.all' bzw. 'document.layers'. Allerdings wird das nur solange funktionieren, bis der NN6 beginnt, seine Siegeszug anzutreten ;-) Aber dann geht bestimmt sowieso wieder alles ganz anders als bis jetzt ;-(.
Ich hoffe das hilft Dir weiter.hehe! 8) Ich hoffe meine Versuche zur Crossbrowserkompatibilität laufen nicht in die falsche Richtung.
Netscape 6 bringt bestimmt einige Überraschungen mit sich. Freu mich schon, wenn der rauskommt...o.k., ich habs soweit umgesetzt:
In HTML...
<table><tr><td>
<div id="object1" style="position:absolute; left:10px; top:60px; width:173px; height:164px; z-index:2; visibility:visible">
<p><a href="news.htm" target="_top" onMouseOut="hilite('news','news1');" onMouseOver="hilite('news','news2');"><img name="news" src="../pics/layout/bnews.gif" width="152" height="29"></a>
</div>
</td></tr></table>...und in der Script Datei:
function hilite(bild,bildname) {
if (document.all) {
document.images[bild].src = eval(bildname+".src");
}
else {
if (document.layers) {
document.layers["object1"].document.images[bild].src = eval( bildname + ".src" );
}}}Diese Funktion unterscheidet zwischen IE und NS, allerdings erscheint im NS immer noch ein JavaScript-Fehler:
"document.layers.object1.document.images[bild] has no properties."Ich glaube ich bin zu doof für JavaScript. Ich denke ich werd erstmal den NS neu installieren. Vielleicht gehts dann, oder hab ich was falsch gemacht?
MfG, Martin
-
-
-