[Erledigt] Probleme mit der darstellung

25.10.2005, 09:03

Hi,

ich habe hier mal was versucht:

http://newwarrior.milten.lima-city.de/test2.html

Aber eigentlich wollte ich es so, wenn man über den SUer fährt, nicht das alles verschwindet und die Box da ist, sondern das alles da bleibt und zusätzlich die Box kommt.
Aber irgendiwe klappt es nicht hier mal mein script

info.js:

Code:

var infoHTML = new Array();
var endeHTML = "Info_Ende";
infoHTML[0] = "<p class="tooltipp">Username: Malte
Passwort: *****
Alter: 17 
</p>";
infoHTML[0] += "<p class="tooltipp">"+endeHTML+"</p>";
infoHTML[1] = "<p class="tooltipp">Username: Karl
Passwort: *****
Alter: 12 
</p>";
infoHTML[1] += "<p class="tooltipp">"+endeHTML+"</p>";

function info(i) {
 if(! document.getElementById) return;
 document.getElementsByTagName("dfn")[i].style.cursor = "help";
 var x = document.getElementsByTagName("dfn")[i].offsetLeft;
 var y = document.getElementsByTagName("dfn")[i].offsetTop;
 document.getElementById("Tooltipp").innerHTML = infoHTML[i];
 document.getElementById("Tooltipp").style.left = (x - 60) + "px";
 document.getElementById("Tooltipp").style.top = (y + 20) + "px";
 document.getElementById("Tooltipp").style.width = "250px";
 document.getElementById("Tooltipp").style.display = "block";
}

function ende() {
 if(! document.getElementById) return;
 document.getElementById("Tooltipp").style.display = "none";
 document.getElementById("Tooltipp").innerHTML = "";
}

format.css:

Code:

body { 
 margin-top:20px; margin-left:120px; 
 margin-right:120px; margin-bottom:10px;
 background-color:#FFFFFF; }

h1,h2,h3,p,ul,ol,li,td,th { font-family:Verdana,sans-serif; }
h1 { 
font-size:24pt; font-weight:normal; 
     color:#D00000; padding-bottom:10px;
     border-bottom:solid 3px #D00000; }
h2 { font-size:22pt; color:#D00000; }
h3 { font-size:18pt; color:#D00000; }
p,ul,ol,li,td,th { font-size:16px; color:#000000; 
                   line-height:19px; }
dfn {
 font-weight:bold; font-style:normal; 
 font-family:Arial,sans-serif;
 }

.tooltipp {
 font-family:Verdana,sans-serif; font-size:13px; 
  color:#000000; line-height:14px; 
  margin-top:2px; margin-bottom:4px;
 }

#Tooltipp { 
  position:absolute; border:2px solid #D00000;
  padding:10px; background-color:#FFFFC0;
 }
a:link, a:visited { color:#D00000; text-decoration:none; }
a:hover, a:active { color:#D00000; text-decoration:underline; }

und zum schluss test2.html:

Code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>Test</title>
<meta http-equiv="content-type" content="text/html; charset=ISO-8859-1">
<link rel="stylesheet" href="format.css" type="text/css">
<script type="text/javascript" src="info.js"></script>
</head>
<body>




<div id="Tooltipp">


User Nummer eins: <dfn onMouseover="info(0)">Malte</dfn> </p>



User Nummer zwei:<dfn onMouseover="info(1)">Karl</dfn></p>
</div>
</body>
</html>

Stichworte: -

Ankündigung

[Erledigt] Probleme mit der darstellung

Neue Werbung 2019

[Erledigt] Probleme mit der darstellung