tooltip menu

**Evu** · 05.01.2006 13:02

hiho
ich bröuchte n tutorial zu nem tooltip menü bzw einer onmouseover-layer konstruktion in html/css die mit jedem browser kompertibel ist (nicht so wie auf der "flaggen in css"-site
auf der linken seite das menü, denn dieses wird nicht vom ie wiedergegeben)
das sollte dann so aussehen wie auf giga.de die tooltipmenüs, welche beim überfahren der
artikel, tv, features, community, info -button entstehen.
hoffe ihr könnt mir helfen denn bei google hab ich nix gefunden...
thx schonmal

**Milchbox** · 05.01.2006 15:16

Ich habs irgendwie nicht auf Giga gefunden aber ich denke du suchst sowas:

HTML-Code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
<STYLE>
   .ttip {border:1px solid black;font-size:12px;layer-background-color:lightyellow;background-color:lightyellow}
  </STYLE>
<script>
     var tip=new Array
           tip[0]='Blablabla!'
           tip[1]='lmlmlmlmlololol!'
           tip[2]='hehehe!'
           tip[3]='lol<br>grrrrrrrrrrrrr'
           
     function showtip(current,e,num)
        {
         if (document.layers) // Netscape 4.0+
            {
             theString="<DIV CLASS='ttip'>"+tip[num]+"</DIV>"
             document.tooltip.document.write(theString)
             document.tooltip.document.close()
             document.tooltip.left=e.pageX+14
             document.tooltip.top=e.pageY+2
             document.tooltip.visibility="show"
            }
         else
           {
            if(document.getElementById) // Netscape 6.0+ and Internet Explorer 5.0+
              {
               elm=document.getElementById("tooltip")
               elml=current
               elm.innerHTML=tip[num]
               elm.style.height=elml.style.height
               elm.style.top=parseInt(elml.offsetTop+elml.offsetHeight)
               elm.style.left=parseInt(elml.offsetLeft+elml.offsetWidth+10)
               elm.style.visibility = "visible"
              }
           }
        }
function hidetip(){
if (document.layers) // Netscape 4.0+
   {
    document.tooltip.visibility="hidden"
   }
else
  {
   if(document.getElementById) // Netscape 6.0+ and Internet Explorer 5.0+
     {
      elm.style.visibility="hidden"
     }
  } 
}
</script>
<body>
<div id="tooltip" style="position:absolute;visibility:hidden;border:1px solid black;font-size:12px;layer-background-color:lightyellow;background-color:lightyellow;padding:1px"></div>

<a href="http://www.milchbox.com" onMouseover="showtip(this,event,'0')" onMouseOut="hidetip()">Test</a>
<br>
<a href="http://www.milchbox.com" onMouseover="showtip(this,event,'1')" onMouseOut="hidetip()">Test</a>
<br>
<a href="http://www.milchbox.com" onMouseover="showtip(this,event,'2')" onMouseOut="hidetip()">Test</a>
<br>
<a href="http://www.milchbox.com" onMouseover="showtip(this,event,'3')" onMouseOut="hidetip()">Test</a></body></html>

Man kanns ja noch abändern

Edit: Jetzt hab ich verstanden

Mit CSS geht das guck mal auf SelfHTML

**drunken monkey** · 05.01.2006 17:06

@ Milchbox: Das Javascript von dir ist von vorn bis hinten falsch. Du hast sämtliche Strichpunkte vergessen, verwendest Eigenschaften, die's nicht gibt und vergisst Variablendeklarationen.

@ Evulution: Bist du dir sicher, dass CSS nicht geht? Ich glaube nämlich schon, dass der IE damit klar kommt, bin mir aber nicht sicher. Ich unterstütz den grundsätzlich nicht, aus Protest!

Aber ohne Style-Attribute kann das Ganze gar nicht gehen, also muss mit dem verwendeten Stylesheet was nicht stimmen.

**Milchbox** · 05.01.2006 20:01

Pech das hab ich nur kopiert

**Geiu** · 05.01.2006 21:50

Zitat von drunken monkey

Bist du dir sicher, dass CSS nicht geht? Ich glaube nämlich schon, dass der IE damit klar kommt, bin mir aber nicht sicher. Ich unterstütz den grundsätzlich nicht, aus Protest!

Es geht im IE nur mit links (<a>), nicht aber mit anderen Elementen. In gescheiten Browsern geht :hover auf alles.

Ne Lösung für sowas wär http://alistapart.com/articles/dropdowns, allerdings verwendet das ein bisschen JS.

**dead_orc** · 06.01.2006 12:19

Zitat von drunken monkey

@ Milchbox: Das Javascript von dir ist von vorn bis hinten falsch. Du hast sämtliche Strichpunkte vergessen, verwendest Eigenschaften, die's nicht gibt und vergisst Variablendeklarationen.

Strichpunkte sind in JavaScript komplett optional

@Topic: Ja, der IE kennt :hover nur für <a>. Wenn man es auch für den kompatibel machen möchte (was aber vergebene Liebesmühe ist), muss man ein bisschen JS benutzen. Man könnte aber eine pure CSS-Lösung machen und in Conditional Comments das Javascript für den IE.

Thema: tooltip menu

Themen-Optionen

Anzeige

tooltip menu

Berechtigungen