Dietmar: 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!:-)

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

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

      1. hi..
        ich schrieb
        window.document.doof._document_.images
        nicht  nur
        window.document.doof.images

        dann funktionierts..
        bye...

        1. hi..
          ich schrieb
          window.document.doof._document_.images
          nicht  nur
          window.document.doof.images

          dann 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>

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

          2. Hallo,

            hi..
            ich schrieb
            window.document.doof._document_.images
            nicht  nur
            window.document.doof.images

            dann 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

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

  3. Schaue mal in diesen Thread
    http://www.teamone.de/selfaktuell/self_forum/22422.html
    da wird das Thema komplett behandelt.

    Viele Grüße

    Antje

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