rainbow: Bildwechsel funktioniert im Firefox, aber IE und OPERA nicht

SELF-Forum

Bildwechsel funktioniert im Firefox, aber IE und OPERA nicht

rainbow Homepage des Autors
– Informationen zu den Bewertungsregeln

Hallo,

es handelt sich um eine Website mit Frames:

<frameset rows="50,568,50" frameborder="0" border="0">
    <frame src="oben.html" name="oben" scrolling="no" frameborder="0" border="0" noresize>
    <frame src="sites/home.html" name="mitte" scrolling="auto" frameborder="0" border="0" noresize>
    <frame src="unten.html" name="unten" scrolling="no" frameborder="0" border="0" noresize>
</frameset>

bei oben.html:

<script type="text/javascript">

Normal1 = new Image();
Normal1.src = "general/home.jpg";     /* erste Standard-Grafik */
Highlight1 = new Image();
Highlight1.src = "general/homeover.jpg"; /* erste Highlight-Grafik */

Normal2 = new Image();
Normal2.src = "general/news.jpg";/* zweite Standard-Grafik */
Highlight2 = new Image();
Highlight2.src = "general/newsover.jpg"; /* zweite Highlight-Grafik */

Normal3 = new Image();
Normal3.src = "general/coindra.jpg";     /* dritte Standard-Grafik */
Highlight3 = new Image();
Highlight3.src = "general/coindraover.jpg"; /* dritte Highlight-Grafik */

Normal4 = new Image();
Normal4.src = "general/musik.jpg";   /*vierte Grafik */
Highlight4 = new Image ();
Highlight4.src = "general/musikover.jpg";

Normal5 = new Image();
Normal5.src = "general/galerie.jpg";   /*fünfte Grafik */
Highlight5 = new Image ();
Highlight5.src = "general/galerieover.jpg";

Normal6 = new Image();
Normal6.src = "general/termine.jpg";   /*sechste Grafik */
Highlight6 = new Image ();
Highlight6.src = "general/termineover.jpg";

function Bildwechsel (Bildnr, Bildobjekt) {
  window.document.images[Bildnr].src = Bildobjekt.src;
}
</script>

<link rel="stylesheet" type="text/css" href="general/format.css">

</head>

<body bgcolor="#e0a941">

<table align="center" cellspacing="3" width="1000" height="50" cellpadding="2" border="0" bgcolor="#e0a941">
<tr valign="top" align="center">
 <td valign="top" align="center">
    <p><a href="sites/main.html" onmouseover="Bildwechsel(0, Highlight1)" onmouseout="Bildwechsel(0, Normal1)" target="mitte">
       <img src="general/home.jpg" width="150" alt="Home" border="0">
    </a></p>
 </td>
 <td valign="top" align="center">
    <p><a href="sites/news.html" onmouseover="Bildwechsel(1, Highlight2)" onmouseout="Bildwechsel(1, Normal2)" target="mitte">
       <img src="general/news.jpg" width="150" alt="News - aktuelle Informationen" border="0">
    </a></p>
 </td>
 <td valign="top" align="center">
    <p><a href="sites/coindra.html" onmouseover="Bildwechsel(2, Highlight3)" onmouseout="Bildwechsel(2, Normal3)" target="mitte">
       <img src="general/coindra.jpg" width="150" alt="CoIndra - &uuml;ber uns" border="0">
    </a></p>
 </td>
 <td valign="top" align="center">
    <p><a href="sites/musik.html" onmouseover="Bildwechsel(3, Highlight4)" onmouseout="Bildwechsel(3, Normal4)" target="mitte">
       <img src="general/musik.jpg" width="150" alt="Musik - H&ouml;rproben unserer Musik" border="0">
    </a></p>
 </td>
 <td valign="top" align="center">
    <p><a href="sites/thumbs/index.html" onmouseover="Bildwechsel(4, Highlight5)" onmouseout="Bildwechsel(4, Normal5)" target="mitte">
       <img src="general/galerie.jpg" width="150" alt="Galerie - Fotos von uns" border="0">
    </a></p>
 </td>
 <td valign="top" align="center">
    <p><a href="sites/termine.html" onmouseover="Bildwechsel(5, Highlight6)" onmouseout="Bildwechsel(5, Normal6)" target="mitte">
       <img src="general/termine.jpg" width="150" alt="Termine- Unsere Konzerte" border="0">
    </a></p>
 </td>

bei unten.html folgender Code:

<script type="text/javascript">

Normal1 = new Image();
Normal1.src = "general/angebot.jpg";     /* erste Standard-Grafik */
Highlight1 = new Image();
Highlight1.src = "general/angebotover.jpg"; /* erste Highlight-Grafik */

Normal2 = new Image();
Normal2.src = "general/presse.jpg";/* zweite Standard-Grafik */
Highlight2 = new Image();
Highlight2.src = "general/presseover.jpg"; /* zweite Highlight-Grafik */

Normal3 = new Image();
Normal3.src = "general/kontakt.jpg";     /* dritte Standard-Grafik */
Highlight3 = new Image();
Highlight3.src = "general/kontaktover.jpg"; /* dritte Highlight-Grafik */

Normal4 = new Image();
Normal4.src = "general/freunde.jpg";   /*vierte Grafik */
Highlight4 = new Image ();
Highlight4.src = "general/freundeover.jpg";

Normal5 = new Image();
Normal5.src = "general/impress.jpg";   /*fünfte Grafik */
Highlight5 = new Image ();
Highlight5.src = "general/impressover.jpg";

function Bildwechsel (Bildnr, Bildobjekt) {
  window.document.images[Bildnr].src = Bildobjekt.src;
}
</script>

<link rel="stylesheet" type="text/css" href="general/format.css">

</head>

<body bgcolor="#e0a941">

<table align="center" cellspacing="3" width="1000" height="50" cellpadding="2" border="0" bgcolor="#e0a941">
<tr valign="top" align="center">
    <td>
    <p><a href="sites/angebot.html" onmouseover="Bildwechsel(0, Highlight1)" onmouseout="Bildwechsel(0,Normal1)" target="mitte">
       <img src="general/angebot.jpg" width="150" alt="Unser Angebot" border="0">
    </a></p>
 </td>
 <td>
    <p><a href="sites/presse.html" onmouseover="Bildwechsel(1, Highlight2)" onmouseout="Bildwechsel(1, Normal2)" target="mitte">
       <img src="general/presse.jpg" width="150" alt="Presse - Texte und Fotos" border="0">
    </a></p>
 </td>
 <td>
    <p><a href="sites/kontakt.html" onmouseover="Bildwechsel(2, Highlight3)" onmouseout="Bildwechsel(2, Normal3)" target="mitte">
       <img src="general/kontakt.jpg" width="150" alt="Kontakt aufnehmen" border="0">
    </a></p>
 </td>
 <td>
    <p><a href="sites/freunde.html" onmouseover="Bildwechsel(3, Highlight4)" onmouseout="Bildwechsel(3, Normal4)" target="mitte">
       <img src="general/freunde.jpg" width="150" alt="Unsere Freunde und Bekannte" border="0">
    </a></p>
 </td>
    <td>
    <p><a href="sites/impress.html" onmouseover="Bildwechsel(4, Highlight5)" onmouseout="Bildwechsel(4, Normal5)" target="mitte">
       <img src="general/impress.jpg" width="150" alt="Impressum und Disclaimer" border="0">
    </a></p>
 </td>

Nun das Problem:
im Firefox lässt sich wunderbar alles darstellen und funktioniert auch bis auf einen Rahmen um die letzte Grafik bei unten.html.
Im IE kommt kein Bild bei der letzten Grafik im unten.html und Opera auch nicht.
Was mach ich falsch???
(Hab den Prog-Code von Selfhtml.org)

GIbt es bestimmte Anweisungen im Script, die ich für den IE/Opera ändern sollte???

Hier ist noch die Adresse fürs Netz:

www.coindra.de/test/index.html

Bin für jede Hilfe sehr dankbar. Häng schon seit über ne Woche dran und komm nicht drauf. Vielleicht sehe ich auch den Wald vor lauter Bäumen nicht?

Be Blessed
Angela

Beitrag melden
–
Informationen zu den Bewertungsregeln

  1. Bildwechsel funktioniert im Firefox, aber IE und OPERA nicht

    LX
    – Informationen zu den Bewertungsregeln

    Hi!

    Wenn Du unbedingt JavaScript benutzen willst, übergebe das Bild bei onmouseover/out lieber per this (wie in onmouseover="Bildwechsel(this,'bildname.png');").

    Es gibt jedoch noch eine weitere Möglichkeit ohne JavaScript, nämlich mit CSS. Dazu gibst Du das jeweilige Bild dem Link normal bzw. per :hover mit, in etwa so:

    HTML:

    <li id="test"><a><span>test</span></a></li>

    CSS:

      
#navi li a span { display: none; }  
#test a { display: block; background: url(test.png) no-repeat; }  
#test a:hover { background-image: url(testover.png); }

    Dieser Code hat den maßgeblichen Vorteil, dass Browser ohne JavaScript trotzdem den Bildwechsel ausführen (sogar MSIE!).

    Gruß, LX

    --
    X-Self-Code: sh:( fo:) ch:~ rl:° br:> n4:& ie:% mo:) va:) de:] zu:) fl:{ ss:) ls:~ js:|
    X-Self-Code-Url: http://emmanuel.dammerer.at/selfcode.html
    X-Will-Answer-Email: Unusual
    X-Please-Search-Archive-First: Absolutely Yes
    Beitrag melden
    –
    Informationen zu den Bewertungsregeln

    1. Bildwechsel funktioniert im Firefox, aber IE und OPERA nicht

      Klawischnigg
      – Informationen zu den Bewertungsregeln

      HI there,

      Dieser Code hat den maßgeblichen Vorteil, dass Browser ohne JavaScript trotzdem den Bildwechsel ausführen (sogar MSIE!).

      Ja, nur werden die meisen MSIE-Benutzer davon nichts bemerken, denn die benutzen angeblich noch zum überwiegenden Teil Versionsnummer 6, und die kennt das hovern auf Bilder noch nicht...

      Beitrag melden
      –
      Informationen zu den Bewertungsregeln

      1. :hover und IE6

        Maxx Homepage des Autors
        – Informationen zu den Bewertungsregeln

        Hallo,

        Dieser Code hat den maßgeblichen Vorteil, dass Browser ohne JavaScript trotzdem den Bildwechsel ausführen (sogar MSIE!).

        ... Versionsnummer 6, und die kennt das hovern auf Bilder noch nicht...

        deswegen schrieb LX ja auch:

        Dazu gibst Du das jeweilige Bild
           dem Link normal bzw. per :hover mit
           ^^^^^^^^

        Weiterhin wird auch im Orginalcode des TE (<a href="sites/main.html" onmouseover="Bildwechsel(0, Highlight1)" ...) der Bildwechsel in einem Link ausgelöst.

        *seufz*

        Jochen

        --
        Kritzeln statt texten: Scribbleboard
        Beitrag melden
        –
        Informationen zu den Bewertungsregeln

        1. evtl. lösung?

          Angela alias rainbow
          – Informationen zu den Bewertungsregeln

          Hallo,

          erst mal "DANKE" für die Anregungen.

          Wenn ich die Bilder mit einem Namen versehe und sie dann mit dem Namen anspreche? Könnte das im IE funktionieren?

          ala:

          <script languag=javascript>
          var sonne = new Image();
          var hallo = new Image();
          sonne.src="beispiele/sonne.gif";
          hallo.src="beispiele/hallo.gif";
          function wegblend3()
          {
          document.images.sonnig.src=hallo.src;
          }
          function reinblend3()
          {
          document.images.sonnig.src=sonne.src;
          }
          </script><br>
          <img src=beispiele/sonne.gif onMouseOver="wegblend3()"; onMouseOut="reinblend3()"; name=sonnig><br>

          Be Blessed
          Angela

          Beitrag melden
          –
          Informationen zu den Bewertungsregeln

          1. evtl. lösung?

            LX
            – Informationen zu den Bewertungsregeln

            Das würde auch funktionieren, ist aber unnötig kompliziert. Wenn Du mit mylink.getElementsByTagName('img')[0] das erste Image aus dem Link referenzierst, klappt es auch in anderen Browsern.

            Ich empfehle Dir trotzdem die Lösung mit CSS. Ist wesentlich einfacher und geht wirklich auf allen CSS-fähigen Browsern (einschließlich IE6).

            Gruß, LX

            --
            X-Self-Code: sh:( fo:) ch:~ rl:° br:> n4:& ie:% mo:) va:) de:] zu:) fl:{ ss:) ls:~ js:|
            X-Self-Code-Url: http://emmanuel.dammerer.at/selfcode.html
            X-Will-Answer-Email: Unusual
            X-Please-Search-Archive-First: Absolutely Yes
            Beitrag melden
            –
            Informationen zu den Bewertungsregeln

            1. evtl. lösung?

              rainbow
              – Informationen zu den Bewertungsregeln

              Hey!!!

              Voll vielen DANK!!!

              es funktioniert noch nicht, aber hab jetzt festgestellt, dass es wahrscheinlich gar nicht am Code liegt.

              Hab die unten.html jetzt mal direkt vom Server in meinen Editor gegeben und da bricht der Code dann mitten im letzten link ab.

              Die .html neu drauf spielen will das Programm (FileZilla) grad nicht, habs über 20 mal jetzt schon probiert. Hm, und mit coffee's ftp macht ers auch nicht.

              Evtl. wohl der Webspace voll(?)

              (Man lernt immer wieder was Neues)

              Werd die vielen Methoden, die ich jetzt erhalten habe, mal austesten und dann schauen, welche mir am besten gefällt. (Mit CSS find ich sehr gut, wegen der Barrierefreiheit und so). Hab ja jetzt auch Zeit, da die Seite nicht auf den Server hochgeht.

              Vielen DANK
              Be Blessed
              rainbow

              Beitrag melden
              –
              Informationen zu den Bewertungsregeln

      2. Bildwechsel funktioniert im Firefox, aber IE und OPERA nicht

        LX
        – Informationen zu den Bewertungsregeln

        Deswegen macht man das :hover ja auch auf den Link und setzt ein entsprechendes Hintergrundbild... lies mein Posting nochmal sorgfältig. Dieser Code funktioniert auch mit IE6.

        Gruß, LX

        --
        X-Self-Code: sh:( fo:) ch:~ rl:° br:> n4:& ie:% mo:) va:) de:] zu:) fl:{ ss:) ls:~ js:|
        X-Self-Code-Url: http://emmanuel.dammerer.at/selfcode.html
        X-Will-Answer-Email: Unusual
        X-Please-Search-Archive-First: Absolutely Yes
        Beitrag melden
        –
        Informationen zu den Bewertungsregeln

        1. Bildwechsel funktioniert im Firefox, aber IE und OPERA nicht

          Klawischnigg
          – Informationen zu den Bewertungsregeln

          HI there,

          Deswegen macht man das :hover ja auch auf den Link und setzt ein entsprechendes Hintergrundbild... lies mein Posting nochmal sorgfältig.

          Ja, eh, tut leid, wenn man's eilig hat, soll man halt keine Postings beantworten...

          Beitrag melden
          –
          Informationen zu den Bewertungsregeln