✔ Mouse-over und Text anzeigen?

Status
Nicht offen für weitere Antworten.
G

GFX-Händchen

Erfahrenes Mitglied
Hi all,

habe über Googel schon geschaut aber nichts passendes gefunden.:(
Ist es möglich, dass man per CSS bei z.B. a:hover einen Text eingeben kann, also wenn die Maus über ein Bild ist, dass dann ein Text sichtbar wird?:confused:

Möchte nämlich gerne angeben, dass wenn man auf das Bild klickt, dass es dann in einem neuen Fenster größer erscheint.;)
Also z.B. "Hier klicken um das Bild zu vergrößern".
 
Ahhh, danke!:)
Über ein Beispiel, welches mir den obigen Text in 1 Zeile bringt würde ich mich auch freuen.;)

Folgendes habe ich probiert aber das klappt nicht ohne weiteres:
http://www.brunildo.org/test/CPop.html
Muss ich evtl. jeder Grafik dann wieder ein "Class" voranstellen?:confused:

Mein derzeitiger Html-Quellcode mit CSS:
<html>

<head>
<title>Bad</title>
<meta name="GENERATOR" content="Microsoft FrontPage 3.0">
<style type="text/css">
body { background-image:url(Bilder/index_03_blau.png); background-attachment:fixed; }
a img {border:none;}
</style>
</head>

<body>

<p align="center">Bilder vom WC / Bad der Ferienwohnung</p>

<p align="left"><a href="ferienwohnung.html">Hier gelangen Sie zur?ck zur
Bilder?bersicht</a></p>

<p align="left"><a href="Bilder-fewo/vergroessert/RIMG2137.jpg" target="_blank"><img
src="Bilder-fewo/RIMG2137.jpg" width="300" height="200"
style="float:left; margin-right:20px;
margin-bottom:10px"
alt="RIMG2108.jpg (69900 bytes)"></a><font size="4">Das Badezimmer ist mit einer
Badewanne, einer separaten Duschkabine und WC ausgestattet.<br>
Zus?tzlich befindet sich auch noch ein G?ste-WC in der Wohnung.</font></p>

<p align="left">&nbsp;</p>

<p align="left">&nbsp;</p>

<p align="left">&nbsp;</p>

<p align="left">&nbsp;</p>

<p align="left"><a href="ferienwohnung.html">Hier gelangen Sie zur?ck zur
Bilder?bersicht</a></p>
</body>
</html>
Zum Vergrößern anklicken....
Wenn ich erst einmal das Muster begriffen habe, dann kann ich es für die weiteren Seiten bzw. Grafiken anwenden.;)
 
Vermutlich hast du die float-Eigenschaft für das Grafikelement nicht direkt auf den Link übertragen, ansonsten kann ich bei mir soweit keine Probleme feststellen:

Code: 
#info a { position:relative; }
#info a:hover { border:none; }
#info a .pop {
   display: block;
   position: absolute;
   top: 0; left: 13.2em;
   visibility: hidden;
}
#info a:hover .pop {
   visibility: visible;
}
Code: 
<p align="left" id="info">
   <a href="Bilder-fewo/vergroessert/RIMG2137.jpg" target="_blank" style="float:left; margin-right:20px;margin-bottom:10px"><img src="Bilder-fewo/RIMG2137.jpg" width="300" height="200" alt="RIMG2108.jpg (69900 bytes)"><span class="pop">Hier klicken um das Bild zu vergrößern</span></a>
   <font size="4">Das Badezimmer ist mit einer
Badewanne, einer separaten Duschkabine und WC ausgestattet.<br>
Zus?tzlich befindet sich auch noch ein G?ste-WC in der Wohnung.
  </font>
</p>
@shadowjohnny: Auf der verlinkten Seite wird Javascript eingesetzt. So viel zum Mouseover mit CSS.
 
Wo ist das Problem bei JavaScript? Ist zwar nicht danach gefragt worden, aber funktioniert und ist relativ einfach auch bei mehreren Bildern.

mfg shadow
 
@shadowjohnny
Danke für den Link, aber JavaScript möchte ich nicht einsetzen!

@Maik
Danke auch an dich.:)
Leider ist es aber mit dem Code so, dass der Text, wenn man mit der Maus aufs Bild geht, oben im rechten Eck (block) der Grafik eingeblendet wird anstatt als Zeile.:rolleyes:
Ok, dafür ist vielleicht das "display" schuld.;)
 
Zuletzt bearbeitet:
GFX-Händchen hat gesagt.:
Leider ist es aber mit dem Code so, dass der Text, wenn man mit der Maus aufs Bild geht, oben im rechten Eck (block) der Grafik eingeblendet wird anstatt als Zeile.:rolleyes:
Ok, dafür ist vielleicht das "display" schuld.;)
Zum Vergrößern anklicken....
Oder die Positionierung aus dem Original-Beispiel?

Code: 
#info a .pop {
   display: block;
   /*position: absolute;*/
   /*top: 0; left: 13.2em;*/
   visibility: hidden;
}
Wo soll denn der Text erscheinen?
 
Dieses display hatte ich ja gemeint.:D
Lasse ich diese eine Zeile weg, ist es aber immer noch im obigen rechten Eck.:rolleyes:

Ändere ich das "top" dann wandert die Schrift vom Eck mehr nach unten.;)

Ändere ich es z.B. auf:
Code: 
 top: 30; left: 2.2em;
dann ist der Text in 1 Zeile (wie gewollt!) :), allerdings im Bild.
Geht es nicht, dass der Text direkt neben dem Mauszeiger ist egal an welcher Position des Bildes dieser ist?:confused:
 
Status
Nicht offen für weitere Antworten.

Neue Beiträge

Zurück