M
Maik
Basierend auf Bruno Fassinos CSS-Popups habe ich mal ein alternatives Lösungsbeispiel erstellt:
HTML:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title>Pure CSS Popups with Auto Absolute Positioning</title>
<style type="text/css">
span.popup {
display: none;
}
a {
text-decoration: underline;
color: #00C0FF;
}
a.textlink:hover {
border-width: 0;
}
a.textlink:hover .popup {
display: inline;
position: absolute;
background-color: #fff;
border: 1px #000 solid;
}
img {
border: none;
cursor: pointer;
}
</style>
</head>
<body>
<ul>
<li><a class="textlink" href="#">Textlink 1<span class="popup"><img src="http://download.openoffice.org/branding/images/logonew.gif" onclick="window.open('http://download.openoffice.org','Fenster')"></span></a> als Listenpunkt</li>
<li><a class="textlink" href="#">Textlink 2<span class="popup"><img src="http://www.google.com/images/firefox/google.gif" onclick="window.open('http://www.google.com','Fenster')"></span></a> als Listenpunkt</li>
</ul>
<p><a class="textlink" href="#">Textlink 3<span class="popup"><img src="http://www.google.com/images/firefox/fox1.gif" onclick="window.open('http://www.firefox.com','Fenster')"></span></a> und ein sinnloser Text bis zu <a class="textlink" href="#">Textlink 4<span class="popup"><img src="http://www.google.com/images/firefox/light.gif" onclick="window.open('http://www.google.com','Fenster')"></span></a> innerhalb eines Textabsatzes.</p>
<p>Hier folgt ein Textabsatz, um zu demonstrieren, daß er sich beim Einblenden der CSS-Popups nicht verschiebt.</p>
</body>
</html>
