PDA

Archiv verlassen und diese Seite im Standarddesign anzeigen : 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 (http://wrtlprnft.de/flaggen.htm)"-site
auf der linken seite das menü, denn dieses wird nicht vom ie wiedergegeben)
das sollte dann so aussehen wie auf giga.de (http://www.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:



<!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 :rolleyes:
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! http://www.multimediaxis.de/images/smilies/old/hell_yeah.gif 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 :D
Geiu
05.01.2006, 21:50
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/smilies/old/hell_yeah.gif
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
@ 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.