Karl-Heinz: Landkarte als ImageMap, mit onMouseOver Bereiche hervorheben

SELF-Forum

Landkarte als ImageMap, mit onMouseOver Bereiche hervorheben

Karl-Heinz
– Informationen zu den Bewertungsregeln

Hallo Leute,

ich sitze fest. Trotz allen Kundigmachens in zahlreichen deutschsprachigen Quellen ist es mir nicht gelungen für eine neue Homepage 8 Bereiche (Flußeinzugsgebiete) einer Landkarte, die ich als ImageMap verweis-sensitiv gemacht habe, mit „onMouseOver“ und „onMouseOut“ hervorzuheben und die jeweiligen Bereiche gleichzeitig als Link zu nachfolgenden Seiten zu nutzen.

Ich wollte das Beispiel in SELFHTML, Dynamische Buttons, auf eine ImageMap übertragen und es klappt nur der „Bildwechsel1“ . Die anderen 7 Flächen sind zwar verweis-sensitiv aber ohne Bildwechsel. Die Ausgangsgrafik ist „einzugth.gif“ und die nachfolgenden Grafiken (leine.gif, werra.gif, unstrut.gif ...) sind (fast) identisch (bis auf die etwas helleren Einzugsgebiete) und liegen auf gleicher Position, d.h. je ein Gebiet pro Grafik = 1 Ausgangsgrafik und 8 Folgegrafiken für 8 Einzugsgebiete.

Ich glaube, ich habe nicht Tipfehler gemacht sondern einen Denkfehler. Kann mir jemand helfen und in den Quellcode schauen, vielleicht ist der Fehler gleich offensichtlich.

Mit freundlichem Gruß
Karl-Heinz

Nachfolgend ein Auszug aus dem betreffenden Quellcode:

<script type="text/javascript">
<!--
Normal1 = new Image();
Normal1.src = "images/einzugth.gif";
Highlight1 = new Image();
Highlight1.src = "images/leine.gif";

Normal2 = new Image();
Normal2.src = "images/einzugth.gif";
Highlight2 = new Image();
Highlight2.src = "images/unstrut.gif";

Normal3 = new Image();
Normal3.src = "images/einzugth.gif";
Highlight3 = new Image();
Highlight3.src = "images/werra.gif";
.
.
.

function Bildwechsel(Bildnr,Bildobjekt)
{ window.document.images[Bildnr].src = Bildobjekt.src; }
//-->
</script>

<link rel="stylesheet" type="text/css" href="css/formate.css"><base target="rechts">
</head>
<body >

<map name="thkart">

<area shape="POLYGON" coords="5,94,67,106,95,78,122,25,101,12,5,94" href="leine.htm"
onMouseOver="Bildwechsel(0,Highlight1)"
onMouseOut="Bildwechsel(0,Normal1)"<img src="images/einzugth.gif" width="570" height="472" border="0" alt="">

<area shape="POLYGON" coords="122,16,67,108,116,193,204,215,130,276,181,323,257,256,331,160,329,110,122,16" href="unstrut.htm"
onMouseOver="Bildwechsel(1,Highlight2)"
onMouseOut="Bildwechsel(1,Normal2)"<img src="images/einzugth.gif" width="570" height="472" border="0" alt="">

<area shape="POLYGON" coords="7,101,65,108,107,186,217,216,132,280,235,383,189,409,91,373,34,344,49,163,7,101" href="werra.htm"
onMouseOver="Bildwechsel(2,Highlight3)"
onMouseOut="Bildwechsel(2,Normal3)"<img src="images/einzugth.gif" width="570" height="472" border="0" alt="">
.
.
.

</map>
<p><img src="images/einzugth.gif" width="570" height="472" border="0" alt="" usemap="#thkart"></p>
</body>

Beitrag melden
–
Informationen zu den Bewertungsregeln

  1. Landkarte als ImageMap, mit onMouseOver Bereiche hervorheben

    code2i
    – Informationen zu den Bewertungsregeln

    Hallo Karl Heinz .....

    Ich glaube, ich habe nicht Tipfehler gemacht sondern einen Denkfehler. Kann mir jemand helfen und in den Quellcode schauen, vielleicht ist der Fehler gleich offensichtlich.

    Gar nicht so tragisch !

    ------------------------

    Nachfolgend ein Auszug aus dem betreffenden Quellcode:

    <script type="text/javascript">
    <!--
    Normal1 = new Image();
    Normal1.src = "images/einzugth.gif";
    Highlight1 = new Image();
    Highlight1.src = "images/leine.gif";

    Normal2 = new Image();
    Normal2.src = "images/einzugth.gif";
    Highlight2 = new Image();
    Highlight2.src = "images/unstrut.gif";

    Normal3 = new Image();
    Normal3.src = "images/einzugth.gif";
    Highlight3 = new Image();
    Highlight3.src = "images/werra.gif";
    .
    .
    .

    function Bildwechsel(Bildnr,Bildobjekt)
    { window.document.images[Bildnr].src = Bildobjekt.src; }
    //-->
    </script>

    <link rel="stylesheet" type="text/css" href="css/formate.css"><base target="rechts">
    </head>
    <body >

    <map name="thkart">

    <area shape="POLYGON" coords="5,94,67,106,95,78,122,25,101,12,5,94" href="leine.htm"
    onMouseOver="Bildwechsel(0,Highlight1)"
    onMouseOut="Bildwechsel(0,Normal1)"<img src="images/einzugth.gif" width="570" height="472" border="0" alt="">

    Das hier geht noch ... !? schriebst du ! sieht auch so aus !

    -------------------------

    <area shape="POLYGON" coords="122,16,67,108,116,193,204,215,130,276,181,323,257,256,331,160,329,110,122,16" href="unstrut.htm"
    onMouseOver="Bildwechsel(1,Highlight2)"
    onMouseOut="Bildwechsel(1,Normal2)"<img src="images/einzugth.gif" width="570" height="472" border="0" alt="">

    Aber hier fängt schon das Problem an !

    ---------------------------

    <area shape="POLYGON" coords="7,101,65,108,107,186,217,216,132,280,235,383,189,409,91,373,34,344,49,163,7,101" href="werra.htm"
    onMouseOver="Bildwechsel(2,Highlight3)"
    onMouseOut="Bildwechsel(2,Normal3)"<img src="images/einzugth.gif" width="570" height="472" border="0" alt="">
    .
    .
    .

    </map>
    <p><img src="images/einzugth.gif" width="570" height="472" border="0" alt="" usemap="#thkart"></p>
    </body>

    Und da tut es auch weh !!

    Mit dem Aufruf der Funktion Bildwechsel(Bildnr,bla) bei onMouseover oder onMouseout, übergibst du mit der Variablen Bildnr die IMG Object Nummer, bei der die Grafik ausgetauscht werden soll.

    Du hast 1 IMG Object in deinem HTML Dokument. ><img src="images/einzugth.gif" ..... !!!  Hmmmm Bildnr=0 ist auch richtig! Ist in diesem Fall das erste IMG Object.

    In deinem zweiten und dritten area shape versuchst du aber ein zweites und drittes IMG Object anzusprechen. Also Bildnr=1 oder Bildnr=2 !!!

    Die gibt es aber nicht !!!!! Es ist und bleibt das erste IMG Object im HTML Dokument. Also Bildnr=0 !!!

    cu

    Beitrag melden
    –
    Informationen zu den Bewertungsregeln

    1. Landkarte als ImageMap, mit onMouseOver Bereiche hervorheben

      code2i
      – Informationen zu den Bewertungsregeln

      Hmmm !!!

      Da hier weiterhin komische Beiträge auftauchen, gehe ich mal davon aus ,das ich das ein bischen unklar erläutert habe !

      Nur zum besseren Verständniss !
      So müsste das aussehen, damit es funzt!

      <area shape="POLYGON" coords="5,94,67,106,95,78,122,25,101,12,5,94" href="leine.htm"
      onMouseOver="Bildwechsel(0,Highlight1)"
      onMouseOut="Bildwechsel(0,Normal1)"<img src="images/einzugth.gif" width="570" height="472" border="0" alt="">

      Alles OK!

      <area shape="POLYGON" coords="122,16,67,108,116,193,204,215,130,276,181,323,257,256,331,160,329,110,122,16" href="unstrut.htm"

      onMouseOver="Bildwechsel(0,Highlight2)"
      onMouseOut="Bildwechsel(0,Normal2)"<img src="images/einzugth.gif" width="570" height="472" border="0" alt="">

      <area shape="POLYGON" coords="7,101,65,108,107,186,217,216,132,280,235,383,189,409,91,373,34,344,49,163,7,101" href="werra.htm"

      onMouseOver="Bildwechsel(0,Highlight3)"
      onMouseOut="Bildwechsel(0,Normal3)"<img src="images/einzugth.gif" width="570" height="472" border="0" alt="">

      </map>
      <p><img src="images/einzugth.gif" width="570" height="472" border="0" alt="" usemap="#thkart"></p>

      Der Fehler lag beim Aufruf --Bildwechsel(2,Highlight2)---- wobei die erste var für die Image Objectnummer steht ! Es gibt aber kein Image 1 oder 2 sondern nur 0. (Also "ein einziges" Bild als IMG Objeckt.)

      Ich hoffe jetzt versteht man es ein bischen besser !

      cu

      Beitrag melden
      –
      Informationen zu den Bewertungsregeln

      1. Landkarte als ImageMap, mit onMouseOver Bereiche hervorheben

        Karl-Heinz
        – Informationen zu den Bewertungsregeln

        Hmmm !!!

        Da hier weiterhin komische Beiträge auftauchen, gehe ich mal davon aus ,das ich das ein bischen unklar erläutert habe !

        Nur zum besseren Verständniss !
        So müsste das aussehen, damit es funzt!

        <area shape="POLYGON" coords="5,94,67,106,95,78,122,25,101,12,5,94" href="leine.htm"
        onMouseOver="Bildwechsel(0,Highlight1)"
        onMouseOut="Bildwechsel(0,Normal1)"<img src="images/einzugth.gif" width="570" height="472" border="0" alt="">

        Alles OK!

        <area shape="POLYGON" coords="122,16,67,108,116,193,204,215,130,276,181,323,257,256,331,160,329,110,122,16" href="unstrut.htm"
        onMouseOver="Bildwechsel(0,Highlight2)"
        onMouseOut="Bildwechsel(0,Normal2)"<img src="images/einzugth.gif" width="570" height="472" border="0" alt="">

        <area shape="POLYGON" coords="7,101,65,108,107,186,217,216,132,280,235,383,189,409,91,373,34,344,49,163,7,101" href="werra.htm"
        onMouseOver="Bildwechsel(0,Highlight3)"
        onMouseOut="Bildwechsel(0,Normal3)"<img src="images/einzugth.gif" width="570" height="472" border="0" alt="">
        </map>
        <p><img src="images/einzugth.gif" width="570" height="472" border="0" alt="" usemap="#thkart"></p>

        Der Fehler lag beim Aufruf --Bildwechsel(2,Highlight2)---- wobei die erste var für die Image Objectnummer steht ! Es gibt aber kein Image 1 oder 2 sondern nur 0. (Also "ein einziges" Bild als IMG Objeckt.)

        Ich hoffe jetzt versteht man es ein bischen besser !

        cu

        Guten Morgen Leute,
        Hallo Sven, RB, und code2i,

        vielen Dank für eure Überlegungen und Tipps.

        Die Lösung für mein Problem war der Tip von code2i. Genau in diese Richtung gingen auch meine Überlegungen, habe sie aber nicht zu Ende bringen können. Ich habe gestern nur die "0" einfügen müssen, und es funzte. Wunderbar.
        Sven, deinem Hinweis auf zu große Grafiken werde ich nachgehen, wenn ich so eine Landkarte per Internet aufrufen kann. Ich glaubte auch erst, es ist zu viel, aber hier auf meinem PC erfolgt der Grafikwechsel blitzschnell und auch der Aufruf der Datei.

        Mit freundlichen Morgengrüßen
        Tschüß
        Karl-Heinz

        PS: Ich bin Neuling in diesem Forum und war erstaunt, was für ein reger Betrieb hier ist. Toll.

        Beitrag melden
        –
        Informationen zu den Bewertungsregeln

  2. Landkarte als ImageMap, mit onMouseOver Bereiche hervorheben

    Sven Rautenberg Homepage des Autors
    – Informationen zu den Bewertungsregeln

    Hallo Leute,

    Moin!

    ich sitze fest. Trotz allen Kundigmachens in zahlreichen deutschsprachigen Quellen ist es mir nicht gelungen für eine neue Homepage 8 Bereiche (Flußeinzugsgebiete) einer Landkarte, die ich als ImageMap verweis-sensitiv gemacht habe, mit „onMouseOver“ und „onMouseOut“ hervorzuheben und die jeweiligen Bereiche gleichzeitig als Link zu nachfolgenden Seiten zu nutzen.

    Der "Fehler", den du nicht wissen kannst, besteht in der Notwendigkeit, bei Area-Mouseover die gewünschte Funktion zeitverzögert mit setTimeout aufzurufen.

    onmouseover="setTimeout('hiermeinefunktion('mit Textstring',undVariable),1);"

    Ich glaube, ich habe nicht Tipfehler gemacht sondern einen Denkfehler. Kann mir jemand helfen und in den Quellcode schauen, vielleicht ist der Fehler gleich offensichtlich.

    Ich glaube das auch. Aber ich sehe einen anderen möglichen Denkfehler:

    Du hast eine mit 570x472 Pixeln recht große Grafik. Du lädst dann noch sechs weitere Bildobjekte (insgesamt vier verschiedene Grafiken) mit Javascript nach. Das dürfte ungefähr 100 Kilobyte durch die Leitung bewegen.

    Wenn der Mouseover nicht wirklich große Veränderungen am gesamten Bild hervorruft, dann würde ich versuchen, das Bild zu zerschneiden und in eine Tabelle packen. Die Mouseover-Befehle beziehen sich dann auf einzelne Bilder mit einfachen Links, und das verursacht keine Probleme.

    Bei insgesamt vier Bildern ist das vielleicht verzichtbar - ich hatte aber schon mal eine Sitemap mit Mouseover-Effekt, da wurde die gesamte Sitemap-Grafik ausgetauscht. Und bei zwanzig Links auf der Seite waren da schnell mal 300 KB an Grafiken zu übertragen.

    - Sven Rautenberg

    Beitrag melden
    –
    Informationen zu den Bewertungsregeln

    1. Landkarte als ImageMap, mit onMouseOver Bereiche hervorheben

      -RB-
      – Informationen zu den Bewertungsregeln

      hallo

      AHA!

      onmouseover="setTimeout('hiermeinefunktion('mit Textstring',undVariable),1);"

      story[2]="<table width='500'><tr align='left'  onMouseOver='Winfoein("+hand1dmg+","+hand1mdmg+","+hand1speed+","+hand1beschr+")' <td>blabla</td></tr></table> ";

      wenn ich diese zeile so schreibe:

      story[2]="<table width='500'><tr align='left'  onMouseOver='Winfoein('+hand1dmg+','+hand1mdmg+','+hand1speed+','+hand1beschr+')' <td>blabla</td></tr></table> ";
      gibt das nen fetten syntax error bei mir...
      bislang dachte ich meine eigene unfähigkeit verhindert das ich den grund verstehe, aber wie ich sehe, muss es wohl einen anderen grund geben.

      btw das gilt auch wenn ich statt variablen strings nehme:

      story[2]="<table width='500'><tr align='left'  onMouseOver='Winfoein('hallo')' <td>blabla</td></tr></table> ";

      -RB-

      Beitrag melden
      –
      Informationen zu den Bewertungsregeln

      1. Landkarte als ImageMap, mit onMouseOver Bereiche hervorheben

        -RB-
        – Informationen zu den Bewertungsregeln

        fast vergessen: mit timeout kann man doch keine variablen übergeben...?

        Beitrag melden
        –
        Informationen zu den Bewertungsregeln

    2. Landkarte als ImageMap, mit onMouseOver Bereiche hervorheben

      kerki
      – Informationen zu den Bewertungsregeln

      Hallo !

      Der "Fehler", den du nicht wissen kannst, besteht in der Notwendigkeit, bei Area-Mouseover die gewünschte Funktion zeitverzögert mit setTimeout aufzurufen.

      onmouseover="setTimeout('hiermeinefunktion('mit Textstring',undVariable),1);"

      Echt? Davon habe ich noch nie gehört.

      [...]

      Du hast eine mit 570x472 Pixeln recht große Grafik. Du lädst dann noch sechs weitere Bildobjekte (insgesamt vier verschiedene Grafiken) mit Javascript nach. Das dürfte ungefähr 100 Kilobyte durch die Leitung bewegen. [...] ich hatte aber schon mal eine Sitemap mit Mouseover-Effekt, da wurde die gesamte Sitemap-Grafik ausgetauscht. Und bei zwanzig Links auf der Seite waren da schnell mal 300 KB an Grafiken zu übertragen.

      Zu einem ähnlichen Problem hatte ich vor einiger Zeit hier bereits einen Lösungsansatz gepostet. Es ging ebenfalls um eine Landkarte, in der bestimmte Bereiche beim Überfahren mit der Maus farblich hervorgehoben werden sollten.

      Vor allem bei Landkarten scheidet die Möglichkeit, die ImageMap in Tabellenzellen zu zerschneiden zumeist aus, da sich dort nur selten rechteckige Formen finden lassen.

      Daher hatte ich folgende simple Idee:

      Für die eigentliche Landkarte nimmt man eine beliebige Grafik, die auch ruhig etwas größer (in KB) sein darf, da sie nicht ausgetauscht wird, sondern immer als Hintergrundgrafik liegenbleibt.

      Darüber lege ich nun die ImageMap, deren Bildquelle zunächst ein transparentes GIF-(oder PNG)-Bild ist.

      Sobald etwas farblich hervorgehoben werden soll, wird diese transparente Grafik gegen eine andere ausgetauscht, die ebenfalls fast vollständig transparent ist bis eben auf die Teile der Grafik, die hervirgehoben werden sollen.

      Da der Kompressionfaktor bei diesen Austauschgrafiken aufgrund der vielen transparenten Flächen sehr hoch ist, halten sich die Dateigrößen angenehm klein. :-)

      Ein kleines Beispiel habe ich hier hochgeladen:

      <kerki.bei.t-online.de/deutschland.htm>

      -----

      Auch wenn das ursprüngliche Problem zwischenzeitlich wohl schon gelöst ist, noch eine Anmerkung zum Quelltext:

      <area shape="POLYGON" coords="5,94,67,106,95,78,122,25,101,12,5,94" href="leine.htm"

      onMouseOver="Bildwechsel(0,Highlight1)"
      onMouseOut="Bildwechsel(0,Normal1)"<img src="images/einzugth.gif" width="570" height="472" border="0" alt="">

      Was sind das für zwei seltsame halbe Tags? Die Stelle sollte wohl eher so heißen:

      <area shape="poly"
            coords="5,94,67,106,95,78,122,25,101,12,5,94"
            href="leine.htm"
            onmouseover="Bildwechsel(0,Highlight1)"
            onmouseout="Bildwechsel(0,Normal1)">

      Gruß,

      kerki

      Beitrag melden
      –
      Informationen zu den Bewertungsregeln

      1. Landkarte als ImageMap, mit onMouseOver Bereiche hervorheben

        kerki
        – Informationen zu den Bewertungsregeln

        *grummel*

        http://kerki.bei.t-online.de/deutschland.htm

        Beitrag melden
        –
        Informationen zu den Bewertungsregeln