Fabian: Verweis-sensitive Grafiken "austauschbar" (ImageMap)

Hallo,

Ich habe eine Grafik, in der man auf bestimmte Bereich klicken kann- also eine Image Map. Nun möchte ich aber, dass über den Bereich der anklickbaren Stellen Grafiken gelegt werden können, um das Aussehen dieser Stellen zu verändern (wenn also auf der Original-Grafik an dieser Stelle ein Mond anklickbar ist, soll nun eine Sonne über die Originalgrafik an der Stelle des Mondes gelegt werden). Ich habe versucht, per CSS eine Grafik mit absoluten Pixelangaben über die ImageMap zu setzen, aber leider ist dann, sobald die Grafik über der ImageMap liegt, nichts mehr zum Anklicken da- die per CSS eingefügte Grafik überlagert also sozusagen den Link- obwohl sie ja nur die Originalgrafik, nicht aber die UseMap überdecken soll.

Kann mir jemand sagen, wie ich mein Vorhaben in anderer Weise in die Tat umsetzen (das gepfriemel mit absoluten Pixel-Angbaben ist eh nervig) oder mein Problem lösen kann?

  1. Nachtrag:

    Eine ideale Lösung wäre beispielsweise, wenn ich das area-Element um ein img-Attribut erweitern könnte, also so:
    <area shape="rect" coords="74,48,174,131" href="#" img="sonne.gif" />
    sodass an der angegebenen Stelle gleich ein Bild hineingeladen werden kann (oder auch nicht).

    Ein solches Attribut gibt es ja leider nicht- aber gibt es eine vergleichbare Alternative? Ich hoffe, mit diesem Beispiel konnte ich verdeutlichen, nach was ich auf der Suche bin.

    MfG
    Fabian

    1. Hallo Fabian,

      Eine ideale Lösung wäre beispielsweise, wenn ich das area-Element um
      ein img-Attribut erweitern könnte, also so:
      <area shape="rect" coords="74,48,174,131" href="#" img="sonne.gif" />
      sodass an der angegebenen Stelle gleich ein Bild hineingeladen werden
      kann (oder auch nicht).

      hmm,
      wenn im ImageMap nur einzelne Rechtecke genutzt werden, besteht kein
      Grund, sie zu einer Grafik zusammen zu fassen. D.h. Du kannst einzelne
      Grafiken verwenden und nach Bedarf austauschen.

      Gruss Norbert

      1. Hallo Fabian,

        Eine ideale Lösung wäre beispielsweise, wenn ich das area-Element um
        ein img-Attribut erweitern könnte, also so:
        <area shape="rect" coords="74,48,174,131" href="#" img="sonne.gif" />
        sodass an der angegebenen Stelle gleich ein Bild hineingeladen werden
        kann (oder auch nicht).
        hmm,
        wenn im ImageMap nur einzelne Rechtecke genutzt werden, besteht kein
        Grund, sie zu einer Grafik zusammen zu fassen. D.h. Du kannst einzelne
        Grafiken verwenden und nach Bedarf austauschen.

        Gruss Norbert

        Das geht leider auch nicht, weil die einzusetzenden Grafiken keine festgelegte Größe haben müssen- d.h. sie passen nicht zwangsläufig in eine der vorgefertigten "Kacheln"... .

        Ich habe mir gerade das Spiel "Travian" angeschaut, welches im Prinzip genau das macht, was ich will- allerdings verstehe ich nicht so ganz, wie sie das machen- denn so wie es für mich aussieht, machen sie es genauso, wie ich es im ersten Post beschreibe- was bei mir ja nicht funktioniert. Was machen die anders?

  2. Hallo

    Kann mir jemand sagen, wie ich mein Vorhaben in anderer Weise in die Tat umsetzen (das gepfriemel mit absoluten Pixel-Angbaben ist eh nervig) oder mein Problem lösen kann?

    Ein anderer Weg wäre die komplette Grafik aus zu tauschen und die imagemap dort weiter zu verwenden.

    Zum aktuellen Versuch: blende das Bild doch einfach mit einem Link ein.

    Gruß
    Ole
    (8-)>

    --
    Das Wort Vegetarier kommt aus dem Indianischen und bedeutet: Zu dumm zum Jagen.
    1. Hallo

      Kann mir jemand sagen, wie ich mein Vorhaben in anderer Weise in die Tat umsetzen (das gepfriemel mit absoluten Pixel-Angbaben ist eh nervig) oder mein Problem lösen kann?

      Ein anderer Weg wäre die komplette Grafik aus zu tauschen und die imagemap dort weiter zu verwenden.

      Zum aktuellen Versuch: blende das Bild doch einfach mit einem Link ein.

      Gruß
      Ole
      (8-)>

      Das ganze Bild kann ich leider nicht austauschen, da die einzufügenden Zusatzbilder in so zahlreichen Variationen vorkommen können, dass ich unmöglich für jede Möglichkeit ein einzelnes Bild erstellen kann.

      MfG

  3. Hi,

    Kann mir jemand sagen, wie ich mein Vorhaben in anderer Weise in die Tat umsetzen (das gepfriemel mit absoluten Pixel-Angbaben ist eh nervig) oder mein Problem lösen kann?

    Keine Image-Map verwenden, sondern normale Links, die positioniert und mit Hintergrundgrafiken ausgestattet werden?

    MfG ChrisB

  4. Hallo,

    • nimm ein transparentes Bild ( 1*1 px entsprechend aufgespannt) und stecke es in ein div.
    • dem div gibtst du das Orginal als Hintergrundbild
    • dem transparenten Bild weist du die map zu.
    • das Teilbild positionierst du als Hintergrundbild des transparenten

    ein schlanke Lösung, Traffic sparend und ohne absolute Positionierung

    Gruß plan_B

    --
         *®*´¯`·.¸¸.·
    1. Hallo,

      • nimm ein transparentes Bild ( 1*1 px entsprechend aufgespannt) und stecke es in ein div.
      • dem div gibtst du das Orginal als Hintergrundbild
      • dem transparenten Bild weist du die map zu.
      • das Teilbild positionierst du als Hintergrundbild des transparenten

      ein schlanke Lösung, Traffic sparend und ohne absolute Positionierung

      Gruß plan_B

      Hi!

      Das klingt gut, allerdings gibt es dabei ein Problem:
      Es gibt nicht "Das Teilbild" sondern mehrere davon- und als Hintergrundbild kann ich ja nur eines zuweisen. Was kann ich da machen?

      1. Hallo,

        Es gibt nicht "Das Teilbild" sondern mehrere davon- und als Hintergrundbild kann ich ja nur eines zuweisen. Was kann ich da machen?

        denke mal, du machst es dir zu einfach, wenn du hier _die_ Lösung erwartest. Dir wurden verschiedene Ansätze vorgestellt, die im Prinzip alle funktionieren.

        Gruß plan_B

        --
             *®*´¯`·.¸¸.·