✔ Bei Mouse Over soll ein Bild erscheinen

Status
Nicht offen für weitere Antworten.
B

BeachBoy

Mitglied
Hallo!
Ich habe mal eine Frage bzw. kann mir jemand sagen wie man so etwas machen kann.
Ich möchte folgendes haben:

Ich habe einen normalen Link mit HTML. Der Link ist mittig auf der Seite.
Jetzt möchte ich, dass ein Bild erscheint, wenn man über diesen Link mit der Maus drüberfährt. Das Bild soll am linken Bildrand erscheinen (mit etwas Abstand zum Rand). Wenn es möglich ist, sollte der untere Bildrand in höhe des Links sein.
Dann möchte ich, dass das Bild wieder verschwindet, wenn man den Link wieder verlässt.

Wie realisiere ich das mit CSS, oder wäre es besser dafür JavaScript zu benutzen?
Vielleicht könnte mir jemand, der sich besser mit CSS auskennt, den passenden Quelltext posten.

Besten Danke,
Sebastian
 
CSS-Modell für eine Popup-Box, die am linken Fensterrand postioniert ist bzw. eingeblendet wird:

  • Browsercheck: FF 1.0.2, IE 6.0, MOZ 1.6, NN 7.0, OP 8.50

HTML: 
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
  "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=ISO-8859-1">
<title>:::css.popup:::</title>

<style type="text/css">
<!--
body
{
margin: 0;
padding: 0;
text-align: center;
background: #ffffff;
}

a.popup:link, a.popup:visited
{
display: block;
margin-top: 50px;
color: #000000;
}

a.popup:hover
{
background: #ffffff; /* Seitenhintergrundfarbe */
}

a.popup span /* PopUp-Box nicht anzeigen */
{
display: none;
}

a.popup:hover span /* PopUp-Box anzeigen */
{
display: block;
position: absolute;
left: 10px;
top: 50px;
width: 250px; /* Grafik-Breite */
height: 300px; /* Grafik-Höhe */
background: #f5f5f5; 
text-decoration: none;
}
-->
</style>

</head>
<body>

<p>
   <a href="#" class="popup">Demo<span>Info: keine Grafik geladen<!--<img src="Grafik-URL" alt="">--></span></a>
</p>

</body>
</html>

[editpost]

Workaround, um den unteren Grafik-Rand auf eine Höhe mit dem Link zu setzen. In diesem Beispiel ist die Grafik 70px hoch.

  • Browsercheck: FF 1.0.2, IE 6.0, MOZ 1.6, NN 7.0, OP 8.50
CSS-Code:
Code: 
body
{
margin: 0;
padding: 0;
text-align: center;
background: #ffffff;
}

a.popup:link, a.popup:visited
{
display: block;
margin-top: 150px;
line-height: 24px;
font-size: 12px;
color: #000000;
}

a.popup:hover
{
background: #ffffff; /* Seitenhintergrundfarbe */
}

a.popup span /* PopUp-Box nicht anzeigen */
{
display: none;
}

a.popup:hover span /* PopUp-Box anzeigen */
{
display: block;
position: absolute;
left: 10px;
top: 98px; /* = 150px + 24px - 70px - ((24px-12px)/2) */
width: 70px; /* Grafik-Breite */
height: 70px; /* Grafik-Höhe */
text-decoration: none;
}
HTML: 
<p>
   <a href="#" class="popup">Demo<span><img src="Grafik-URL" border="0" alt=""></span></a>
</p>
 
Zuletzt bearbeitet von einem Moderator:
ja funktioniert schonmal so.

jetzt will ich aber den Link nach unten verschieben durch <br>. Das Bild bleibt dann an der gleichen Stelle wo es vorher war. Das heißt ich müsste das Bild bzw. das top neu ausrichten. Das macht auch weiter keine Probleme.
Die Frage ist, wie die Darstellungsformen der einzelnen Browser ist bezüglich der Schriftart? Wenn im IE jetzt die Schrift 100px vom oberen Rand ist, ist es in Netscape und anderen Browsern auch so, da ich ja das Bild anhand des Textes ausrichten möchte?

Dann möchte ich jetzt nicht nur ein Link mit einem Bild haben, sondern mehrere Links mit verschiedenen Bildern. Muss ich jetzt den ganzen Quelltext für die anderen Links rüberkopieren oder gibt es eine einfachere Möglichkeit? Geht das überhaupt mit dem rüberkopieren, da ich ja die ganzen Klamotten für die Links schon definiert habe (mehrfach definition möglich)?

nachdem ich mir grad nochmal den Quelltext angeschaut habe, ist mir gleich die Antwort für die zweite Frage eingefallen.
a.popup:hover dabei ist popup die Klasse, und wenn ich mir einfach eine neue Klasse a.popup2:hover erstelle, müsste ich ein anderes Bild an anderer Stelle für andere Links anzeigen lassen können. Is ja super ;).

Trotzdem bleibt noch die erste Frage in obigen Nachricht, und zwar, wie es mit den Darstellungsformen der Schriftarten bei den verschiedenen Browsern ist?

Bestan Dank,
Sebastian
 
Wenn eine Schriftart / Schriftfamilie mit Schriftgrösse für das Dokument bestimmt wird, dann stellen die unterschiedlichen Browsers sie auch einheitlich dar.

Code: 
body
{
font-family: verdana, sans-serif;
font-size: 12px;
}
 
Status
Nicht offen für weitere Antworten.

Neue Beiträge

Zurück