Hallo,
habe leider überhaupt keine ahnung von css und javascript, und habe daher versucht mir die notwendigsten dinge aus vorhandenen quellcodes zusammenzustoppeln. Das haut aber leider nicht so ganz hin.
Das Problem ist, dass ich eine dynamisch anpassbare bildschirmhintergrund grafik haben möchte, auf der Knöpfe sein sollen. Wenn ich jetzt über einen Knopf mit cem curser drüber fahre ändert sich der darüberliegende knopf zum "gedrückt status", und nicht der auf den der curser zeigt.
Einzeln funktioniert das das mit den Knöpfen, aber als ich den code für dynamische bildschirmanpassung dazu "integriert" habe ist das problem aufgekommen.
Vielleicht könnt ihr mir ja sagen woran das liegt?
Quellcode:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=ISO-8859-1">
<title>Menue </title>
<script type="text/javascript">
Normal1 = new Image();
Normal1.src = "Neuigkeitenunge.gif"; /* erste Standard-Grafik */
Highlight1 = new Image();
Highlight1.src = "Neuigkeitenge.gif"; /* erste Highlight-Grafik */
Normal2 = new Image();
Normal2.src = "Gaestebuchunge.gif"; /* zweite Standard-Grafik */
Highlight2 = new Image();
Highlight2.src = "Gaestebuchge.gif"; /* zweite Highlight-Grafik */
Normal3 = new Image();
Normal3.src = "Fotosunge.gif"; /* dritte Standard-Grafik */
Highlight3 = new Image();
Highlight3.src = "Fotosge.gif"; /* dritte Highlight-Grafik */
Normal4 = new Image();
Normal4.src = "Speisekarteunge.gif"; /* vierte Standard-Grafik */
Highlight4 = new Image();
Highlight4.src = "Speisekartege.gif"; /* vierte Highlight-Grafik */
Normal5 = new Image();
Normal5.src = "Veranstaltungenunge.gif"; /* 5 Standard-Grafik */
Highlight5 = new Image();
Highlight5.src = "Veranstaltungenge.gif"; /* 5 Highlight-Grafik */
Normal6 = new Image();
Normal6.src = "Oeffnungszeitenunge.gif"; /* 6 Standard-Grafik */
Highlight6 = new Image();
Highlight6.src = "Oeffnungszeitenge.gif"; /* 6 Highlight-Grafik */
Normal7 = new Image();
Normal7.src = "Kontaktunge.gif"; /* 7 Standard-Grafik */
Highlight7 = new Image();
Highlight7.src = "Kontaktge.gif"; /* 7 Highlight-Grafik */
function Bildwechsel (Bildnr, Bildobjekt)
{
window.document.images[Bildnr].src = Bildobjekt.src;
}
</script>
<style type="text/css">
h1 { color:#6363A5; font-family:Arial,sans-serif; }
p { color:#000000; font-family:Arial,sans-serif; }
</script>
<style type="text/css">
* { margin: 0;
padding: 0;}
/* Höhen- und Breiten 100% anpassen; Scrollbar ausblenden */
body, html{ width: 100%;
height: 100%;
overflow: hidden;}
/* Hintergrundbild auf unterste Ebene anordnen */
#bgImg{ position: absolute;
top: 0;
left: 0;
border: 0;
z-index: 1;}
/* Body-Dummy absolut über Hintergrundbild legen; Scrollbar automatisch einblenden */
#bodyDiv{ position: absolute;
top: 10;
left: 0;
z-index: 2;
overflow: auto;
width: 100%;
height: 100%;
/*text-align: center;*/}
</style>
</head>
<body>
<img id="bgImg" src="navilinks.jpg" width="100%" height="100%" width="100%" height="100%">
<div id="bodyDiv">
<table border="1" cellpadding="0" cellspacing="0"><tr>
<td valign="top">
<a href="/Startseite.htm" target="Startseite"
onmouseover="Bildwechsel(0, Highlight1)"
onmouseout="Bildwechsel(0, Normal1)"><img src="Neuigkeitenunge.gif" border="0" alt="Neuigkeiten"></a><br>
<br>
<a href="..." target="Startseite"
onmouseover="Bildwechsel(1, Highlight2)"
onmouseout="Bildwechsel(1, Normal2)"><img src="Gaestebuchunge.gif" border="0" alt="Gaestebuch"></a><br>
<br>
<a href="\Startseite.htm" target="Startseite"
onmouseover="Bildwechsel(2, Highlight3)"
onmouseout="Bildwechsel(2, Normal3)"><img src="Fotosunge.gif" border="0" alt="Fotos"></a><br>
<br>
<a href="/Speisekarte.htm" target="Startseite"
onmouseover="Bildwechsel(3, Highlight4)"
onmouseout="Bildwechsel(3, Normal4)"><img src="Speisekarteunge.gif" border="0" alt="Speisekarte"></a><br>
<br>
<a href="/Startseite.htm" target="Startseite"
onmouseover="Bildwechsel(4, Highlight5)"
onmouseout="Bildwechsel(4, Normal5)"><img src="Veranstaltungenunge.gif" border="0" alt="Termine"></a><br>
<br>
<a href="/Startseite.htm" target="Startseite"
onmouseover="Bildwechsel(5, Highlight6)"
onmouseout="Bildwechsel(5, Normal6)"><img src="Oeffnungszeitenunge.gif" border="0" alt="Oeffnungszeit"></a><br>
<br>
<a href="/Kontakt.htm" target="Startseite"
onmouseover="Bildwechsel(6, Highlight7)"
onmouseout="Bildwechsel(6, Normal7)"><img src="Kontaktunge.gif" border="0" alt="Kontakt"></a><br>
<br>
</td>
</table>
</div>
</body>
</html>