Tobias Gebauer: map legen auf onmouseover-grafik

Ich möchte gerne die nach befahren der Grafik geöffnete zweite Grafik mappen und nicht einen Link definieren sondern mehrere.....ist das überhaupt möglich????

  1. Ich möchte gerne die nach befahren der Grafik geöffnete zweite Grafik mappen und nicht einen Link definieren sondern mehrere.....ist das überhaupt möglich????

    Das hat mich die letzten ungefähr vier Monate gekostet!!! Damit du nicht die gleichen Probleme hast wie ich, schau doch mal auf meine Seite.

    1. Ich möchte gerne die nach befahren der Grafik geöffnete zweite Grafik mappen und nicht einen Link definieren sondern mehrere.....ist das überhaupt möglich????

      Das hat mich die letzten ungefähr vier Monate gekostet!!! Damit du nicht die gleichen Probleme hast wie ich, schau doch mal auf meine Seite.

      Gerne,aber wie geht das konkret!!!!

      1. Gerne,aber wie geht das konkret!!!!

        Das ganze läuft im Prinzip so ab:
        1. Du definierst ein zwei Arrays, einen mit den Bildern in "geschlossenem" Zustand, einen anderen mit den "geöffneten" Bildern.

        2. Du definierst für die Bilder jeweils Imagemaps, die festlegen bei welchen Koordinaten welcher Link hinterlegt sein soll und die das Umschalten der Bilder regeln.

        3. Dann definierst du eine Tabelle, legst die zugeklappten Bilder rein und referenzierst die entsprechende Imagemap.

        Soweit das Prinzip. Wie es genau geht, kannst du sehen, wenn du den Quellcode auf meiner Seite anschaust.

        Flo

        1. Gerne,aber wie geht das konkret!!!!

          Das ganze läuft im Prinzip so ab:

          1. Du definierst ein zwei Arrays, einen mit den Bildern in "geschlossenem" Zustand, einen anderen mit den "geöffneten" Bildern.

          2. Du definierst für die Bilder jeweils Imagemaps, die festlegen bei welchen Koordinaten welcher Link hinterlegt sein soll und die das Umschalten der Bilder regeln.

          3. Dann definierst du eine Tabelle, legst die zugeklappten Bilder rein und referenzierst die entsprechende Imagemap.

          Soweit das Prinzip. Wie es genau geht, kannst du sehen, wenn du den Quellcode auf meiner Seite anschaust.

          Flo

          HOFFENTLCH RAFFE ICH DAS!!!!!!

          1. HOFFENTLCH RAFFE ICH DAS!!!!!!

            Bestimmt! Und wenn nicht, kannst du auch gerne wieder Fragen zu einzelnen Punkten stellen. Nur kann ich dir jetzt nicht die komplette Seite erklären.

            Flo

            1. HOFFENTLCH RAFFE ICH DAS!!!!!!

              Bestimmt! Und wenn nicht, kannst du auch gerne wieder Fragen zu einzelnen Punkten stellen. Nur kann ich dir jetzt nicht die komplette Seite erklären.

              Flo

              Schon klar, danke, ich komme heute bestimmt nioch drauf zurück.....

              1. HOFFENTLCH RAFFE ICH DAS!!!!!!

                Bestimmt! Und wenn nicht, kannst du auch gerne wieder Fragen zu einzelnen Punkten stellen. Nur kann ich dir jetzt nicht die komplette Seite erklären.

                Flo

                Schon klar, danke, ich komme heute bestimmt nioch drauf zurück.....

                Gibt es denn nicht eine verständlichere Lösung (ich tu mich so schwer)!!!!!

                1. Gibt es denn nicht eine verständlichere Lösung (ich tu mich so schwer)!!!!!

                  Mit welchen Browser soll es denn laufen? Ich hatte eine einfachere Lösung, aber die hatte diverse Probleme mit NS bzw. z.T. IE4. Wenn du mal die Threads der letzten 4 Monate durchgehen würdest, könntest du dir den ganzen Leidensweg mal anschauen.
                  Deshalb: Wenn das ganze nur mit IE5 laufen soll, kein Problem: Nimm Dreamweaver 2 und die eingebaute Rollover-Funktion. Ansonsten musst du da durch!!!

                  Flo

                  1. Danke, danke, danke......ich hab es geschafft, war zwar erst ein wenig unübersichtlich, doch nach 3 Stunden rumprobieren hab ich es doch noch hinbekommen....Hut ab vor Deinem Quellcode....stolze Leistung...war wie maßgeschneidert für mich.....nochmals DANKE

                  2. Scheisse, leider funktioniert meine Version nicht mit Netscape....kannst Du mal reinsehen:

                    <html>

                    <head>
                    <title></title>
                    <base target="Inhalt">
                    <script LANGUAGE="JavaScript"><!--

                    var globalNum = null;

                    if (document.images){

                    document.write('<MAP NAME="weinshop.map">');
                    document.write('<area shape="rect" coords="0,20,60,35" href="Inhalte/JumpToGlossar.htm" onMouseOver="msover(0)" onMouseOut="msout(0)" TARGET=_top>');
                    document.write('<area shape="rect" coords="0,0,412,19" " onMouseOver="msover(0)" onMouseOut="msout(0)" TARGET=_top>');

                    }

                    if (document.images)
                    {

                    // Anzahl vorhergehender Bilder (die nichts mit den Rollovers zu tun haben:

                    n = 0;
                        
                      // Anti-flicker array
                      
                        onState = new MakeArray(6);
                      
                      // Bilderstatus array
                      
                            offHomeNav = new MakeImgarray(6);
                           onHomeNav = new MakeImgarray(6);

                    // home navigation, aus Zustaende

                    offHomeNav[0].src = "menueleiste111.jpg";
                                
                      
                       // home navigation, an Zustaende

                    onHomeNav[0].src = "menueleiste112.jpg";
                                
                    }

                    function MakeImgarray(n) {
                    this.length = n;
                    for (var i = 0; i<=n; i++) {

                    this[i] = new Image();
                      }
                    }

                    function MakeArray(n) {
                    this.length = n;
                    for (var i = 0; i<=n; i++) {

                    this[i] = 0;
                      }
                    }

                    function msover(num) {
                    if (document.images) {
                      onState[num] = 1;
                      if (onHomeNav[num].src != "") {
                       document.images[num+n].src = onHomeNav[num].src;
                       }
                      }
                    }

                    function msout(num) {
                    if (document.images) {
                      onState[num] = 0;
                      globalNum = num;
                      if (offHomeNav[num].src != "") {
                       setTimeout('if (!onState[globalNum]) document.images[globalNum+n].src = offHomeNav[globalNum].src',1);
                       }
                      }
                    }

                    //--></script>
                    </head>

                    <body background="images/Frameecke331.JPG">
                    <div align="right">

                    <table border="0" cellpadding="0" cellspacing="0" width="70%">
                      <tr>
                        <td width="50%"></td>
                        <td width="50%"><img border="0" height="36" src="menueleiste111.jpg"
                        useMap="#weinshop.map" width="413"></td>
                      </tr>
                    </table>
                    </div>
                    </body>
                    </html>

                    1. Scheisse, leider funktioniert meine Version nicht mit Netscape....kannst Du mal reinsehen:

                      // Anti-flicker array
                        
                          onState = new MakeArray(6);
                        
                        // Bilderstatus array
                        
                              offHomeNav = new MakeImgarray(6);
                             onHomeNav = new MakeImgarray(6);

                      So auf den ersten Blick würde ich sagen, mach mal diesen Part so:

                      »»   // Anti-flicker array
                      »»  
                      »»     onState = new MakeArray(1);
                      »»    
                      »»   // Bilderstatus array
                      »»  
                      »»         offHomeNav = new MakeImgarray(1);
                      »»        onHomeNav = new MakeImgarray(1);

                      ...weil du ja nur ein Bild hast zum Umschalten.
                      Wenn du z.B. 4 Bilder hast, must du den Array 4 gross machen etc.

                      1. Habs probiert...aber auch bei dem array von der Länge 1 tut sich gar nichts im netscape......:
                        <html>

                        <head>
                        <title></title>
                        <base target="Inhalt">
                        <script LANGUAGE="JavaScript"><!--

                        var globalNum = null;

                        if (document.images){

                        document.write('<MAP NAME="weinshop.map">');
                        document.write('<area shape="rect" coords="0,20,60,35" href="Inhalte/JumpToGlossar.htm" onMouseOver="msover(0)" onMouseOut="msout(0)" TARGET=_top>');
                        document.write('<area shape="rect" coords="0,0,412,19" " onMouseOver="msover(0)" onMouseOut="msout(0)" TARGET=_top>');

                        }
                        else{

                        document.write('<MAP NAME="about.map">');
                        document.write('<AREA SHAPE=RECT COORDS="0,44,89,72" HREF="about/about.htm" onMouseOver="msover(0)" onMouseOut="msout(0)" >');
                        document.write('</MAP>');

                        }

                        if (document.images)
                        {

                        // Anzahl vorhergehender Bilder (die nichts mit den Rollovers zu tun haben:

                        n = 0;
                            
                          // Anti-flicker array
                          
                            onState = new MakeArray(1);
                          
                          // Bilderstatus array
                          
                                offHomeNav = new MakeImgarray(1);
                               onHomeNav = new MakeImgarray(1);

                        // home navigation, aus Zustaende

                        offHomeNav[0].src = "menueleiste111.jpg";
                                    
                          
                           // home navigation, an Zustaende

                        onHomeNav[0].src = "menueleiste112.jpg";
                                    
                        }

                        function MakeImgarray(n) {
                        this.length = n;
                        for (var i = 0; i<=n; i++) {

                        this[i] = new Image();
                          }
                        }

                        function MakeArray(n) {
                        this.length = n;
                        for (var i = 0; i<=n; i++) {

                        this[i] = 0;
                          }
                        }

                        function msover(num) {
                        if (document.images) {
                          onState[num] = 1;
                          if (onHomeNav[num].src != "") {
                           document.images[num+n].src = onHomeNav[num].src;
                           }
                          }
                        }

                        function msout(num) {
                        if (document.images) {
                          onState[num] = 0;
                          globalNum = num;
                          if (offHomeNav[num].src != "") {
                           setTimeout('if (!onState[globalNum]) document.images[globalNum+n].src = offHomeNav[globalNum].src',1);
                           }
                          }
                        }

                        //--></script>
                        </head>

                        <body background="images/Frameecke331.JPG">
                        <div align="right">

                        <table border="0" cellpadding="0" cellspacing="0" width="70%">
                          <tr>
                            <td width="50%"></td>
                            <td width="50%"><img border="0" height="36" src="menueleiste111.jpg"
                            useMap="#weinshop.map" width="413"></td>
                          </tr>
                        </table>
                        </div>
                        </body>
                        </html>

                        »»  
                        »»         offHomeNav = new MakeImgarray(1);
                        »»        onHomeNav = new MakeImgarray(1);

                        ...weil du ja nur ein Bild hast zum Umschalten.
                        Wenn du z.B. 4 Bilder hast, must du den Array 4 gross machen etc.

                      2. ach ja, spielt es vielleicht eine rolle, daß sich das bei mir alles in einem Frame abspielt...?

                        1. ach ja, spielt es vielleicht eine rolle, daß sich das bei mir alles in einem Frame abspielt...?

                          Kannst du jetzt bitte mal endlich aufhoeren mit diesem Endloslaber-Thread und http://www.teamone.de/selfaktuell/self_forum/22570.html lesen? Danke.

                          Stefan Muenz

                  3. Wäre echt schön, wenn Du mir bei der letzten Hürde auch noch helfen könntest-----

            2. HOFFENTLCH RAFFE ICH DAS!!!!!!

              Bestimmt! Und wenn nicht, kannst du auch gerne wieder Fragen zu einzelnen Punkten stellen. Nur kann ich dir jetzt nicht die komplette Seite erklären.

              Flo

              Vielleicht kannst Du mir ein kleines einfaches Beispiel an Hand einer Frafik erläutern, die sich bei überfahren mit der Maus ändert und zwei links bietet....wäre sehr nett von Dir....Danke

              1. Hallo Tobias,

                Vielleicht kannst Du mir ein kleines einfaches Beispiel an Hand einer Frafik erläutern, die sich bei überfahren mit der Maus ändert und zwei links bietet....wäre sehr nett von Dir....Danke

                schau auch mal nach in:
                <../../tcgh.htm#a1>
                da hat Stefan das Grundlagenmäßig gut ausgearbeitet.

                Klaus

              2. Vielleicht kannst Du mir ein kleines einfaches Beispiel an Hand einer Frafik erläutern, die sich bei überfahren mit der Maus ändert und zwei links bietet....wäre sehr nett von Dir....Danke

                Also...ich habe jetzt mal eine Minimalversion meiner Seite zusammengebastelt. Vielleicht kannst du jetzt leichter sehen, wie das ganze funktioniert:

                <HTML>
                <HEAD>
                <TITLE>TÜV</TITLE>

                <SCRIPT LANGUAGE="JavaScript"><!--

                var globalNum = null;

                document.write('<MAP NAME="about.map">');
                document.write('<area shape="rect" coords="0,129,89,150" href="Inhalte/JumpToGlossar.htm" onMouseOver="msover(0)" onMouseOut="msout(0)" TARGET=_top>');
                document.write('<area shape="rect" coords="0,108,89,128" href="Inhalte/JumpToWebSite.htm" onMouseOver="msover(0)" onMouseOut="msout(0)" TARGET=_top>');
                document.write('<area shape="rect" coords="0,72,89,108" href="Inhalte/JumpToNiederlnatint.htm" onMouseOver="msover(0)" onMouseOut="msout(0)" TARGET=_top>');
                document.write('<area shape="rect" coords="0,44,89,72" href="Inhalte/JumpToWirueberuns.htm" onMouseOver="msover(0)" onMouseOut="msout(0)" TARGET=_top>');
                document.write('</MAP>');

                // Anzahl vorhergehender Bilder (die nichts mit den Rollovers zu tun haben:

                n = 0;
                    
                  // Anti-flicker array
                  
                    onState = new MakeArray(1);
                  
                  // Bilderstatus array
                  
                        offHomeNav = new MakeImgarray(1);
                       onHomeNav = new MakeImgarray(1);

                // home navigation, aus Zustaende

                offHomeNav[0].src = "Bilder/rollovers/aboutoff.gif";
                  
                   // home navigation, an Zustaende

                onHomeNav[0].src = "Bilder/rollovers/abouton.gif";

                function MakeImgarray(n) {
                this.length = n;
                for (var i = 0; i<=n; i++) {

                this[i] = new Image();
                  }
                }

                function MakeArray(n) {
                this.length = n;
                for (var i = 0; i<=n; i++) {

                this[i] = 0;
                  }
                }

                function msover(num) {
                if (document.images) {
                  onState[num] = 1;
                  if (onHomeNav[num].src != "") {
                   document.images[num+n].src = onHomeNav[num].src;
                   }
                  }
                }

                function msout(num) {
                if (document.images) {
                  onState[num] = 0;
                  globalNum = num;
                  if (offHomeNav[num].src != "") {
                   setTimeout('if (!onState[globalNum]) document.images[globalNum+n].src = offHomeNav[globalNum].src',1);
                   }
                  }
                }

                //--></SCRIPT>

                </HEAD>

                <BODY BGCOLOR="#b7b7d4" >
                <TABLE BORDER="0" CELLPADDING="0" CELLSPACING="0" WIDTH="718">
                  <TR VALIGN=top>
                    <TD width="116"><IMG border=0 height=388 src="Bilder/rollovers/aboutoff.gif" useMap=#about.map width=91 ></TD>
                </TR>
                </TABLE>
                <BR>
                <BR>
                <br>
                </BODY></HTML>

            3. warum:

              else{

              document.write('<MAP NAME="about.map">');
              document.write('<AREA SHAPE=RECT COORDS="0,44,89,72" HREF="about/about.htm" onMouseOver="msover(0)" onMouseOut="msout(0)" >');
              document.write('</MAP>');

              ?

              1. warum:

                else{

                document.write('<MAP NAME="about.map">');
                document.write('<AREA SHAPE=RECT COORDS="0,44,89,72" HREF="about/about.htm" onMouseOver="msover(0)" onMouseOut="msout(0)" >');
                document.write('</MAP>');

                ?

                Das ist für die Browser, die document.images nicht verstehen. Wenn du für 4+ Browser entwickelst, kannst du das ganze if...else weglassen

  2. Hallo Tobias,

    Ich möchte gerne die nach befahren der Grafik geöffnete zweite Grafik mappen...

    Hmm, das verstehe ich noch nicht so ganz.
    Im Prinzip geht das, ich vermute aber, daß Dir die zweite Grafik zuklappt bevor
    Du dort angekommen bist und dann ist wohl nichts mehr.
    JavaScript bietet Dir aber auch da Möglichkeiten.

    ...und nicht einen Link definieren sondern mehrere.....ist das überhaupt möglich????

    MAP ist schon das Zauberwort um mehrere Links auf einem Bild zu verteilen.
    Wenn Du allerdings mehrere Links in einem Anker einbauen möchtest, das
    kann nicht gut gehen. Der Browser wird nur den ersten befolgen können und weitere
    höchstens mit einer Fehlermeldung quittieren.
    Du kannst ja an einer Kreuzung auch nicht gleichzeitig links und rechs abbiegen.

    Klaus

    1. Hallo Tobias,

      Ich möchte gerne die nach befahren der Grafik geöffnete zweite Grafik mappen...

      Hmm, das verstehe ich noch nicht so ganz.
      Im Prinzip geht das, ich vermute aber, daß Dir die zweite Grafik zuklappt bevor
      Du dort angekommen bist und dann ist wohl nichts mehr.
      JavaScript bietet Dir aber auch da Möglichkeiten.

      ...und nicht einen Link definieren sondern mehrere.....ist das überhaupt möglich????

      MAP ist schon das Zauberwort um mehrere Links auf einem Bild zu verteilen.
      Wenn Du allerdings mehrere Links in einem Anker einbauen möchtest, das
      kann nicht gut gehen. Der Browser wird nur den ersten befolgen können und weitere
      höchstens mit einer Fehlermeldung quittieren.
      Du kannst ja an einer Kreuzung auch nicht gleichzeitig links und rechs abbiegen.

      Klaus

      Kannst Du es mir erklären????

      1. Hallo Tobias,

        den Klappkram handelst Du ja mit Flo ab, der hat das
        ja unter Schmerzen nun gut hingekriegt.

        Kannst Du es mir erklären????

        Ich möchte gerne die nach befahren der Grafik geöffnete zweite Grafik mappen...

        Im Prinzip geht das, ich vermute aber, daß Dir die zweite Grafik zuklappt bevor
        Du dort angekommen bist und dann ist wohl nichts mehr.

        Das habe ich folgendermaßen verstanden:

        Bild_1       Bild_2
        +----------+ +----------+
                             
        maus               
                             
        +----------+ +----------+

        Wenn Du über die erste Grafik fährst und diese Dir eine zweite öffnet
        die Du mit einer MAP belegst, dann geht Bild_2 üblicherweise zu wenn
        Du Bild_1 verläßt.
        Die MAP bleibt aber normalerweise aktiv, unabhängig davon was für einen
        Inhalt der Raum von Bild_2 hat. Das gilt genauso wenn beide Bilder den
        gleichen Raum einnehmen.

        Wenn beide Bilder den gleichen Raum einnehmen und die Links sollen
        je nach Bildinhalt unterschiedlich sein, dann mußt Du in der MAP
        taube "#"-Links vorsehen und in den AREAs onClick-Events plus
        JavaScriptfunktionen (im HEAD) unterbringen.

        Aus Deiner Frage war mir nicht klar geworden was Du beabsichigst.

        ...und nicht einen Link definieren sondern mehrere.....ist das überhaupt möglich????
        Wenn Du allerdings mehrere Links in einem Anker einbauen möchtest, ...

        <a href="link_1;link_2" ...
        geht nicht, das ist wie gleichzeitig links und rechs abbiegen.
        Mehrere JS-Funktionen kannst Du allerdings schon aufrufen.
        MAPs bieten Dir aber die Möglichkeit bestimmten Bildbereichen unterschiedliche
        Links zuzuordnen. Gleiche Links dürfen sich auch überlagern, zB Kreis plus Rechteck,
        Bereiche die zu unterschiedlichen Links führen sollten das nicht tun.

        Klaus

        PS: > Gibt es denn nicht eine verständlichere Lösung (ich tu mich so schwer)!!!!!
        Vielleicht, mir scheint es aber auch, daß Du Deine Fragestellung selbst noch nicht
        so klar hast und wie sollen wir das dann raffen?
        Laß uns versuchen die Fragestellung erstmal einzugrenzen und klarzustellen,
        dann kommen vermutlich auch die Ideen.

    2. Ich möchte gerne die nach befahren der Grafik geöffnete zweite Grafik mappen...

      Hmm, das verstehe ich noch nicht so ganz.
      Im Prinzip geht das, ich vermute aber, daß Dir die zweite Grafik zuklappt bevor
      Du dort angekommen bist und dann ist wohl nichts mehr.
      JavaScript bietet Dir aber auch da Möglichkeiten.

      Hmmm...ich verstehe das etwas anders: Möchte Tobias nicht so etwas wie ich gemacht habe? Er sollte das mal etwas genauer formulieren.

  3. WARNUNG!

    Dies ist mal wieder so ein Laber-Thread mit Chat-Charakter von der Sorte, die neulich zur Forumsschliessung fuehrte. Wollte ich nur mal gesagt haben und bitte alle, die sich hier im Minutentakt mit Fullquotes ihrer Vorgaenger und einsilbigen Antworten hervortun, mal die Forums-FAQ zu lesen und auf etwas mehr Qualitaet bei den Postings zu achten. Danke.

    viele Gruesse
      Stefan Muenz