Armin: Image Map austauschen mit JavaScript

Tach zusammen,

ich habe mehrere Bilder mit dazugehörigen verschiedenen Image Maps.

Die Bilder werden mit einem Rollover getauscht. Wie kann ich erreichen das fuer das jeweilige aktuelle Bild auch die entsprechende Image Map aktiviert wird ?

Ich bin Euch allen für jeden Tip dankbar !

:-) Armin

  1. Hi,

    Wie kann ich erreichen das fuer das jeweilige aktuelle Bild auch die entsprechende Image Map aktiviert wird ?

    Lösung 1.: Baue _eine_ Image-Map, die - abhängig vom aktuellen Bild - zur richtigen Stelle verlinkt.

    Lösung 2.: Arbeite mit DHTML.

    Beide Wege sind, wie bereits Deine Vorbedingung, von einer clientseitigen Technik abhängig, die nicht vorausgesetzt werden kann. Ich empfehle Dir dringend, Dein Konzept zu überdenken.

    Cheatah

    1. Hi,

      Hallo Cheatah,

      danke fuer Deine schnelle Antwort.

      Wie kann ich erreichen das fuer das jeweilige aktuelle Bild auch die entsprechende Image Map aktiviert wird ?

      Lösung 1.: Baue _eine_ Image-Map, die - abhängig vom aktuellen Bild - zur richtigen Stelle verlinkt.

      Ist das nicht dasselbe ? Wenn Du mir sagen kannst wie ich dynamisch die shape und coords attribute aendern kann dann krieg ich das hin.
      Ansonsten habe ich ja auf jedem Bild Bereiche die verlinken obwohl dort kein link seine soll.

      Lösung 2.: Arbeite mit DHTML.

      Wuerde ich auch machen wenn ich nur wuesste wie das geht. Ehrlich gesacht ist es mir bis jetzt nicht gelungen eine klare Aussage zu bekommen was DHTML eigentlich ist. Soweit ist das fuer mich HTML mit allen moeglichen Dynamischen Zusaetzen wie JavaScript, CSS, PHP usw.

      Beide Wege sind, wie bereits Deine Vorbedingung, von einer clientseitigen Technik abhängig, die nicht vorausgesetzt werden kann. Ich empfehle Dir dringend, Dein Konzept zu überdenken

      Cheatah

      Danke
      :-) Armin

      1. Hallo,

        Ist das nicht dasselbe ? Wenn Du mir sagen kannst wie ich dynamisch die shape und coords attribute aendern kann dann krieg ich das hin.

        document.getElementById("areaID").setAttribute("shape","circle");
        document.getElementById("areaID").setAttribute("coords","50,50,20");

        Alternativer Zugriff ueber document.getElementsByTagName("area")[0 bis n-1].setAttribute(...);

        Tauschen der gesamten Map:
        bildobjekt.useMap="#neuemap";
        oder
        bildobjekt.setAttribute("usemap","#neuemap");

        MfG, Thomas

        1. Tach Thomas,

          ich hatte mir ja schon hier im SelfHTML folgende Loesungsansaetze gesucht.
          <a href="javascript:alert(document.getElementById('Bild').useMap)"> Liest active ImageMap  </a>
          <a href="javascript:document.getElementById('Bild').useMap='#empty'"> Try to set Image Map to #empty  </a>
          <a href="javascript:document.getElementsByName('ROImail')[0].areas[0].coords = '0,0,0,0'"> Try to set area to Zeros </a>
          <a href="javascript:document.getElementsByName('ROImail')[0].areas[0].coords = '100,70,205,80'">Try to set area on </a>

          Was ich nicht gefunden hatte war die setAttribute Methode.

          document.getElementById("areaID").setAttribute("shape","circle");
          document.getElementById"areaID").setAttribute

          "coords","50,50,20");

          Alternativer Zugriff ueber document.getElementsByTagName("area")[0 bis n-1].setAttribute(...);

          Tauschen der gesamten Map:
          bildobjekt.useMap="#neuemap";
          oder
          bildobjekt.setAttribute("usemap","#neuemap");

          Ich Danke Dir in verschärfter Form auch im Namen meiner Eltern ;-) !!!

          :-) Armin

      2. Hi,

        Lösung 1.: Baue _eine_ Image-Map, die - abhängig vom aktuellen Bild - zur richtigen Stelle verlinkt.

        Ist das nicht dasselbe ? Wenn Du mir sagen kannst wie ich dynamisch die shape und coords attribute aendern kann dann krieg ich das hin.

        genau das ist es ja: Die Image-Map ist hinreichend klein zerschnitten, um _gleichzeitig_ alle einzelnen Image-Maps zu beinhalten. Die Links müssen dann dummerweise über JavaScript gehen.

        Lösung 2.: Arbeite mit DHTML.
        Wuerde ich auch machen wenn ich nur wuesste wie das geht.

        Siehe SelfHTML :-) Nein, das ist nicht einfach; nein, das lässt sich nicht in einem Posting erklären. Erlerne die Grundlagen, arbeite anschließend(!) problemorientiert.

        Ehrlich gesacht ist es mir bis jetzt nicht gelungen eine klare Aussage zu bekommen was DHTML eigentlich ist.

        DHTML = HTML + CSS + JavaScript

        Soweit ist das fuer mich HTML mit allen moeglichen Dynamischen Zusaetzen wie JavaScript, CSS, PHP usw.

        PHP ist serverseitig. Was beim Client ankommt, hat damit dann nicht das geringste mehr zu tun - was überbleibt, sind HTML, JavaScript und CSS. Und damit liegst Du goldrichtig :-)

        Cheatah

        1. Hallo erstmal,

          Lösung 1.: Baue _eine_ Image-Map, die - abhängig vom aktuellen Bild - zur richtigen Stelle verlinkt.

          Ist das nicht dasselbe ? Wenn Du mir sagen kannst wie ich dynamisch die shape und coords attribute aendern kann dann krieg ich das hin.

          genau das ist es ja: Die Image-Map ist hinreichend klein zerschnitten, um _gleichzeitig_ alle einzelnen Image-Maps zu beinhalten. Die Links müssen dann dummerweise über JavaScript gehen.

          Mächtig kompliziert für meinen Zweck.

          Lösung 2.: Arbeite mit DHTML.
          Wuerde ich auch machen wenn ich nur wuesste wie das geht.

          Siehe SelfHTML :-) Nein, das ist nicht einfach; nein, das lässt sich nicht in einem Posting erklären. Erlerne die Grundlagen, arbeite anschließend(!) problemorientiert.

          Das mache ich ehrlich gesagt sowieso schon oft.

          Ehrlich gesacht ist es mir bis jetzt nicht gelungen eine klare Aussage zu bekommen was DHTML eigentlich ist.

          DHTML = HTML + CSS + JavaScript

          Soweit ist das fuer mich HTML mit allen moeglichen Dynamischen Zusaetzen wie JavaScript, CSS, PHP usw.

          PHP ist serverseitig. Was beim Client ankommt, hat damit dann nicht das geringste mehr zu tun - was überbleibt, sind HTML, JavaScript und CSS. Und damit liegst Du goldrichtig :-)

          Na dann doch wieder JavaScript.

          Thomas hat mir im naechsten posting die Loesung geben koennen.

          Ich danke Dir für Deine Tips und das Du Dir die Zeit genommen hast Dich mit meinem Problem zu beschäftigen.

          So long
          :-) Armin