nicht angemeldet
display link information above the link
Hallo,
ich suche nun schon ewig nach einem guten Javascript Beispiel, dass wenn man die Maus über einen Link bewegt eine Information über dem Link (und der HTML Seite) angezeigt bekommt, z.B. in Form einer Sprechblase oder einem sonstigen Fenster, dass sich über der normalen HTML Seite öffnet und nicht aussieht wie ein neues Browserfenster oder einer alert Nachricht.
Code-Versuche:
HTML:
<a href="localhost" onMouseover="javascript:open_link_info('info_id',this,'hello world');" onMouseout="javascript:close_link_info('info_id');"> linkname </a>
Javascript:
function close_link_info(id){
//Sprechblase schließen
document.getElementById(id).style.visibility = "hidden";???
}
function open_link_info(id,link_id,msg){
//Position des Links feststellen und Position für die Sprechblase ermitteln
document.getElementById(id).style.right = 20;???
document.getElementById(id).style.top = 10;???
//Informationsinhalt der Sprechblase setzen
document.getElementById(id).firstChild.nodeValue = msg;???
//Sprechblase öffnen und anzeigen
document.getElementById(id).style.visibility = "visible";???
}
Ich wäre euch sehr dankbar, wenn mir jemand mitteilen könnte wie ich dieses realisieren könnte oder wo ich ein gutes Beispiel dazu finden könnte.
Danke schon mal vorab
-
Hi!
Muß es denn unbedingt eine Javascript-basierte Lösung sein?
Hast du schon einmal daran gedacht, dies mit CSS zu lösen?
Was hälst du denn beispielsweise von der Self-Infobox?
http://aktuell.de.selfhtml.org/artikel/css/infobox/
Lies dir mal diesen Artikel durch. Eventuell ist dieser Lösungsansatz für dich ja viel besser geeignet als ein Javascript.Schöner Gruß,
rob -
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