nicht angemeldet
Hallo,
ich versuche mir gerade eine eigene Website aufzubauen und habe ein kleines Problem beim MouseOver Bildwechsel. Ihr werdet mein Problem vielleicht besser verstehen, wenn ich den Quelltext gepostet habe. Auf jedenfall ist es so, dass es beim ersten Bildwechsel wunderbar funktioniert. Beim zweiten Bildwechsel jedoch wird das Bild über dem Bereich des ersten Bildwechsels angezeigt. Hier mein Quelltext:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html lang="de">
<head>
<meta http-equiv="content-type" content="text/html; charset=iso-8859-1">
<title>???</title>
<script type="text/javascript">
LogoOut = new Image();
LogoOut.src = "img/Logo_300_139.png";
LogoOver = new Image();
LogoOver.src = "img/Logo_WC3_300_139.png";
HomeOut = new Image();
HomeOut.src = "img/Home_139_27.png";
HomeOver = new Image();
HomeOver.src = "img/HomeAktiv_139_27.png";
function Bildwechsel (Bildnr, Bildobjekt)
{
window.document.images[Bildnr].src = Bildobjekt;
}
</script>
<link rel="stylesheet" type="text/css" href="CascadinStyleSheet.css">
</head>
<body>
<div id="Kopfzeile">
<a href="Index.html"
onmouseover="Bildwechsel(0, LogoOver.src)"
onmouseout="Bildwechsel(0, LogoOut.src)">
<img class="Logo" src="img\Logo_300_139.png"
alt="???"></a>
<h1>Internetpräsenz von Dennis Müller</h1><br><br><br>
<hr>
<ul id="Navigation">
<li><a href="Index.html"
onmouseover="Bildwechsel(0, HomeOver.src)"
onmouseout="Bildwechsel(0, HomeOut.src)">
<img class="Button" src="img\Home_139_27.png" alt="Home"></a></li>
<li><img class="Button" src="img\Logo_139_27.png" alt="Logo">
<ul>
<li><a href="Logo.html"><img class="Button" src="img\Kontakt_139_27.png" alt="Kontakt"></a></li>
<li><a href="Logo.html"><img class="Button" src="img\Kontakt_139_27.png" alt="Kontakt"></a></li>
</ul>
</li>
<li><img class="Button" src="img\Kontakt_139_27.png" alt="Kontakt">
<ul>
<li><a href="Kontakt.html"><img class="Button" src="img\Kontakt_139_27.png" alt="Kontakt"></a></li>
</ul>
</li>
</ul>
<p class="Update">Letztes Update: 13.02.10</p>
</div>
</body>
</html>
Hier die dazugehörige CSS-Datei
/*CSS-Eigenschaften für die Kopfzeile*/
#Kopfzeile{background-image:url(img/background_1024_640.jpg);
font-family:papyrus,sans-serif;
text-align:center;
height:32%;
width:98.4%;
margin-top:-0.8%;
position:fixed;}
.Button{border:0;
width:129px;
height:27px;}
.Logo{float:left;
width:300px;
height:139px;
border:0;}
.Rahmen{border-style:ridge;
border-color:orange;
padding:0.4%;}
.Update{color:#F9F7EE;
float:right;
margin-top:-1%;
margin-right:1.5%;}
h1{font-size:235%;
margin-top:4%;}
hr{width:98%;
position:absolute;
color:white;
margin-top:-3%;
margin-left:1%;}
/*Navigationsbuttons*/
ul#Navigation{margin-top:-7%;}
ul#Navigation li{float:left;
display:block;
position:relative;}
ul#Navigation li ul{position:absolute;}
/*dynamisches Ein-und Ausblenden der Navigationsbuttons*/
ul#Navigation li>ul{display:none;
padding-left:1%;}
ul#Navigation li:hover>ul{display:block;}
Hoffe man kann das Problem erkennen auch wenn man nicht meine Bilder vorliegen hat. Ersetzten durch eigene wäre dabei wahrscheinlich hilfreich.
Also ich hoffe ihr könnt mir ein paar Anregungen geben.
Mit freundlichen Grüßen
muller
Der Martin