Javascript Tooltip

Webdesign & Technik HTML & CSS
#1

Hallo, ich habe folgendes Problem:
Ich will auf meiner Website eine Art Tooltip erstellen, das beim Überfahren eines Links erscheint.
Das funktioniert soweit auch ganz gut, aber der Inhalt unter dem Tooltip “rutscht” beim Aufklappen immer zur Seite. Ich könnte das Problem beheben, indem ich anstatt “position:relative” “position:absolute” verwenden, doch das stimmt dann nur noch beieiner bestimmten Fenstergröße.

Quelltext:

<!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>
<link href="style.css" rel="stylesheet" type="text/css" />
<link href="nav.css" rel="stylesheet" type="text/css" />
<style type="text/css">
.layer1 {
position:relative;
top:-40px;
left:2px;
}
</style>
<script type="text/javascript">
function show(var1) {
document.getElementById(var1).style.display="inline";
}
function hide(var1) {
document.getElementById(var1).style.display="none";
}
</script>
</head>

<body>
<center>
 
  <table border="1" id="maincontent">
	<tr>
		<td><img height="50%" src="images/contentrand.jpg" alt="" /></td>
		<td id="maincontent">
	
			<!----------------Navigation---------------->
			<img src="images/logo.png" alt="Logo von Felix Glang" width="823" height="213" />
			<table border="0" cellpadding="0" cellspacing="0" class="layer1">
				<tr>
					<td id="nav">
					<a 
					onmouseover="show('startlayer');" 
					onmouseout="hide('startlayer');" 
					onfocus="this.blur();" 
					id="nav" 
					href="#">
					Startseite</a>
					</td>
					<td id="nav">
					<a 
					onmouseover="show('musiklayer');" 
					onmouseout="hide('musiklayer');" 
					onfocus="this.blur();" 
					id="nav" 
					href="#">
					Musik</a>
					</td>
					<td id="nav">
					<a 
					onmouseover="show('fotolayer');" 
					onmouseout="hide('fotolayer');" 
					onfocus="this.blur();" 
					id="nav" 
					href="#">
					Fotos</a>
					</td>
					<td id="nav">
					<a 
					onmouseover="show('uploadlayer');" 
					onmouseout="hide('uploadlayer');" 
					onfocus="this.blur();" 
					id="nav" 
					href="#">
					Upload</a>
					</td>
					<td id="nav">
					<a 
					onmouseover="show('gblayer');" 
					onmouseout="hide('gblayer');" 
					onfocus="this.blur();" 
					id="nav" 
					href="#">
					G&auml;stebuch</a>
					</td>
				</tr>
			</table>
			<!---Tooltips //-->
			<div class="tooltip" style="position:absolute; left:18%; top: 28%; display:block; width: 144px; text-align:center; z-index:2;" id="startlayer">
Das ist die Startseite von meiner Homepage. Herzlich Willkommen!</div>

            <div class="tooltip" style="position:absolute; left: 166px; top: 40px; display:block; width: 144px; text-align:center; z-index:2;" id="musiklayer">Hier k&ouml;nnt ihr Musik anh&ouml;hren</div>
			
			<div class="tooltip" style="position:absolute; left: 330px; top: 40px; display:block; width: 144px; text-align:center; z-index:2;" id="fotolayer">Hier sind meine Fotos von verschiedenen Ereignissen. Um sie zu sehen, m&uuml;sst ihr ein Passwort beantragen</div>
			
			<div class="tooltip" style="position:absolute; left: 494px; top: 40px; display:block; width: 144px; text-align:center; z-index:2;" id="uploadlayer">In diesem Bereich k&ouml;nnt ihr eigene Dateien, z.B. Bilder, Texte etc. hochladen.</div>
			
			<div class="tooltip" style="position:absolute; left: 658px; top: 40px; display:block; width: 144px; text-align:center; z-index:2;" id="gblayer">Das G&auml;stebuch f&uuml;r Besucher, die gerne einen Kommentar hinterlassen w&uuml;rden</div>
			<!---Ende Tooltips //-->
			 <!----------------Ende Navigation---------------->
			 <iframe src="########" width="100%" height="500"></iframe>
	  </td>
		<td><img height="50%" src="images/contentrand.jpg" alt="" /></td>
	</tr>

</table>
</center>
</body>
</html>

Vielen Dank im Voraus

#2

Spar dir die Arbeit.
Das haben andere Leute schon fertiggebracht, perfektioniert und unter GPL veröffentlicht:
bosrup.com/web/overlib/

Besser geht’s kaum :smiley:

#3

der link scheint tot…gibts da noch was? will das auch :p

#4

Hä? :ps:

#5

nun gehts…frag mich nicht :smiley: