muller: Bildwechsel im HTML Dokument

SELF-Forum

Bildwechsel im HTML Dokument

muller
– Informationen zu den Bewertungsregeln

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

Beitrag melden
–
Informationen zu den Bewertungsregeln

  1. Bildwechsel

    Felix Riesterer Homepage des Autors
    – Informationen zu den Bewertungsregeln

    Lieber muller,

    Du hast offensichtlich den Bilderwechsel mit JavaScript gelöst. Das bedeutet, dass Du eigentlich im Themenbereich "JavaScript" posten solltest.

    <title>???</title>

    Hehehe.

    <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>

    Das ist also der relevante Code. Du definierst drei globale Variablen ("LogoOut", "HomeOut" und "Bildwechsel"). Dass Dein Funktionsobjekt ("Bildwechsel") global ist, ist OK, aber die beiden Bildobjekte hätte ich lieber irgendwo versteckt... aber das nur am Rande.

    Dieses JavaScript legt nun zwei Bildobjekte an, wahrscheinlich um die benötigten Bilddateien vom Browser schoneinmal vorladen zu lassen, damit beim Hovern die Bilder sofort verfügbar sind. Soweit ist das so in Ordnung.

    <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>

    Aha, hier ist ein Bild als anklickbarer Link definiert worden. Um diesen Link beim Überfahren mit der Maus zu verändern, benutzt Du JavaScript. Das geht auch anders! Da Du CSS ja bereits einsetzt, sollte Dir eine reine CSS-Lösung recht bald gelingen. Gerade was Links angeht, sollte auch der Internet Explorer in der Version 6 ausreichend mitspielen, sodass Du völlig ohne JavaScript auskommen solltest.

    Merke: Backslashes sind nur unter Windows als Trennzeichen zwischen Verzeichnis- und Dateinamen sinnvoll. Da eine Website aber in aller Regel auf nicht-Windows-Systemen bereitgestellt wird, werden Deine Pfadangaben (zumindest in "echten" Browsern, also nicht IE) zu Problemen führen!

    Zu Deinem eigentlichen JavaScript-Problem:

    window.document.images[Bildnr].src = Bildobjekt;

    Du referenzierst das zu ändernde Bild über seine "laufende Nummer", wobei Du von den Bildelementen im <body>-Element ausgehst und dort mit 0 zu zählen beginnst. Ich könnte mir vorstellen, dass nach der JavaScript-Anweisung, die Deine beiden Bildobjekte definiert, diese Zählung etwas durcheinander kommt. Das läge dann aber an Deiner momentanen Herangehensweise...

    Liebe Grüße,

    Felix Riesterer.

    --
    ie:% br:> fl:| va:) ls:[ fo:) rl:° n4:? de:> ss:| ch:? js:) mo:} zu:)
    Beitrag melden
    –
    Informationen zu den Bewertungsregeln

    1. Bildwechsel

      Der Martin
      – Informationen zu den Bewertungsregeln

      Hallo Felix,

      window.document.images[Bildnr].src = Bildobjekt;

      Du referenzierst das zu ändernde Bild über seine "laufende Nummer", wobei Du von den Bildelementen im <body>-Element ausgehst und dort mit 0 zu zählen beginnst. Ich könnte mir vorstellen, dass nach der JavaScript-Anweisung, die Deine beiden Bildobjekte definiert, diese Zählung etwas durcheinander kommt.

      nein, das ist nicht das Problem. Die Collection document.images[] enthält ja nur die Bilder, die im Dokument (sprich: im DOM) verankert sind. Das trifft auf die eigenständigen JS-Bildobjekte nicht zu, da sie nicht im DOM stehen.

      Das Problem dürfte eher sein, dass der OP auch bei seinem zweiten Bildlink im onmouseover- und onmouseout-Handler das *erste* Bild im Dokument (das mit dem Index 0) referenziert.

      So long,
       Martin

      --
      Wichtig ist, was hinten rauskommt.
        (Helmut Kohl, 16 Jahre deutsche Bundesbirne)
      Beitrag melden
      –
      Informationen zu den Bewertungsregeln