Druckbare Version
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
Ich habs irgendwie nicht auf Giga gefunden aber ich denke du suchst sowas:
Man kanns ja noch abändern ;)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>
Edit: Jetzt hab ich verstanden :rolleyes:
Mit CSS geht das guck mal auf SelfHTML
@ 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! http://www.multimediaxis.de/images/s.../hell_yeah.gif Aber ohne Style-Attribute kann das Ganze gar nicht gehen, also muss mit dem verwendeten Stylesheet was nicht stimmen.
Pech das hab ich nur kopiert :D
Es geht im IE nur mit links (<a>), nicht aber mit anderen Elementen. In gescheiten Browsern geht :hover auf alles.Zitat:
Zitat von drunken monkey
Ne Lösung für sowas wär http://alistapart.com/articles/dropdowns, allerdings verwendet das ein bisschen JS.
Strichpunkte sind in JavaScript komplett optionalZitat:
Zitat von drunken monkey
@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.