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