Ankündigung

Einklappen
Keine Ankündigung bisher.

[Erledigt] Probleme mit der darstellung

Einklappen

Neue Werbung 2019

Einklappen
X
  • Filter
  • Zeit
  • Anzeigen
Alles löschen
neue Beiträge

  • [Erledigt] Probleme mit der darstellung

    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>

Lädt...
X