Thomas Handke: changin Image and Map

SELF-Forum

changin Image and Map

Thomas Handke
– Informationen zu den Bewertungsregeln

High!

Ich habe schon einen Thraed gefunden, der eigentlich meiner Frage entspricht, leider bin ich
(noch) zu dumm, als ob er mir was nützen würde.
http://www.teamone.de/selfhtml/sfarchiv/1999_3/t05945.htm#a28567

ASCI Grafik: "Menu"    :-)

------------------------------------
Punkt-A     Punkt-B     Punkt-C
------------------------------------
Unterpunkt-A1   Unterpunk-A2
------------------------------------

Das ist mein Menu. Fährt man mit der Maus über Punkt-B, ändert sich das Bild in der zweiten
Zeile zu z.B. Unterpunkt B1 B2 und B3. Die zweite Zeile besteht aus nur einem Bild, weil die
einzelnen Unterpunkt nicht gleichlang sind und also nicht übereinander liegen.

Das ganze hab ich mit adope Image Ready zusammengebastelt, und verstehe den JavaScrip
Kochbuchmäßig, so das ich bei allen anderen Seiten ihn nun selber bastle.

Aber so schön wie ich mir das ausgedacht habe, geht es noch gar nicht! :-(

Ich muß ja auch jeweils die ImageMap auswechseln. Ich suche eine Funktion, mit der ich die Maps
über MouseOver;Out ect. genauso wie die Images wechseln kann.

Ich habe in den letzten Wochen schon im Netz gestöbert, aber keine Lösung gefunden. (Ich habe
mir heute auch ein dickes, fettes JavaScript buch gekauft, aber bis ich das gelernt habe, ist
wohl Sommer oder Winter)

Ich liefer gerne noch den JavaScript für das Image wechseln nach, aber ich denke, Ihr kennt Ihn
ja.

In Hoffnung auf eine Lösung und im Vertrauen nicht gedissd zu werden :-)

Beitrag melden
–
Informationen zu den Bewertungsregeln

  1. changin Image and Map

    Antje Hofmann
    – Informationen zu den Bewertungsregeln

    Hallo Thomas,

    Ich muß ja auch jeweils die ImageMap auswechseln. Ich suche eine Funktion, mit der ich die Maps
    über MouseOver;Out ect. genauso wie die Images wechseln kann.

    folgendes Beispiel geht im IE und den NN ab der 4:

    <html>
    <head>

    <script language="JavaScript">
    <!--
      x='<map name="apl">'
    +'<area shape="RECT" coords="21,53,169,95" href="seite1.htm"  onMouseOut="alert('ja');" alt="">'
    +'<area shape="RECT" coords="69,99,116,166" href="seite2.htm" onMouseOut="alert('ja');"  alt="" target="Fensterx">'
    +'</map>';

    y='<map name="apl">'
    +'<area shape="RECT" coords="21,53,169,300" href="seite4.htm"  onMouseOut="alert('nein');" alt="">'
    +'</map>';

    function setImage () {
    if (document.all) document.all.test.innerHTML=x;
    else {
      document.test.document.open();
      document.test.document.write(x+'<img src="cefap_1.gif" width="532" usemap="#apl" height="351" border="0" alt="">');
      document.test.document.close();
      }
    return
    }

    function setImage2 () {
    if (document.all) document.all.test.innerHTML=y;
    else
    {document.test.document.open();
    document.test.document.write(y+'<img src="test.gif" width="532" usemap="#apl" height="351" border="0" alt="">');document.test.document.close(); }
    return
    }

    //-->
    </script>

    </head>
    <body text="#000000" bgcolor="#FFFFFF" link="#FF0000" alink="#FF0000" vlink="#FF0000">

    <div id="test" style="position:absolute;"></div>
    <img src="test.gif" width="532" usemap="#apl" height="351" border="0" alt="">
    <a href="javascript:setImage()">setz</a>

    <a href="javascript:setImage2()">setz</a>

    </body>
    </html>

    das Grundprinzip: Man greift auf das Dokumentenmodell des Navigators zurück. Entscheidend ist, auch das Bild selbst muß dynamisch geschrieben werden.

    Beim IE selbst reicht es die Koordinaten zu ändern. Schaue da mal bei den Eigenschaften von document.all nach.

    Ansonsten, kann man Imagemaps beliebig angeben, solange man Layers verwendet.

    Viele Grüße

    Antje

    Beitrag melden
    –
    Informationen zu den Bewertungsregeln

    1. changin Image and Map

      Thomas Handke
      – Informationen zu den Bewertungsregeln

      Hallo Antje! HIGH Forum.

      Vielen Dank für Deine Antwort.

      Ich sehe mich eher als Designer als Programierer. Als ich vor einem reichlichen Jahr damit angefangen habe, habe ich html in wenigen Tagen über sef-html gelernt. (LOB! LOB! SUPER TUTORIAL) Mich interesiert eher, welche Schrift nehme ich, welche Farben, wie Struckturiere ich logische die Informationene ect.

      Nun brauch ich aus Design gründen aber auch Javascript Kenntnisse. Aber das ist so ungleich kryptischer wie html. (seufz)

      Ich werde Deinen Script in Ruhe durcharbeiten, aber ich vertehe noch zu wenig.

      Eine dumme Frage:

      Ich verfolge (in meiner Naivität) folgenden Ansatz:

      Image Ready hat mir folgenden Script generiert:

      function newImage(arg) {
      if (document.images) {
        rslt = new Image();
        rslt.src = arg;
        return rslt;
      }
      }

      function changeImages() {
      if (document.images && (preloadFlag == true)) {
        for (var i=0; i<changeImages.arguments.length; i+=2) {
         document[changeImages.arguments[i]].src = changeImages.arguments[i+1];
        }
      }
      }

      Wozu die Function newImage da ist, weiß ich nicht (Fehler abfangen???). Die Function changeImage ist die defenition der Funktion, mit der ich dann arbeiten kann:

      z.B.
      <A HREF="Ziele.html" ONMOUSEOVER="changeImages('Punkt1', '../IMG/Punkt.gif', 'Punkt2', '../IMG/Punkt-over.gif', 'Roll', '../IMG/Roll-Punkt2_over.gif'); return true;"
         ONMOUSEOUT="changeImages('Punkt1', '../IMG/Punkt-over.gif', 'Punkt2', '../IMG/Punkt.gif', 'Roll', '../IMG/Roll-Punkt1_over.gif'); return true;"><IMG
         SRC="../IMG/Punkt.gif" WIDTH="34" HEIGHT="25" ALIGN="BOTTOM" BORDER="0" NAME="Punkt2"></A>

      Das vertehe ich und kann nun programieren, onMouseover zeige im Bild mit dem Namen "bla" das Bild "bla2". usw.

      Ich stelle mir eine Funktion changeMap vor. Dann definier ich für jedes Bild eine eigene Map mit Namen des Bildes und kann die Maps mit: changeMap('Punkt1', 'MapPunkt1', .....ect  wechseln.

      Könnte die Function vielleicht so, oder ähnlich, aussehen?

      ACHTUNG! KEIN KLUGER CODE!!!!!!
      function changeMap() {
      if (document.links) {
        for (var i=0; i<changeMap.arguments.length; i+=2) {
         document[changeMap.arguments[i]].src = changeMap.arguments[i+1];
        }
      }
      }
      ACHTUNG! KEIN KLUGER CODE!!!!!!

      Oder ist dieser Ansatz falsch??? (bis jetzt klappt das noch nicht, es bleibt immer die gleich Map)

      Vielen Dank!
      peace
      fusske

      Beitrag melden
      –
      Informationen zu den Bewertungsregeln

      1. changin Image and Map

        Antje Hofmann
        – Informationen zu den Bewertungsregeln

        Hallo Thomas

        Nun brauch ich aus Design gründen aber auch Javascript Kenntnisse. Aber das ist so ungleich kryptischer wie html. (seufz)

        Nun, ich werde dir dabei helfen und mein mittlerweile optimiertes Script erläutern.

        Image Ready hat mir folgenden Script generiert:

        function newImage(arg) {

        »»  if (document.images) {

        rslt = new Image();
          rslt.src = arg;
          return rslt;

        »»  }

        }

        Diese Funktion ladet die Bilder vor. Damit stehen Sie sofort zur Verfügung, wenn Sie gebraucht werden.

        Ich stelle mir eine Funktion changeMap vor. Dann definier ich für jedes Bild eine eigene Map mit Namen des Bildes und kann die Maps mit: changeMap('Punkt1', 'MapPunkt1', .....ect  wechseln.

        Leider geht das wirklich nicht so einfach. Eigentlich ist der komplette Austausch einer Imagemap ein massiver Eingriff ins System. Auch das Workaround ist nur eine Notlösung, die der Netscape Navigator geradeso toleriert. Außerdem wird dabei auch ein vollständig anderer Ansatz als in deiner Vorstellung verfolgt.

        Der Grundgedanke meines Scriptes ist, direkt in die HTML-Datei das ImageMap neu zu erzeugen. Für den Netscape Navigator verwende ich dabei die Eigenschaft, Layer als eigene Dokumente zu behandeln. Siehe dazu auch: <../../tfbe.htm#a6>
        Im MS Internet Explorer nutze ich die Eigenschaft des Allobjektes mittels innerHTML Elementinhalte austauschen zu können.
        <../../tecbba.htm#a10>

        Da du offensichtlich mehrere Imagemaps austauschen willst, habe ich die Funktion variabel gestaltet.

        <html>
        <head>
        <title>ImageMaps wechseln</title>
        <script type="text/javascript">
        <!--
        /*Autor: A.Hofmann, ah@pc-anfaenger.de, Februar 2000*/

        x=new Array();y=new Array(); /*hier definierst du Felder, die die Maps aufnehmen*/

        /*Definition der einzelnen Maps. Jede Map muß vollständig einschließlich des Bildes definiert sein, weitere Maps jeweils mit x[2] usw. anfügen. Die Bezeichnungen der Maps müssen immer verschieden sein. */

        x[0]='<map name="apx0">'
        +'<area shape="RECT" coords="21,53,169,95" href="seite1.htm"  onMouseOut="alert('Variante1 Map1');" alt="">'
        +'<area shape="RECT" coords="69,99,116,146" href="seite2.htm" onMouseOut="alert('Variante1 Map1-Bereich2');"  alt="" target="Fensterx">'
        +'</map><img src="test.gif" width="532" usemap="#apx0" height="151" border="0" alt="">\n';

        x[1]='<map name="apx1">'
        +'<area shape="RECT" coords="21,53,169,150" href="seite4.htm"  onMouseOut="alert('Variante1 Map2');" alt="">'
        +'</map><img src="test2.gif" width="532" usemap="#apx1" height="151" border="0" alt="">';

        y[0]='<map name="apy0">'
        +'<area shape="RECT" coords="21,53,169,95" href="seite1.htm"  onMouseOut="alert('Variante2 Map1');" alt="">'
        +'<area shape="RECT" coords="69,99,116,166" href="seite2.htm" onMouseOut="alert('Variante2 Map1 -Bereich2');"  alt="" target="Fensterx">'
        +'</map><img src="test3.gif" width="532" usemap="#apy0" height="151" border="0" alt="">';

        y[1]='<map name="apy1">'
        +'<area shape="RECT" coords="21,53,169,150" href="seite4.htm"  onMouseOut="alert('Variante2 Map2');" alt="">'
        +'</map><img src="test4.gif" width="532" usemap="#apy1" height="151" border="0" alt="">';

        /* Hier werden die Maps neu geschrieben*/

        function setImageMaps (a)
        { k="";a=self[a];
        for (i=0;i<a.length;i++) k=k+a[i]+"\n"; /*hier wird anhand der Laenge bestimmt, wieviele Maps du benoetigst*/

        if (document.all) document.all.test.innerHTML=k;
        else
        {
          document.test.document.open();
          document.test.document.write(k);
          document.test.document.close();
          }
        return
        }
        //-->
        </script>
        </head>
        <body>
        <!-- Deine Ursprungsmap muß im Div stehen, sonst wird diese nicht gelöscht-->

        <div id="test" style="position:absolute;">
        <map name="leer">
        <area shape="RECT" coords="21,53,169,95" href="seite1.htm"  onMouseOut="alert('Anfang Map1');" alt="">
        </map>

        <map name="leer1">
        <area shape="RECT" coords="21,53,169,150" href="seite4.htm"  onMouseOut="alert('Anfang Map2');" alt="">
        </map>

        <img src="test5.gif" width="532" usemap="#leer"  height="151" border="0" alt="">
        <img src="test6.gif" width="532" usemap="#leer1" height="151" border="0" alt="">
        </div>

        <div style="position:absolute;left:550;top:30;"><a href="#" onClick="setImageMaps('x');return false;">ImageMaps der 1. Variante</a>

        <a href="#" onClick="setImageMaps('y');return false;">ImageMaps der 2. Variante</a>
        </div>
        </body>
        </html>

        Hast du alle Maps in den Arrays abgelegt, dann kannst du diese per Mausklick beliebig austauschen. Wichtig, die zum Rücktausch benötigte Map muß auch im Array abgelegt sein. Außerdem sollten die Maps von der Größe her gleich sein.

        Viele Grüße

        Antje

        Beitrag melden
        –
        Informationen zu den Bewertungsregeln