Auf meiner Internetseite (www.dietrolle.de/trollkarte.php) möchte ich beim überfahren der Symbole (Fußabdruck) die zugehörige Ortsbezeichnung farblich hinterlegen.
Da ich nicht so fitt bin in Javascript habe ich mir ein kleines Programm geschrieben um das Ganze auszuprobieren. Und nichts funktioniert!
Wo liegt hier mein Denkfehler, und wie könnte ich das realisieren?
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=iso-8859-1">
<title>Farbwechsel Layer</title>
<style type="text/css">
#taste {width:150px; height:25px; position:relative; left:20px; top:10px; z-index:1; background-color:silver;}
#layer1 {width:50px; height:25px; position:absolute; left:20px; top:200px; z-index:1; background-color:none;}
#layer2 {width:50px; height:25px; position:absolute; left:20px; top:225px; z-index:1; background-color:none;}
</style>
<script language="javascript"> //WO LIEGT HIER DER HUND BEGRABEN?
function zeig(nr){
document.getElementById("layer"+nr).style.bgColor="#ff0000";
}
function weg(nr){
document.getElementById("layer"+nr).style.bgColor="none";
}
</script>
</head>
<body bgcolor="white" text="black" link="blue" vlink="purple" alink="red">
<div id="taste">
<p style="line-height:150%; margin-top:0; margin-bottom:0; cursor:pointer;" onmouseover="javascript:zeig(1)" onmouseout="javascript:weg(1)" align="center"><span style="line-height:150%;">Layer 1 Hintergrund</span></p>
</div>
<p style="line-height:150%; margin-top:0; margin-bottom:0;"><span style="line-height:150%;"> </span></p>
<div id="taste">
<p style="line-height:150%; margin-top:0; margin-bottom:0; cursor:pointer;" onmouseover="javascript:zeig(2)" onmouseout="javascript:weg(2)" align="center"><span style="line-height:150%;">Layer 2 Hintergrund</span></p>
</div>
<div id="layer1">
<p> Layer1 </p>
</div>
<div id="layer2">
<p> Layer2 </p>
</div>
<p> </p>
</body>
</html>