nicht angemeldet
DIV bei MouseOver auf DIV einblenden
0 0 
apsel
0
DIV bei MouseOver auf DIV einblenden
Hallo,
ich möchte folgendes realisieren:
Ein DIV, welches das Menü einer Webseite enthält, soll nur eingeblendet werden, wenn man mit der Maus über das DIV fährt. Momentan kann ich das DIV nur einblenden, wenn ich über einen Link ausserhalb des DIVs fahre (siehe Beispiel). Wie schaffe ich es, dass das ausgeblendete DIV selbst der Schalter für seine Sichtbarkeit ist?
------------------
<html>
<head>
<script>
function getStyle()
{
var temp = document.getElementById("main").style.visibility;
return temp;
}
function switchMain()
{
var current = getStyle();
if( current == "hidden" )
{
document.getElementById("main").style.visibility = "visible";
}
else
{
document.getElementById("main").style.visibility = "hidden";
}
}
</script>
</head>
<body>
<div id="main" style="visibility: hidden; width: 400px; height:400px; position:absolute; top:100px; left:100px; background-color:red;">Hier koennte Ihre Werbung stehen...</div>
<a href="#" onmouseover="switchMain()" onmouseout="switchMain()">Schalter</a>
</body>
</html>
------------------
Danke für Eure Ideen.
Joerg
-
Ganz vergessen: wenn es andere Lösungsansätze als JS gibt, nehme ich die auch gern entgegen. Eine reine CSS-Lösung würde mir sogar noch besser gefallen, wenn es da etwas geben sollte...
Danke,
Joerg
-
Om nah hoo pez nyeetz, Joerg!
Eine reine CSS-Lösung würde mir sogar noch besser gefallen, wenn es da etwas geben sollte...
Gibt es. Arbeite dich durch diesen Thread.
Matthias
--
-
Hallo Matthias,
Gibt es...
Danke. Ich bin mir nicht sicher, ob ich alles verstanden habe, aber auch dort wird ein Textlink als auslösendes Element des Aufpoppens verwendet.
Sowas habe ich bereits. Um es mal etwas einfacher zugänglich zu machen, hab ich meinen Quelltext von oben hochgeladen:http://temp.themaxer.de/test.html
Beim Überfahren des Wortes Schalter wird das rote DIV sichtbar. Das reicht mir aber leider nicht. Ich möchte, dass das DIV sichtbar wird, wenn ich _irgendwo_ über den Bereich des ausgeblendeten DIVs fahre. Ich möchte mich also nicht der Krücke des Links "Schalter" bedienen müssen.
Beispiel: in dem DIV soll ein Menü stecken. Im Normalzustand ist von der Seite nur der reine Inhalt sichtbar. Erst wenn der User über die Stelle fährt, wo das Menü ist, wird es sichtbar. Verlässt er den Bereich wieder, verschwindet das Menü wieder und er kann sich ganz auf den Content konzentrieren.
Ich könnte mir vorstellen, dass sich ein ausgeblendetes Element gar nicht selbst per Maus ansprechen lässt. Ich denke daher, dass beispielsweise auch ein 2. DIV mein "MenüDIV" verdeckt und beim mouseover verschwindet. Optisch wäre es das gleiche Ergebnis. Nur wie ich eben einem DIV beibringe, auf Mousevents zu reagieren, weiss ich leider nicht.
Vielleicht hast Du ja noch eine Idee?
Danke Dir,
J-
-
Hallo,
Vielleicht hast Du ja noch eine Idee?
Ich hätte noch eine, etwas getrickst, aber dafür ohne JavaScript:
<html> <head> <style type="text/css">[code lang=css] #main { width: 400px; height:400px; position:absolute; top:100px; left:100px; color:transparent; background-color:transparent; } #main:hover { color:black; background-color:red; } ~~~</style> </head> <body> <div id="main">Hier koennte Ihre Werbung stehen...</div> </body> </html>[/code] Gruß, Don P -- sh:( fo:) ch:? rl:( br:] n4:~ ie:% mo:? va:{ js:) de:/ zu:] fl:( ss:| ls:&-
Ich hätte noch eine, etwas getrickst, aber dafür ohne JavaScript:
Verdammt, ist das simpel... Genau das hab ich gesucht. Mir ist zwar nicht klar, warum ich darauf nicht selber gekommen bin, aber genau sowas hab ich gesucht. Naja, warum einfach, wenn´s auch umständlich geht...
Danke Dir. =)
J-
-
-
-
-
-
Hallo,
Momentan kann ich das DIV nur einblenden, wenn ich über einen Link ausserhalb des DIVs fahre (siehe Beispiel).
Ja, weil der Link en entsprechenden onmouseover-Handler hat.
Wie schaffe ich es, dass das ausgeblendete DIV selbst der Schalter für seine Sichtbarkeit ist?
Indem du den onmouseover-Handler nicht dem A-Element, sondern deinem DIV-Element gibst.
Statt onmouseover klappt in reinem CSS vielleicht auch etwas wie:
#main:hover {visibility: visible;}Gruß, Don P