25.02.2008, 20:43
So scheint es auch für mehrere Bilder zu funktionieren:
CSS
HTML
CSS
Code:
ul
{
margin: 0;
padding:0;
list-style: none;
}
li
{
list-style-type: none;
float: left;
margin: 0 10px 10px 0;
text-align: center;
font-weight: bold;
position: relative;
}
a.info
{
position:relative;
color:#2D006B;
text-decoration:none;
}
a.info span
{
display: none;
}
a.info:hover span
{
display:block;
width:15em;
border:1px solid #12127D;
background-color:#fc0;
color:#000;
text-align: center;
padding: 5px;
font-size: 0.8em;
position: relative;
top: -100px;
left: 0;
z-index:5;
}
HTML
Code:
<ul>
<li>
<a class="info" href="#"><img src="bild1.jpg" width="" height="" border="0" alt=""><span>Hallo, ich bin ein Tooltip oder das CSS-Info-Popup-Fenster. Hier kannst du Infos reinschreiben</span></a>
</li>
<li>
<a class="info" href="#"><img src="bild2.jpg" width="" height="" border="0" alt=""><span>Hallo, ich bin ein Tooltip oder das CSS-Info-Popup-Fenster. Hier kannst du Infos reinschreiben</span></a>
</li>
</ul>