Verweis-sensitive Grafiken "austauschbar" (ImageMap)
Fabian
- design/layout
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?
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
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
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?
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-)>
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
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
Hallo,
ein schlanke Lösung, Traffic sparend und ohne absolute Positionierung
Gruß plan_B
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?
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