✔ Beim Überfliegen eines Links, soll ein Bild erscheinen

Status
Nicht offen für weitere Antworten.
Eiszwerg

Eiszwerg

Erfahrenes Mitglied
Moin Community,

der Titel sagt es ja eigentlich schon aus:
ich habe einen Link in einem Text und beim Überfliegen des Links mit der Maus soll eine zugehörige Grafik erscheinen. Am Liebsten natürlich, ohne den Textfluß zu stören.

Geht das mittels CSS? Und wenn ja, wie gehe ich das an?

Ich danke für jede Anregung im Voraus!
 
Hi,

versuch es mal hiermit:

Code: 
a.infobox:link, a.infobox:visited {
  text-decoration: none;
}
a.infobox:hover {
  border: none;
  color: #ff0000;
  text-decoration: underline;
}
a.infobox span {
  visibility: hidden;
  position: absolute;
}
a.infobox:hover span {
  visibility: visible;
}

a.infobox:hover span img {
  display: block;
  border: none;
}
Code: 
<a href="#" class="infobox">CSS-Popup<span><img src="..." alt="..."></span></a>
 
Sieht schon mal sehr sehr gut aus.
Werde mal probieren, ob ich das mit dem positionieren selber hinbekomme.

Vielen Dank soweit!!
 
Zu früh gefreut :(
Habe es, nachdem FF alles sauber angezeigt hat, mal im IE geöffnet und musste weinen :eek:
Der Text steht nämlich in einem div und sobald ich über den Link hover, erscheint zwar das Bild, wird aber überall da abgeschnitten, wo es an das div stösst.

Ich hatte nun gedacht, dass ich das per z-index lösen kann, habe aber bisher damit keinen Erfolg gehabt.
Ich habe es so probiert, dass ich dem div die -1 gegeben habe und a.infobox:hover span img wurde mit 5 bestückt als z-index

Ideen?
 
Klar :)
Ich hoffe ich habe nix relevantes vergessen.
Das div liegt in einer normalen Tabellen-Zelle.

Code: 
.desc
{
padding:5px;
overflow:auto;
height:180px;
z-index:-1;
}

legend
{
border:1px solid black;
background:#BBBBBB;
padding:0 2px 0 2px;
font-weight:bold;
}

a.infobox:link, a.infobox:visited {
  text-decoration: none;
}
a.infobox:hover {
  border: none;
  color: #ff0000;
  text-decoration: underline;
}
a.infobox span {
  visibility: hidden;
  position: absolute;
}
a.infobox:hover span {
  visibility: visible;
}

a.infobox:hover span img {
  display: block;
  border: none;
  z-index:5;
}

HTML: 
<fieldset>
<legend>Rundgang Wohnung Stein</legend>
<div class="desc">
<p>
Die Wohnung STEIN ist geplant und eingerichtet für die Nutzung durch 1- 2 Erwachsene, eventuell in Begleitung von 1 – 2 Kindern. Sie hat ihren Zugang vom Vorplatz (B) des Treppenhauses (A). 
</p>
<p>
Die Schuhstellage und die Garderobenhaken neben der Wohnungstür, die durch ein Foto (<a href="#" class="infobox">Bild<span><img src="gfx/stein/stein_01.jpg" alt="..."></span></a>) gekennzeichnet ist, gehören allerdings bereits zum Inventar von STEIN.
</p>
</div>
</fieldset>
 
Zuletzt bearbeitet:
Args!
Den brauch ich aber...
Kann ich sonst das Bild, welches erscheinen soll nicht irgendwie da rauskriegen aus dem DIV?
Besteht per CSS die Möglichkeit ein Bild in einem anderen Element anzeigen zu lassen?
Also, dass ich irgendwo ein Element definiere, welches erst unsichtbar ist und wenn ich dann über den Link husche, ist das Bild plötzlich da?
Müsste aber ohne großen Aufwand für 20 Bilder möglich sein :suspekt:

Hintergrund der Geschichte: Es geht um einen Beschreibungstext eine FerienWohnung, welcher eben Links zu Bildern enthält, welche ich ungerne in PopUps öffnen möchte.

Bin für jede Hilfe dankbar :)
 
Zuletzt bearbeitet:
Wenn das Bild beim Überfahren des Links innerhalb eines anderen Elements ein- und ausgeblendet werden soll, kommst du mit CSS nicht weit, denn hierfür benötigst du dann Javascript.
 
Status
Nicht offen für weitere Antworten.

Neue Beiträge

Zurück