Flo: Rollover-Images funktionieren nicht mit Netscape

SELF-Forum

Rollover-Images funktionieren nicht mit Netscape

Flo
– Informationen zu den Bewertungsregeln

Hallo!

Wer kann mir sagen warum dieses Script (erstellt von Dreamweaver 2) für Rollover-Images (mit Imagemaps) mit dem Internet Explorer 4/5 funktioniert, beim Netscape aber nur, wenn man mit dem Mauszeiger entweder am oberen oder unteren Rand der Bilder entlangfährt?

Vielen Dank,
Flo

<SCRIPT language=JavaScript>
<!--
function MM_swapImgRestore() { //v2.0
  if (document.MM_swapImgData != null)
    for (var i=0; i<(document.MM_swapImgData.length-1); i+=2)
      document.MM_swapImgData[i].src = document.MM_swapImgData[i+1];
}

function MM_preloadImages() { //v2.0
  if (document.images) {
    var imgFiles = MM_preloadImages.arguments;
    if (document.preloadArray==null) document.preloadArray = new Array();
    var i = document.preloadArray.length;
    with (document) for (var j=0; j<imgFiles.length; j++) if (imgFiles[j].charAt(0)!="#"){
      preloadArray[i] = new Image;
      preloadArray[i++].src = imgFiles[j];
  } }
}

function MM_swapImage() { //v2.0
  var i,j=0,objStr,obj,swapArray=new Array,oldArray=document.MM_swapImgData;
  for (i=0; i < (MM_swapImage.arguments.length-2); i+=3) {
    objStr = MM_swapImage.arguments[(navigator.appName == 'Netscape')?i:i+1];
    if ((objStr.indexOf('document.layers[')==0 && document.layers==null)
        (objStr.indexOf('document.all[')   ==0 && document.all   ==null))
      objStr = 'document'+objStr.substring(objStr.lastIndexOf('.'),objStr.length);
    obj = eval(objStr);
    if (obj != null) {
      swapArray[j++] = obj;
      swapArray[j++] = (oldArray==null oldArray[j-1]!=obj)?obj.src:oldArray[j];
      obj.src = MM_swapImage.arguments[i+2];
  } }
  document.MM_swapImgData = swapArray; //used for restore
}
//-->
</SCRIPT>
</HEAD>

<BODY background="" bgColor=#b7b7d4 leftMargin=0
onload="MM_preloadImages('Bilder/rollovers/abouton.gif','#929359797630');MM_preloadImages('Bilder/rollovers/produkton.gif','#929359828990');MM_preloadImages('Bilder/rollovers/systemon.gif','#929359844700');MM_preloadImages('Bilder/rollovers/newson.gif','#929359858100');MM_preloadImages('Bilder/rollovers/serviceon.gif','#929359873100');MM_preloadImages('Bilder/rollovers/branchenon.gif','#929979030680')"
topMargin=0 ; marginheight="0" marginwidth="0">
<table cellspacing="0" cellpadding="0" border="0">
  <tr>
    <td width="20" height="7" valign="top"></td>
    <td width="1" height="7" valign="top"></td>
    <td width="94" height="7" valign="top"></td>
    <td width="90" height="388" rowspan="6" valign="top"><a href="#" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('document.about','document.about','Bilder/rollovers/abouton.gif','#929359797630');"><img name="about" border="0" src="Bilder/rollovers/aboutoff.gif" width="90" height="388" usemap="#aboutMap"></a></td>
    <td width="126" height="388" rowspan="6" valign="top"><a href="#" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('document.branchenRoll','document.branchenRoll','Bilder/rollovers/branchenon.gif','#929979030680')"><img name="branchenRoll" border="0" src="Bilder/rollovers/branchenoff.gif" width="126" height="388" usemap="#branchenMap"></a></td>
    <td width="126" height="388" rowspan="6" valign="top"><a href="#" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('document.produkt','document.produkt','Bilder/rollovers/produkton.gif','#929359828990');"><img name="produkt" border="0" src="Bilder/rollovers/produktoff.gif" width="126" height="388" usemap="#produktMap"></a></td>
    <td width="126" height="388" rowspan="6" valign="top"><a href="#" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('document.management','document.management','Bilder/rollovers/systemon.gif','#929359844700');"><img name="management" border="0" src="Bilder/rollovers/systemoff.gif" width="126" height="388" usemap="#manageMap"></a></td>
    <td width="84" height="388" rowspan="6" valign="top"><a href="#" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('document.news','document.news','Bilder/rollovers/newson.gif','#929359858100');"><img name="news" border="0" src="Bilder/rollovers/newsoff.gif" width="84" height="388" usemap="#newsMap"></a></td>
    <td width="110" height="388" rowspan="6" valign="top"><a href="#" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('document.service','document.service','Bilder/rollovers/serviceon.gif','#929359873100');"><img name="service" border="0" src="Bilder/rollovers/serviceoff.gif" width="110" height="388" usemap="#serviceMap"></a></td>
  </tr>
  <tr>
    <td width="20" height="70" valign="top"></td>
    <td width="95" height="70" colspan="2" valign="top">

Beitrag melden
–
Informationen zu den Bewertungsregeln

  1. Rollover-Images funktionieren nicht mit Netscape

    Claudia
    – Informationen zu den Bewertungsregeln

    Hallo Flo,

    <kopfschüttel>
    für eine Bildwechselfunktion ist das ja ganz schön... ich weiß nicht recht wie ich mich ausdrücken soll.
    Mein Rat: Schmeiß den Sch<zensiert> weg und guck mal da hin.
    Das ist der Klassiker<g>
    <../../tedg.htm>

    Schöne Grüße
    Claudia

    Beitrag melden
    –
    Informationen zu den Bewertungsregeln

    1. Rollover-Images funktionieren nicht mit Netscape

      Thomas Hieck
      – Informationen zu den Bewertungsregeln

      <kopfschüttel>
      für eine Bildwechselfunktion ist das ja ganz schön... ich weiß nicht recht wie ich mich ausdrücken soll.
      Mein Rat: Schmeiß den Sch<zensiert> weg und guck mal da hin.
      Das ist der Klassiker<g>
      <../../tedg.htm>

      <auch Kopfschuettel />
      Schoen mal wieder bestaetigt zu werden, kein Dreamweaver zu benutzen. Ich denke mit einem Zehntel, des Codes schafft man es auch und blickt dann sogar nicht durch(siehe Link von Claudia :-)

      Viele Gruesse, Thomas Hieck

      Beitrag melden
      –
      Informationen zu den Bewertungsregeln

  2. Rollover-Images funktionieren nicht mit Netscape

    Klaus Junge
    – Informationen zu den Bewertungsregeln

    Hallo Flo,

    Wer kann mir sagen warum dieses Script...

    sagen kann ich Dir das zunächst nicht, aber vielleicht kriegt man das raus.
    Also Schritt für Schritt.
    Da gibt es ein BODY-Tag. Etwas umgestellt sieht der dann so aus:

    <BODY
      background=""
      bgColor=#b7b7d4
      leftMargin=0
      topMargin=0 ;
      marginheight="0"
      marginwidth="0"
      onload="MM_preloadImages('Bilder/rollovers/abouton.gif',   '#929359797630');
              MM_preloadImages('Bilder/rollovers/produkton.gif', '#929359828990');
              MM_preloadImages('Bilder/rollovers/systemon.gif',  '#929359844700');
              MM_preloadImages('Bilder/rollovers/newson.gif',    '#929359858100');
              MM_preloadImages('Bilder/rollovers/serviceon.gif', '#929359873100');
              MM_preloadImages('Bilder/rollovers/branchenon.gif','#929979030680')">

    Etwas 'uneinheitlich', Werte mal mit Gänsefüßchen, mal ohne und
    noch mit einem Semikolon dazwischen...
    Welcher Browser geht wie krüsch damit um?
    Vielleicht weß jemand darauf eine Antwort.

    Wichtiger für das Funktionieren ist aber, daß onload für jedes Bild die
    Funktion MM_preloadImages() mit zwei Parametern aufgerufen wird.
    Der erste Parameter dürfte klar sein, ich nehme jedenfalls an, daß das
    Deine Bilder sind. Die Namen hören alle mit 'on' auf, woraus ich
    schließe, daß es die Zustände für onMouseover sind.
    Naja, ist ja wohl auch trivial, die Anfangsbilder werden ja mit der
    Endung 'off' unten in den Ankern referenziert.
    Der zweite Parameter ist mir unklar. Jeweils eine ellenlange Zahl,
    vorne immer gleich. Aus der Raute schließe ich, daß sie als Hex-Zahl
    zu interpretieren ist. Mal sehen.

    Tja, dann gibt es noch diese Funktion:

    function MM_preloadImages()
    { //v2.0
      if (document.images)
         {
          var imgFiles = MM_preloadImages.arguments;
          if (document.preloadArray==null)
              document.preloadArray = new Array();
              var i = document.preloadArray.length;
              with (document)
                for (var j=0; j<imgFiles.length; j++)
                  if (imgFiles[j].charAt(0)!="#")
                     {
                      preloadArray[i] = new Image;
                      preloadArray[i++].src = imgFiles[j];
                     }
         }
    }

    Zunächst fällt mir auf, daß die Klammern leer sind, obwohl Parameter
    übergeben werden. Bei anderen 'Sprachen' eine Totsünde die mit einem
    Compilerfehler quitiert wird. Naja, das W3C hat sich Toleranz gewünscht.

    Mit 'if (document.images)' soll wohl verhindert werden, daß der IE3
    oder sonst ein älterer Browser eine Fehlermeldung ausgibt.

    Mit 'var imgFiles = MM_preloadImages.arguments;' wird zunächst mal
    eine Variable namens 'imgFiles' definiert und auf den Wert
    'MM_preloadImages.arguments' gesetzt. Hmm, den gibt es doch noch garnicht.
    Ob der sich damit schon ein Objekt baut? Mal sehen.

    Dann, mit 'if (document.preloadArray==null) document.preloadArray = new Array();'
    schaut er ob es ein Array 'preloadArray' noch nicht gibt und macht es sich
    gegebenenfals mit 'document.preloadArray = new Array();'.
    Anschließend deklariert er sich eine Variable i in der die Länge dieses
    Arrays drinsteht: 'var i = document.preloadArray.length;'

    Dann kommt eine Schleife, von Null bis Arraylänge von imgFiles.
    imgFiles hatte er sich oben als Variable deklariert. Hmm.

    Nun rödelt er das Array also durch und schaut bei jedem [j] nach
    ob der Inhalt NICHT mit der Raute anfängt, also anzunehmen ist, daß da
    ein String mit einer Dateireferenz=Name drinsteht.
    Ist also keine Raute drin, dann kommen die beiden klassischen Befehle
    für das Vorladen von Bildern, also erstmal einen neuen Eintrag definieren
    und dann die Zuweisung der Quelle.

    Um ehrlich zu sein, durch diese Funktion bin ich nun einmal durch und
    weiß eigentlich nicht mehr als daß sie im Prinzip unter irgendwelchen
    Umständen das klassische Bildervorladen macht. Da hab ich wohl noch
    einiges zum Grübeln.

    Da Dich dieses Thema ja nun schon seit Monaten umtreibt und Du anscheinend
    nicht weiterkommst sollst Du das Posting auch erhalten, aber eigentlich ist
    es eher was für die Rundablage.

    Vielleicht hat ja sonst jemand bessere analytische Fähigkeiten.

    Klaus

    Beitrag melden
    –
    Informationen zu den Bewertungsregeln

    1. Rollover-Images funktionieren nicht mit Netscape

      Flo
      – Informationen zu den Bewertungsregeln

      Hallo Klaus,

      vielen Dank für deine ausführliche (und sehr amüsante) Analyse. Ich werde das ganze anonymisiert mal an Macromedia weiterleiten<g>.

      Da mich deine Analyse trotzdem nicht weiterbringt, werde ich mal den Hinweis von Claudia probieren:

      http://www.teamone.de/selfhtml/tedg.htm

      Trotzdem vielen Dank und (an alle) MACHT WEITER SO!!! Das Forum hier ist echt der absolute HIT!!!

      Flo

      Beitrag melden
      –
      Informationen zu den Bewertungsregeln

      1. Rollover-Images funktionieren nicht mit Netscape

        Klaus Junge
        – Informationen zu den Bewertungsregeln

        Hallo Flo,

        vermutlich bist Du hier nicht mehr bei, vielleicht sogar besser.

        Beim Schmökern bin ich eben noch über eine Sache gestolpert:
        Unten in der Tabelle steht bei den IMGs zB ein usemap="#aboutMap">
        drin.

        Ich finde aber nirgends so eine MAP und auch nichts wo sie gemacht
        werden könnte. Hast Du alles geposted oder stehen die noch irgendwo?

        Mit dem was so an Parametern übergeben wird können die MAP-Namen
        auch nicht gebaut werden.
        Es hätte ja sein können, daß 'MM_preloadImages('....gif','#929359797630');'
        aus dieser sonderbaren Zahl irgendwie was baut. Ist aber wohl nicht.
        Diese Zahlenkolonnen wiederholen sich ja in 'onMouseOver="MM_swapImage(...)'
        auch entsprechend.
        Interessant wäre es zu wissen ob die irgendeinen besonderen 'um-die-Ecke-
        Trick' für MAPs haben.

        Die Schreibweise legt ja nahe, daß die MAPs in der aktuellen Seite sein
        müssten.

        Dein nach wie vor ratloser
        Klaus

        Beitrag melden
        –
        Informationen zu den Bewertungsregeln