Ferienhaus Micki in Tschechien


 

Wie kann man ein Bild verlinken und gleichzeitig einen Hinweistext, der mit mouseover funktioniert, hinzufügen?


Beispiel: 

Wichtige Informationen: Das sind die Informationen für Sie, die nicht mit Gold zu bezahlen sind.
Hinweis auf einen Link dazu:
http://www.ferienhaus-micki-
tschechien.de/html/translate/translate-tschechisch.htm
Mit einem Klick geht's weiter...  Übersetzungen
Linktipps:

 

Man fügt folgenden Code in den Html-Quelltext ein
 

<a class="info" href="http://www.ferienhaus-micki-tschechien.de/html/translate/translate-tschechisch.htm"><img
src="book.gif" alt width="16" height="13" border="0"><span> <b>Wichtige Informationen:</b>
Das sind die Informationen für Sie, die nicht mit Gold zu bezahlen sind... :-)<br>
<b>Einen Link dazu:</b><br>
http://www.ferienhaus-micki-tschechien.de/html/translate/translate-tschechisch.htm<br>
Mit einem Klick geht's weiter...</span></a>

Natürlich muss book.gif am angegeben Ort existieren.
Den Text für das Hinweisfenster können Sie im Quelltext oder auch mit Frontpage beliebig editieren und formatieren.

Außerdem muss im Head-Bereich der Html-Seite ein Verweis zur Stylesheet-Datei vorhanden sein. Das sieht dann so aus:

<link rel="stylesheet" type="text/css" media="screen" href="meine_stylesheet-datei.css">
In der Stylesheet-Datei, zum Beispiel    meine_stylesheet_datei.css   muss dann folgender Inhalt vorhanden sein (man erstellt sie aus einer einfachen txt-Datei durch Umbenennen der Endung in css):
a.info {
position:relative;
z-index:24;
background-color: #FFF000;
color: #0FF000;
text-decoration:none;
}
a.info:hover {
z-index:25;
background-color: #FFFFFF;
}
a.info span {
display:none;
}
a.info:hover span {
display:block;
position:absolute;
top:2em;
left:2em;
width:30em;
border:1px solid #000000;
background-color: #F8F8CB;
color: #000000;
text-align:left;
padding:6px;
}
Auch hier kann natürlich das Aussehen des Fensters editiert werden.