nicht angemeldet
Hallo,
mit CSS geht das natürlich viel besser.
Aber hier mal ne kleine Datei.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Unbenanntes Dokument</title>
<script type="text/javascript">
function getPosition(obj) {
var pos = { x:0, y:0 };
do {
pos.x += obj.offsetLeft;
pos.y += obj.offsetTop;
} while (obj = obj.offsetParent);
return pos;
}
function open_link_info(index){
// AnkerTag
var link_obj = document.getElementsByTagName("a")[index];
var link_pos = getPosition(link_obj);
// Sprechblase
var bubble_obj = document.getElementsByTagName("div")[index];
bubble_obj.style.left = link_pos.x + 5;
bubble_obj.style.top = link_pos.y - 5 - bubble_obj.style.height;
//Sprechblase öffnen und anzeigen
bubble_obj.style.visibility = "visible";
}
function close_link_info(index)
{
var bubble_obj = document.getElementsByTagName("div")[index];
bubble_obj.style.visibility = "hidden";
}
</script>
<style type="text/css">
div
{
visibility: hidden;
position: absolute;
background-color: #ffe0ef;
border: 1px solid #484848;
}
</style>
</head>
<body>
<a href="#" onmouseover="open_link_info(0);" onmouseout="close_link_info(0);">Link #1</a><br />
<a href="#" onmouseover="open_link_info(1);" onmouseout="close_link_info(1);" >Link #2</a><br />
<a href="#" onmouseover="open_link_info(2);" onmouseout="close_link_info(2);" >Link #3</a><br />
<div>Inhalt 1</div>
<div>Inhalt 2</div>
<div>Inhalt 3</div>
</body>
</html>
Viele Grüße,
Philip