Imagemap + pure CSS Popup = geht nicht?

[Nicola Straub]

Hi!

Nachdem das neulich mehrfach Thema hier war, hab ich mich
in die Pure CSS Popups verliebt. Prinzipiell ist mir das
alles klar und es funktioniert - mit 'normalen' Links (<a>)

Nun habe ich aber eine Landkarte mit Sehenswuerdigkeiten
und moechte also per Popups kleine Erlaeuterungstexte zu
den einzelnen Orten unterbringen. Die Sehenswuerdigkeiten,
damit die sensiblen Bereiche der Grafik, sind aber ausser-
ordentlich gepuzzelt in dem Bild, zudem sind es sehr viele.
Ich sehe keine Moeglichkeit, das Bild in Einzelteile zu
zerlegen, um ein Image-Puzzle zu erstellen. Mir bleibt
IMO also nur ein Imagemap.

Nach etwas Geteste und einiger Recherche im Archiv und
Frau Google komme nun aber zu dem Schluss, dass ich die
CSS-Popup-Sache dann vergessen kann? Das geht gar nicht
mit einer Imagemap? Stimmt das oder habe ich etwas ueber-
sehen?

Wie wuerdet Ihr das dann realisieren?

Herzliche Gruesse

Nicola

[MudGuard]

Hi,

Nachdem das neulich mehrfach Thema hier war, hab ich mich
in die Pure CSS Popups verliebt. Prinzipiell ist mir das
alles klar und es funktioniert - mit 'normalen' Links (<a>)

Meinst Du die Teile, bei denen ein span (oder sonstiges inline-Element) im a sitzt, das normal auf display:none gesetzt ist und bei :hover auf display:block?

Das kann natürlich bei einer image map mit area-Elementen nicht funktionieren, denn weder das Bild noch die area-Elemente können Kind-Elemente besitzen, womit ein Selektor wie
area:hover span
niemals ein Element auswählen kann.
a kann Kindelemente enthalten, also ist auch
a:hover span
als Selektor sinnvoll.

Du könntest höchstens versuchen, anstelle der area-Elemente a-Elemente in die map zu packen (a hat ja auch shape- und coords-Attribut). Aber wie weit das von den Browsern unterstützt wird, weiß ich nicht.
In den a-Elementen kannst Du dann wieder die span-Elemente verpacken.

cu,
Andreas

[Nicola Straub]

Hi!

Meinst Du die Teile, bei denen ein span (oder sonstiges inline-Element) im a sitzt, das normal auf display:none gesetzt ist und bei :hover auf display:block?

Jipp. Das erscheint mir als eleganteste Loesung, da pures CSS
und auch im Hinblick darauf, dass ich >34 Texte habe, die ich
so direkt beim jeweiligen Bildelement 'verwalten' koennte.

Das kann natürlich bei einer image map mit area-Elementen nicht

Ja, das hatte ich selbst rausgefunden.

funktionieren, denn weder das Bild noch die area-Elemente können Kind-Elemente besitzen, womit ein Selektor wie
area:hover span
niemals ein Element auswählen kann.
a kann Kindelemente enthalten, also ist auch
a:hover span
als Selektor sinnvoll.

Ahso. Der Grund war mir halt nicht klar. Mist.

Du könntest höchstens versuchen, anstelle der area-Elemente a-Elemente in die map zu packen (a hat ja auch shape- und coords-Attribut). Aber wie weit das von den Browsern unterstützt wird, weiß ich nicht.

Aehm, hat es? Hast du da ein Beispiel (URL z.B.)? Sagt mir
momentan nix.

Und weiss jemand mehr zur Browserunterstuetzung?

In den a-Elementen kannst Du dann wieder die span-Elemente verpacken.

Ja, DAS funktioniert ja wirklich super schoen.

Ach so: _Links_ braeuchte ich nicht mal, wenn ich die Texte
hovern kann, ist das alles, was ich brauche. Was aber am
Grundproblem mit <area> leider nix aendert, soweit ich das
sehe.

Ich denke, ich mach es dann wie frueher: Mit JS-Popup-Fenstern
a la [Link:http://www.web-toolbox.net/webtoolbox/verweise/verweissensitiv01/verweis-sensitiv02.htm]

Dann kann ich die Infotexte wenigstens noch etwas 'schoen' machen.
Ist ja auch was... ;-)

Herzliche Gruesse

Nicola

PS: Ich weiss, dass die Nutzer dann JS _brauchen_. Und bin
fuer jede bessere Idee offen...

[MudGuard]

Hi,

Ich denke, ich mach es dann wie frueher: Mit JS-Popup-Fenstern
a la [Link:http://www.web-toolbox.net/webtoolbox/verweise/verweissensitiv01/verweis-sensitiv02.htm]

Wenn es nur kurze Texte sind: title-Attribut.

cu,
Andreas

[Nicola Straub]

Wenn es nur kurze Texte sind: title-Attribut.

up to 100 Wörter, meist so rund 70 ;-(

Gruss

Nicola

[Struppi]

Wenn es nur kurze Texte sind: title-Attribut.

Vielleicht eine Kombination aus beiden Sachen.

<a href=""
title="das ist ein Text."
onmouseover="alert(this.title);"

Test</a>

Struppi.

[Ingo Turski]

Hi,

Die Sehenswuerdigkeiten,
damit die sensiblen Bereiche der Grafik, sind aber ausser-
ordentlich gepuzzelt in dem Bild, zudem sind es sehr viele.
Ich sehe keine Moeglichkeit, das Bild in Einzelteile zu
zerlegen, um ein Image-Puzzle zu erstellen. Mir bleibt
IMO also nur ein Imagemap.

da wäre ich mir nicht so sicher. Du bräuchtest ja die Karte nicht zu zerschneiden, sondern lediglich die Sehenswürdigkeiten extrahieren und über die Grafik legen. Dann könntest diese einzeln verlinken und zur Erkennbarkeit der sensitiven Bereiche könntest Du zusätzlich die Bilder der Sehenswürdigkeiten "hightlighten". Wir hatten da mal einen vergleichbaren Thread: http://forum.de.selfhtml.org/archiv/2004/8/88414/.

freundliche Grüße
Ingo

[Nicola Straub]

Hi!

da wäre ich mir nicht so sicher. Du bräuchtest ja die Karte nicht zu zerschneiden, sondern lediglich die Sehenswürdigkeiten extrahieren und über die Grafik legen. Dann könntest diese einzeln verlinken und zur Erkennbarkeit der sensitiven Bereiche könntest Du zusätzlich die Bilder der Sehenswürdigkeiten "hightlighten". Wir hatten da mal einen vergleichbaren Thread: http://forum.de.selfhtml.org/archiv/2004/8/88414/.

Ja, den Thread meinte ich, als ich sagte, es war schon Thema
neulich...
Das hatte ich aber so verstanden, dass die Highlight-Bilder
_nebeneinander_ liegen, also ich dachte, es ist doch ein
echtes Puzzle. Bei mir muessten Highlights auf jeden Fall
_ueberlappen_ oder echte Polygone sein, soweit ich das grad
sehe. Und ich hab keinen Schimmer, wie das mit dem 'drueber-
legen' funktioniert. Einfach positionieren? Wie geht das, ueber
<img style="position:...">? Klingt nach EXTREM viel Arbeit
fuer Polygone.

(Uuups, ich seh grad: Im alten Thread waren es Laender. Die
sind ja auch nicht quadratisch, praktisch, gut. OK, da
gibt's also auch Ueberlapp)

Ich wuerde das super gern mal an einem Beispiel sehen...
Susi, hast du das hinbekommen?

LG

Nicola

[Nicola Straub]

Hab das Bild mal online gestellt, um die Fisseligkeit zu zeigen:

LG

Nicola

[Ingo Turski]

Hi,

Hab das Bild mal online gestellt, um die Fisseligkeit zu zeigen

Du hast die Karte vermutlich so wie sie ist? Das Herausschneiden von rechteckigen Bereichen mit den einzelnen Sehenswürdigkeiten sollte Dir keine Probleme machen. Ein gutes Bildbearbeitungsprogramm sollte Dir hierbei auch die x/y-Position der oberen linken Ecke im Bild anzeigen - diese notierst Du Dir mit den herausgeschnittenen Bildmaßen.

Nun bearbeitest Du diese Ausschnitte etwas nach, um einen Highlight-Effekt zu bekommen. Überlappungen sind hier ohne Bedeutung.

Jetzt brauchst Du ein position:relative div#Karte in der Größe der Gesamtgrafik, in das Du das Bild setzt.
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.

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.

Wenn Dir das mit der Bearbeitung der Grafiken zu aufwendig ist, könntest Du den Links vielleicht auch nur einen title geben und auf die Markierung verzichten.

freundliche Grüße
Ingo

[Nicola Straub]

Soooo!

Du hast die Karte vermutlich so wie sie ist? Das Herausschneiden von rechteckigen Bereichen mit den einzelnen Sehenswürdigkeiten sollte Dir keine Probleme machen. Ein gutes Bildbearbeitungsprogramm sollte Dir hierbei auch die x/y-Position der oberen linken Ecke im Bild anzeigen - diese notierst Du Dir mit den herausgeschnittenen Bildmaßen.

Jipp, kein Problem, ich mache das alles in GIMP. Fuer mein Testbild
test1.jpg ist das Position 289,0 und Breite/Hoehe 72/41.

Nun bearbeitest Du diese Ausschnitte etwas nach, um einen Highlight-Effekt zu bekommen. Überlappungen sind hier ohne Bedeutung.

done.

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...

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.

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.
Aber den Rest scheine ich nicht hinzukriegen, jedenfalls funktioniert
das, was ich ausprobiere nicht. Oder nur teilweise:

http://physalia.de/tmp/TEST.html

Ich hab

• wunderbar die Karte
• 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>? Ausser dem <span> meine ich,
    brauche ich doch noch etwas, was ueberhaupt gehovert werden
    kann.
• Immerhin hab ich mit dem fest eingebauten Bildchen
    genial das Popup bei Hover und auch schoen positioniert.
• 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...?)

Letztlich kaeme ich auch ohne Teil-Bild-Highlighting aus,
solange ich nur die Popups habe!

Wenn Dir das mit der Bearbeitung der Grafiken zu aufwendig ist, könntest Du den Links vielleicht auch nur einen title geben und auf die Markierung verzichten.

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...(?)

LG

Nicola

[Ingo Turski]

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

[Nicola Straub]

Hi und erst mal Danke!

Also mal schaun http://physalia.de/tmp/TEST.html:

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.

Ich hab's jetzt erst mal im Hintergrund:
div#Karte {
        position:relative;
        width:558px;
        height:475px;
        background-image:url(images/sehenswertes.jpg);
        }

_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.

div#Karte a#l1 {
        display:block;
        width:72;
        height:42;
        position:absolute; top:0; left:289;
        background-image:url(images/test1.jpg);
        }

Ist IMO absolut positioniert. Liegt ueber der Karte: korrekt.
Klebt aber dennoch ziemlich weit links *seuftz*. So funktioniert
es aber jetzt ueber die Bildbreite statt der ganzen Zeile.
Aber das Bild ist zur falschen Position ja auch noch sichtbar.
(Im Grunde egal, ich koennte ja 40 trans.gifs machen, ich
brauche ja kein Highlighting (auch wenn ich es natuerlich
gern mal hinbekommen wuerde).)

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.

Hab ich so:

div#Karte a span {
        display: none;
        }

div#Karte a#l1:hover {
        display:block;
        width:72;
        height:42;
        position:absolute;
        top:0;
        left:289;
        background-image:url(images/test1.jpg);
        }

div#Karte a#l1:hover span {
        display: block;
        position: absolute; top: 40px; left: 0; width: 225px;
        padding: 5px;
        margin: 10px;
        z-index: 100;
        color: #AAA;
        background: black;
        font: 10px Verdana, sans-serif;
        text-align: center;
        }

Dabei hatte ich es doch so so einfach versucht zu erläutern..;-)

*seuftz* Ich kapiere ja das mit den IDs und dem Hovern *glaub ich*.
Mein Problem ist IMO wirklich eher diese komische Positionierung
von Links mit oder ohne Bildern im Link oder im Hintergrund(1)
und so weiter. Ich hab bisher halt _Bilder_ mit Tabellen zusammen-
gefuegt (wenn es nicht anders ging) und Links DA hingesetzt, wo sie
hinkommen sollten. Das war irgendwie berechenbar. Ich hab aber
auch nix gegen das absolute Positionieren, ist ja aehnlich wie
aus Imagemaps gewohnt: Nur, es tut es ja nicht! Bei mir! *grrr*.

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.

Ja, ich glaub schon, dass ich das kapiert hab. Was mir fehlt, ist:
Wieso setzt sich das Bild nach links rueber, obwohl ich left:298 angebe. Und wie finde ich einen sensiblen Bereich, wenn ich das
Austauschbildchen anfangs auf unsichtbar setze oder wenn ich
statt es IN den Link zu setzen dort ein &nbsp; setze. In beiden
Faellen geht mir der sensitive Bereich verloren.

(1) Ok, Bei &nbsp; hab ich eine Minizeile des Bildes oben sensitiv.

• 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.

div#Karte a#l1 {
        display:block;
        width:72;
        height:42;
        position:absolute; top:0; left:289;
        background-image:url(images/test1.jpg);
        }

(s.o.) Und dann:
<a id="l1" href="">&nbsp;
 <span>Südlichste Quellfassung der römischen Fernwasserleitung.
</span></a>

Gibt mir, wie gesagt eine Minizeile ganz oben im Kartenbild, die ich
dann mit Erfolg hovern kann.

Nur hast Du width und height wohl nicht gesetzt.

Doch! Oder wo koennte es noch fehlen? ;-(

LG
Danke fuer deine Geduld!

Nicola

[Zeromancer]

Hallo Nicola,

div#Karte a#l1 {
        display:block;
        width:72;
        height:42;
        position:absolute; top:0; left:289;
        background-image:url(images/test1.jpg);
        }

Es fehlen z.B. die Einheiten (px, cm, em?)

Mit freundlichen Grüßen

André

[Nicola Straub]

Hi!

Es fehlen z.B. die Einheiten (px, cm, em?)

*DUCK*

Au weia. Und schon funktioniert es. Wunderbar. Wie von
Ingo versprochen und in meinem Kopf ausgemalt.

Oh Mensch. Ich dachte _wirklich_, wenn man nix schreibt,
greift Browser zu px. ;-(

Ich stell mich dann mal ne halbe Stunde in die Ecke.
Nur falls mich jemand sucht. Dann wisst Ihr Bescheid...

LG

Nicola

[Nicola Straub]

Falls noch andere auf dem Schlauch stehen mit den
CSS Popups: ich hab es jetzt fuer die Punkte 1-3
schnell noch durchgespielt und finde es wirklich
schoen. Wird nur ein Riesenhaufen CSS fuer die
knapp 40 Punkte. Zumal ich die Popups ja relativ vom
Bildchen positionieren muss und damit also je Bild
neu, schade. Aber JS ist ja auch nicht unbedingt
soo viel schlanker...

http://physalia.de/tmp/TEST.html

Und jetzt verlasse ich meine Schaem-Ecke und setze mich
auf die Autobahn nach Hause.

Herzliche Gruesse

Nicola

[Ingo Turski]

Hi,

finde es wirklich schoen.

stimmt.

Wird nur ein Riesenhaufen CSS fuer die knapp 40 Punkte.

aber nur, weil Du es wirklich zu umständlich machst und vieles mehrfach definierst.

div#Karte a#l1 {
         display:block;           /* hast Du bereits zu div#Karte a angegeben */
         width:72px; height:41px;
         position:absolute;       /* solltest Du allgemein bei div#Karte a angeben */
         top:0px; left:289px;
        }
div#Karte a#l1:hover {
  display:block;           /* ist überflüssig */
         width:72px; height:41px;
         position:absolute;       /* ist überflüssig */
         top:0px; left:289px;
         background-image:url(images/test1.jpg);
        }
div#Karte a#l1:hover span {
  display: block;          /* hast Du bereits zu div#Karte a:hover span angegeben */
  position: absolute;      /* das ebenfalls */
         top:40px; left:-280px;
         width:225px;
        }

freundliche Grüße
Ingo