nicht angemeldet
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 setze. In beiden
Faellen geht mir der sensitive Bereich verloren.
(1) Ok, Bei 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 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="">
<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