nicht angemeldet
Dynamische grafische Buttens und absolute Positionierung mit «DIV»
Leider habe ich auch Probleme mit dem <DIV>-Tag. Transistor kämpft auch damit.
Der Code (Auszug):
<HTML>
<HEAD>
<TITLE>C</TITLE>
</HEAD>
<BODY>
<SCRIPT LANGUAGE="JavaScript">
<!--
Normal1 = new Image();
Normal1.src = "mgcs_3c.gif";
Zeiger1 = new Image();
Zeiger1.src = "mgcs_3cx.gif";
function Bildwechsel(Bildnr,Bildobjekt)
{
window.document.images[Bildnr].src=Bildobjekt.src;
}
//-->
</SCRIPT>
<DIV STYLE="POSITION:ABSOLUTE; TOP:185px; LEFT:5px; WIDTH:159px; Z-INDEX:5">
<A HREF="test1.html" onMouseOver="Bildwechsel(4,Zeiger2)" onMouseOut="Bildwechsel(4,Normal2)">
<IMG SRC="mgcs_4c.gif" ALT="mgcs_4c.gif (1'549 Bytes)" BORDER="0" WIDTH="159" HEIGHT="71">
</A></DIV>
</BODY>
</HTML>
Die Positionierung war notwendig geworden, weil sich Grafiken überdecken sollten.
Beim IE geht alles wunderbar. Netscape zeigt die Wechselgrafik nicht an.
Wo liegt das Problem?
Danke für die Hilfe!:-)
-
Hi...
das Problem dabei ist, dass Netscape (ich benutz den IE überhaupt nicht, also keine ahnung ob das folgende auch mit dem ie funktioniert..) für jedes DIV ein neues document anfängt...
um mit JavaScript auf das dingen zugreifen zu können, sollte es erst mal eine ID haben:
<div id="doof" style="usw..">nun kannst du im script das document dieser id ansprechen, also
window.document.doof.document.images[bildnr]
diese info hab ich von http://dhtml.seite.net, die ich bei solchen sachen gerne empfehle ;)
ich bin mir selber nicht ganz sicher ob es stimmt, was ich da eben erzählt hab, aber auf jeden fall funktionierts mit netscape ^_^
bis denne
der gero
-
Hi...
das Problem dabei ist, dass Netscape (ich benutz den IE überhaupt nicht, also keine ahnung ob das folgende auch mit dem ie funktioniert..) für jedes DIV ein neues document anfängt...
um mit JavaScript auf das dingen zugreifen zu können, sollte es erst mal eine ID haben:
<div id="doof" style="usw..">nun kannst du im script das document dieser id ansprechen, also
window.document.doof.document.images[bildnr]
diese info hab ich von http://dhtml.seite.net, die ich bei solchen sachen gerne empfehle ;)
ich bin mir selber nicht ganz sicher ob es stimmt, was ich da eben erzählt hab, aber auf jeden fall funktionierts mit netscape ^_^
bis denne
der gero
Hab ich versucht, geht nicht!
Meldung: "window.document.doof.images has no properties."
Auch mit dem LAYER-Tag geht es nicht.
Irgendwie muß es mit der absoluten Positionierung zusammenhängen.
D-
hi..
ich schrieb
window.document.doof._document_.images
nicht nur
window.document.doof.imagesdann funktionierts..
bye...-
hi..
ich schrieb
window.document.doof._document_.images
nicht nur
window.document.doof.imagesdann funktionierts..
bye...Du hast natürlich recht!
Aber vielleicht bin ich ja doof?
Schon wieder die Meldung:window.document.doof.document.images[Bildnr] has no properties.
Jetzt der ganze Code in ursprünglicher Form:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 3.2//EN">
<HTML>
<HEAD>
<TITLE>M</TITLE>
<META NAME="generator" CONTENT="WebPage Composer 2">
</HEAD>
<BODY TEXT="#000000" Background="hinterg.jpg" LINK="#0000FF" VLINK="#000080" ALINK="#C0C0C0"><DIV STYLE="POSITION:ABSOLUTE; TOP:0px; LEFT:0px; WIDTH:570px; Z-INDEX:2">
<IMG SRC="mgcs_1a.jpg" ALT="mgcs_1.jpg (6'797 Bytes)" BORDER="0" WIDTH="567" HEIGHT="81"></DIV>
<DIV STYLE="POSITION:ABSOLUTE; TOP:94px; LEFT:165px; WIDTH:458px; Z-INDEX:1">
<IMG SRC="headlinie.jpg" ALT="headlinie.jpg (1'572 Bytes)" BORDER="0" WIDTH="508" HEIGHT="60"></DIV>
<DIV STYLE="POSITION:ABSOLUTE; TOP:81px; LEFT:-1px; WIDTH:146px">
<SPACER TYPE=BLOCK WIDTH="1" HEIGHT="1" ALIGN="LEFT"><IMG SRC="mgcs_2.jpg" ALT="mgcs_2.jpg (686 Bytes)"
BORDER="0" WIDTH="146" HEIGHT="49"></DIV>
<SCRIPT LANGUAGE="JavaScript">
<!--
Normal1 = new Image();
Normal1.src = "mgcs_3c.gif";
Zeiger1 = new Image();
Zeiger1.src = "mgcs_3cx.gif";
Normal2 = new Image();
Normal2.src = "mgcs_4c.gif";
Zeiger2 = new Image();
Zeiger2.src = "mgcs_4cx.gif";
Normal3 = new Image();
Normal3.src = "mgcs_5c.gif";
Zeiger3 = new Image();
Zeiger3.src = "mgcs_5cx.gif";
Normal4 = new Image();
Normal4.src = "mgcs_6c.gif";
Zeiger4 = new Image();
Zeiger4.src = "mgcs_6cx.gif";
Normal5 = new Image();
Normal5.src = "mgcs_7c.gif";
Zeiger5 = new Image();
Zeiger5.src = "mgcs_7cx.gif";
Normal6 = new Image();
Normal6.src = "mgcs_8c.gif";
Zeiger6 = new Image();
Zeiger6.src = "mgcs_8cx.gif";function Bildwechsel(Bildnr,Bildobjekt)
{
window.document.images[Bildnr].src=Bildobjekt.src;
}
//-->
</SCRIPT><DIV STYLE="POSITION:ABSOLUTE; TOP:130px; LEFT:5px; WIDTH:159px; Z-INDEX:6">
<A HREF="test1.html" onMouseOver="Bildwechsel(3,Zeiger1)" onMouseOut="Bildwechsel(3,Normal1)">
<IMG SRC="mgcs_3c.gif" ALT="mgcs_3c.gif (1'517 Bytes)" BORDER="0" WIDTH="159" HEIGHT="71">
</A></DIV><DIV STYLE="POSITION:ABSOLUTE; TOP:185px; LEFT:5px; WIDTH:159px; Z-INDEX:5">
<A HREF="test1.html" onMouseOver="Bildwechsel(4,Zeiger2)" onMouseOut="Bildwechsel(4,Normal2)">
<IMG SRC="mgcs_4c.gif" ALT="mgcs_4c.gif (1'549 Bytes)" BORDER="0" WIDTH="159" HEIGHT="71">
</A></DIV><DIV STYLE="POSITION:ABSOLUTE; TOP:240px; LEFT:5px; WIDTH:159px; Z-INDEX:4">
<A HREF="test1.html" onMouseOver="Bildwechsel(5,Zeiger3)" onMouseOut="Bildwechsel(5,Normal3)">
<IMG SRC="mgcs_5c.gif" ALT="mgcs_5c.gif (1'549 Bytes)" BORDER="0" WIDTH="159" HEIGHT="71">
</A></DIV><DIV STYLE="POSITION:ABSOLUTE; TOP:295px; LEFT:5px; WIDTH:159px; Z-INDEX:3">
<A HREF="test1.html" onMouseOver="Bildwechsel(6,Zeiger4)" onMouseOut="Bildwechsel(6,Normal4)">
<IMG SRC="mgcs_6c.gif" ALT="mgcs_6c.gif (1'549 Bytes)" BORDER="0" WIDTH="159" HEIGHT="71">
</A></DIV><DIV STYLE="POSITION:ABSOLUTE; TOP:350px; LEFT:5px; WIDTH:159px; Z-INDEX:2">
<A HREF="test1.html" onMouseOver="Bildwechsel(7,Zeiger5)" onMouseOut="Bildwechsel(7,Normal5)">
<IMG SRC="mgcs_7c.gif" ALT="mgcs_7c.gif (1'549 Bytes)" BORDER="0" WIDTH="159" HEIGHT="71">
</A></DIV><DIV STYLE="POSITION:ABSOLUTE; TOP:405px; LEFT:5px; WIDTH:159px; Z-INDEX:1">
<A HREF="test1.html" onMouseOver="Bildwechsel(8,Zeiger6)" onMouseOut="Bildwechsel(8,Normal6)">
<IMG SRC="mgcs_8c.gif" ALT="mgcs_8c.gif (1'549 Bytes)" BORDER="0" WIDTH="159" HEIGHT="71">
</A></DIV></BODY>
</HTML>-
Hallo,
durch Ankes Hilfe (Danke nochmals ;-)) bin ich zu folgender definitiv funktionierenden Lösung gekommen. (Diese Version hat den Vorteil, daß sie beim Explorer UND Navigator funktioniert....)
<html>
<head>
<title>Rollover Lösung</title><script language="JavaScript">
<!--
Normal1 = new Image();
Normal1.src = "bild1.gif";
Highlight1 = new Image();
Highlight1.src = "bild2.gif";function Bildwechsel(Divname,Bildnr,Bildobjekt)
{
if (navigator.appName.substring(0,4) == "Nets")
{document[Divname].document.images[0].src = Bildobjekt.src;}
else
{window.document.images[Bildnr].src = Bildobjekt.src;}
}
//-->
</script>
</head><body >
<!-- hier kommt das auslösende Bild (der Schalter) //-->
<div style="position:absolute; top:50px; left:40px" >
<a href="testzwei.html" onmouseover="Bildwechsel('austauschbild',1,Highlight1)" onmouseout="Bildwechsel('austauschbild',1,Normal1)">
<img src="ausloesebild.gif" height="27" width="125" border="0"></a>
</div><!-- hier kommt das auszutauschende Bild //-->
<div id="austauschbild" style="position:absolute; top:67px; left:274px" >
<IMG SRC="bild1.gif" HEIGHT="113" WIDTH="84">
</div></body>
</html>--------------
Bei dieser Version ist das auslösende Bild (der Schalter) nicht mit den sich abwechselnden Bildern identisch. Die "normale" version dürfte aber dann nicht das Problem sein...dann muß eben der erste Div-Container den Namen bekommen und die Bildnummer muß angepast werden....Die Austauschfunktion wurde um eine dritte zu übergebende Variabel erweitert. Landet die Seite im Navigator, ist der Div-name wichtig, die Image-Nummer ist dann immer auf 0 (Vorausgesetzt, man hat auch nur ein Bild im Div.)
Landet die Seite im Explorer, ist die Bildnummer entscheident, der Div-Name wird nicht gebraucht.....Chräcker
-
Hallo,
hi..
ich schrieb
window.document.doof._document_.images
nicht nur
window.document.doof.imagesdann funktionierts..
bye...Du hast natürlich recht!
Aber vielleicht bin ich ja doof?
Schon wieder die Meldung:window.document.doof.document.images[Bildnr] has no properties.Auch die untere Schreibweise ist nicht korrekt. Das Rätsels Lösung findet sich in einer ausfühlichen Form unter <../../sfarchiv/1999_1/t01931.htm#a8793>.
Viele Grüße
Andreas
-
-
-
-
-
Hallo,
bei NC musst Du so vorgehen:document.layers["ebene0"].document.images...usw
wobei ebene0 die ID="..." des Div Layers ist. Also, die gesamte Objekt-Hirachie abwaerts, dann geht es.
Gruss Joachim
-
Schaue mal in diesen Thread
http://www.teamone.de/selfaktuell/self_forum/22422.html
da wird das Thema komplett behandelt.Viele Grüße
Antje
-
Schaue mal in diesen Thread
http://www.teamone.de/selfaktuell/self_forum/22422.html
da wird das Thema komplett behandelt.Viele Grüße
Antje
Danke Antje!
Nach erster Durchsicht, ist es wohl doch komplizierter als ich dachte.
Das schaffe ich heute nicht mehr.
Gute Nacht und bis bald
Dietmar
-