Ingo Turski: Imagemap + pure CSS Popup = geht nicht?

Beitrag lesen

Hi,

Jetzt brauchst Du ein position:relative div#Karte in der Größe der Gesamtgrafik, in das Du das Bild setzt.

Hab ich das richtig verstanden, dass ich das Bild hier in den
_Hintergrund_ setze? Ansonsten weiss ich naemlich nicht, wohin...

das ist im Grunde egal. Wenn Du es als IMG einbindest, wird es allerdings mit höherer Wahrscheinlichkeit auch ausgedruckt.

Hierüber kannst Du dann die Links setzen, display:block in den Größen der Bilder und absolut positioniert mit den notierten Koordinaten für top und left. Darin dann je ein span mit dem Infotext.

...ich diese Links setzen soll. Also ich hab die Karte jetzt
_im DIV im Hintergrund_. Prima. Und in das DIV rein hab ich
jetzt einen Link gepackt. Mit Span + Text.

genau. Und wenn Du die Links absolut positionierst, liegen sie auf jeden Fall über der Karte. Bei der Positionierung der spans ist allerdings zu berücksichtigen, daß der Bezug dann die Linkposition ist.

Im CSS setzt Du zunächst die div#Karte a span auf display:none und definierst dann für div#Karte a#IDxxx:hover die kleinen Grafiken als Hintergrund und blendest den div#Karte a#IDxx:hover span wieder ein.

So, da steige ich (offenbar) aus. a span auf display:none = klar.

Dabei hatte ich es doch so so einfach versucht zu erläutern..;-)
Die Links benötigen, da sie alle unterschiedliche Positionen und auszutauschende Zusatzinhalte haben, natürlich IDs. Wenn das umgebende DIV die ID #Karte bekommt, kannst Du mit einer einzigen Anweisung alle spans ansprechen und ausblenden. Zum Einblenden brauchst Du dann die jeweilige ID des Links.

  • wunderbar mein test1.jpg ABER an falscher Stelle und immer
      sichtbar. Was logisch ist, ich hab es ja als <img> unten
      in das DIV eingebaut. Lasse ich es aber hier weg, was
      fuellt mir dann mein <a></a>?

ein &nbsp; und das Bild als Hintergrund wäre eine Möglichkeit. Natürlich mit Angabe der genauen Bildgröße.
Ansonsten z.B. #Karte a#IDxxx img {display:none;} bzw. block. Ich würde aber wohl die erste Variantze vorziehen.

  • der hover-sensible Bereich ist allerdings der gesamte obere
      Streifen der Karte (41 px). Was auch nicht soo erstaunt,
      aldiweil ich ja display:block definiere (schriebst du doch...?)

Nur hast Du width und height wohl nicht gesetzt.

Also _eigentlich_ braeuchte ich ja nicht mal Links, weil ich
nirgends hinverlinken kann/mag. Aber ich brauche halt einen
Hovereffekt, wenn ich die CSS-Popups haben will...(?)

wenn Du den IE berücksichtigen und ohne Javascript auskommern willst: Ja.

freundliche Grüße
Ingo