Alex: JS + Imagemap + Layer?!

Hallo,

folgende Aufgabe will gelöst werden. Allerdings finde ich keine Script, dass mir wirklich weiterhilft...

Ich habe eine Imagemap, 450 x 300 px groß. Auf dieser befinden sich 15 - 20 Bereiche, die mit einem Link bzw. besser gesagt einer Grafik hinterlegt sind. Wenn der User mit der Mouse über einen dieser Bereiche fährt (mouseover), soll sich über die gesamte Fläche der Imagemap eine neue Grafik (Layer?) legen. Einigermaßen verständlich?

Kurzform:

Wenn "mouseover" Imagemap Fläche 1 dann zeige Grafik 1 an
Wenn "mouseover" Imagemap Fläche 2 dann zeige Grafik 2 an
Wenn "mouseover" Imagemap Fläche 3 dann zeige Grafik 3 an
...

Auf der dann eingeblendeten Grafik (z.B. Grafik 3) wird es ein eine Fläche "zurück" geben. Berührt die Mouse diese Fläche, erscheint wieder die ursprüngliche Imagemap.

Lässt sich dies in JS lösen? Gibt es evtl. eine elegantere Lösung für die geschilderte Vorgehensweise?

Danke vorab
Alex

  1. mach einfach style visibility = hidden oder display=none (wie's bei dir halt mit den Platzhaltern so aussieht...;-))

    Hab leider nicht verstanden, was du mit dem ganzen bezwecken willst
    , bzw. wozu das gut sein soll.

    Aber du wirst es schon wissen. Ein Verwendungsbereich wäre vielleicht sinnvoll!!!

    Ciao

    1. mach einfach style visibility = hidden oder display=none (wie's bei dir halt mit den Platzhaltern so aussieht...;-))

      woss?!  Bin kein Programierer. Von daher wäre ein Link zu einem Script, dass ich u.U. noch etwas anpassen muss, besser... ;-)

      Hab leider nicht verstanden, was du mit dem ganzen bezwecken willst
      , bzw. wozu das gut sein soll.

      Die Grafik besteht aus vielen kleinen Quadraten, darunter 15 Thumbs/Bilder. Bei Anwahl/Mouseberührung soll die komplette Map gegen das entsprechende Thumb in Großformat getauscht werden. Eher eine Designsache, keine wirkliche Funktion.

      Hast du evtl. etwas in petto?

      Danke vorab
      Alex

  2. hi,

    Wenn der User mit der Mouse über einen dieser Bereiche fährt (mouseover), soll sich über die gesamte Fläche der Imagemap eine neue Grafik (Layer?) legen.

    Willst du nur die Grafik austauschen, oder wirklich die Image Map "überlagern"?

    Auf der dann eingeblendeten Grafik (z.B. Grafik 3) wird es ein eine Fläche "zurück" geben. Berührt die Mouse diese Fläche, erscheint wieder die ursprüngliche Imagemap.

    Also doch auch eine andere Image Map?

    Dann ist Heinis Vorschlag, die Grafiken plus Maps alle schon vorliegen zu haben (oder dynamisch per JS zu erzeugen; stelle ich mir bei einer Image Map aber eklig vor), und dann über Änderung von style-Eigenschaften (un)sichtbar zu machen, vermutlich der effektivste.

    gruß,
    wahsaga

    --
    /voodoo.css:
    #GeorgeWBush { position:absolute; bottom:-6ft; }
    1. hi,

      Wenn der User mit der Mouse über einen dieser Bereiche fährt (mouseover), soll sich über die gesamte Fläche der Imagemap eine neue Grafik (Layer?) legen.

      Willst du nur die Grafik austauschen, oder wirklich die Image Map "überlagern"?

      Entweder oder. Beides möglich. Überlagern wäre wohl eleganter.

      Auf der dann eingeblendeten Grafik (z.B. Grafik 3) wird es ein eine Fläche "zurück" geben. Berührt die Mouse diese Fläche, erscheint wieder die ursprüngliche Imagemap.

      Also doch auch eine andere Image Map?

      Ja, im Grunde schon.

      Dann ist Heinis Vorschlag, die Grafiken plus Maps alle schon vorliegen zu haben (oder dynamisch per JS zu erzeugen; stelle ich mir bei einer Image Map aber eklig vor), und dann über Änderung von style-Eigenschaften (un)sichtbar zu machen, vermutlich der effektivste.

      Liegt alles vor, wird vorgeladen. Danke für den Link. Habe leider keine Ahung von Programmierung und JS. Benötige etwas vorgefertigtes, dass ich ggf. noch etwas anpassen muss.

      Danke
      Alex