[CSS]Tree Menu - Hover- Image

undertaker1988

Lt. Junior Grade
Registriert
Nov. 2003
Beiträge
465
Tachchen,

bastel grade an einem Tree - Menu mit Hover Eigenschaften.
Sobald die Maus über ein Link fährt, soll ein Hintergrundbild erscheinen.
Leider funkt das nicht.

Hier der Code:
HTML:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> 
<html> 
<head> 
<title>Tree Menu</title> 
<script language="JavaScript1.2"> 
function doMenu(id,display) { 
document.getElementById(id).style.display = display; 
} 
</script> 
<style type="text/css"> 

body { background-color:#000000;
}


.menu { 
font-family: Georgia, "Times New Roman", Times, serif; 
font-size: 16px; 
 
text-decoration: none; 
line-height: 1;
}

.menu:link    { background-color:ffffff; }
.menu:visited { background-color:fff; }
.menu:hover   { background-image:url(hover.gif; }
.menu:active  { background-color:#a03; }





.sub { 
display: none; 
color: black; 
text decoration: none; 
line-height: 1;
}

.sub:link    { color:#fff; background-color:ffffff; }
.sub:visited { color:#00f; background-color:fff; }
.sub:hover   { background-image:url(hover.gif; }
.sub:active  { color:#ff0; background-color:#a03; }





</style> 
<base target="Hauptframe">
</head> 
<body> 
<div id="menuLayer" style="position: absolute; left: 30px; top: 50px; width: 200px; height: 600px; z-index: 3; visibility: visible"> 


<b id="menuLayer"><a href="#" onmousedown="doMenu('menu1sub','block');doMenu('menu2sub','none');doMenu('menu3sub','none');doMenu('menu4sub','none')"> 
<p class="menu">Start</p></a></b> 
<b id="menu1sub" class="sub"> 
<a href="#" target="Hauptframe">Link 1</a> <br />
<a href="#">Link 4</a></b> 


<b id="menuLayer" ><a href="#" onmousedown="doMenu('menu2sub','block');doMenu('menu1sub','none');doMenu('menu3sub','none');doMenu('menu4sub','none')"> 
<p class="menu">Promotion</p></a></b> 
<b id="menu2sub" class="sub"> 
<a href="#">T-Home</a> <br /> 
<a href="#">T-Van </a> <br /> 
<a href="#">Link 3</a> <br /> 
<a href="#">Link 4</a> </b> 

<b id="menuLayer"><a href="#" onmousedown="doMenu('menu3sub','block');doMenu('menu2sub','none');doMenu('menu1sub','none');doMenu('menu4sub','none')"> 
<p class="menu">Events</p></a></b> 
<b id="menu3sub" class="sub"> 
<a href="#">2007</a> <br />  
<a href="#">2006</a> </b> 

<b id="menuLayer"><a href="#" onmousedown="doMenu('menu4sub','block');doMenu('menu2sub','none');doMenu('menu3sub','none');doMenu('menu1sub','none')"> 
<p class="menu">Spielgeräte</p></a></b> 
<b id="menu4sub" class="sub"> 
<a href="#">Link 1</a> <br /> 
<a href="#">Link 2 </a> <br /> 
<a href="#">Link 3</a> <br /> 
<a href="#">Link 4 </a> </b> 
</div> 
</body> 
</html>

Für Ideen wäre ich sehr dankbar.

Gruß

Flo
 
Hast Du mal versucht, die Klammer nach dem Bild wieder zu schließen und danach das Semikolon zu machen und als Pseudoklasse a:hover zu verwenden?
 
Was funktioniert denn genau nicht?
 
a:hover bringt in bezug auf das bild gar nix, da a:hover für das hovern über links steht.
bist du denn sicher, dass das bild im gleichen ordner liegt wie die html datei?
 
Hexadezimalezahlwerte in CSS mit einer vorangestellten Raute # kennzeichen!
Generell solltest du die Syntax sowohl von CSS, als auch HTML wiederholen. Wenn ich sehe, dass inline-Elemente (z.B. b), block-Elemente umschließen wird mir übel; nichts für ungut, aber die syntaktischen und semantischen Grundlagen solltest du schon beherrschen. Da lässt sich so mancher Fehler einfach verhindern ;)
 
Der IE kennt im übrigen kein :hover auf andere Elemente als A. Du vergibst es aber in deinem Beispiel an <p> und <b> - das geht nicht. ;)
 
Zurück
Oben