Jan: Navigation, onclick-Problem mit Netscape

Hi,

danke, daß du dir meinen Beitrag durchliest.

Ich will in meine Page eine Navigationsleiste einbauen. Bei überfahren einzelner Bereiche sollen diese Bereiche gehighlightet werden und bei der Wahl eines Bereichs soll dieser gehighlightet bleiben. Dazu habe ich mir eine funktion zusammengestellt.
Mit dem onMouseOver und beim onClick klappt das. Das Problem ist aber, ich will dieses Navigationsframe in einem bestimmten Bereich starten und dieser Bereich soll schon beim Start gehighlightet sein.

Das ist mein source:

<html>
<head>
<title></title>
  <script language="JavaScript">
<!--
function preload()
{
  bilder = new Array();
  bilder[0] = "over.gif";
  bilder[1] = "out.gif";
  bilder[2] = "click.gif";
  im = new Array();
  for (var i = 0; i < bilder.length; i++)
    {
      im[i] = new Image();
      im[i].src = bilder[i];
    }        
    
}

var inaktiv="hobbys";

function Wechsel(num,imgname)
{            
  if (inaktiv!=imgname)
  {    
    if (num==0) imgname.src = im[num].src;
    if (num==1) imgname.src = im[num].src;  
    if (num==2)
    {
      inaktiv.src = im[1].src;      
      imgname.src = im[2].src;
      inaktiv=imgname;
    }
  }
return true;
}
  //-->
</script>
</head>

<body onload="preload()">

<table>
  <tr>
    <td width="5"><img src="out.gif" name="hobbys" width="5" height="10" border="0" alt=""></td>
    <td width="2"></td>
    <td width="10"><a href="hobbys.html" onMouseOver="Wechsel(0,hobbys);" onMouseOut="Wechsel(1,hobbys);" onclick="Wechsel(2,hobbys);" target="rFrame"><img src="hobbys.gif" width="10" height="10" border="0" alt=""></a></td>
    <td width="2"></td>
  </tr>
</table>
<table>
  <tr>
    <td width="5"><img src="out.gif" name="filme" width="5" height="10" border="0" alt=""></td>
    <td width="2"></td>
    <td width="10"><a href="filme.html" onMouseOver="Wechsel(0,filme);" onMouseOut="Wechsel(1,filme);" onclick="Wechsel(2,filme);" target="rFrame"><img src="filme.gif" width="10" height="10" border="0" alt=""></a></td>
    <td width="2"></td>
  </tr>
</table>
<table>
  <tr>
    <td width="5"><img src="out.gif" name="welt" width="5" height="10" border="0" alt=""></td>
    <td width="2"></td>
    <td width="10"><a href="welt.html" onMouseOver="Wechsel(0,welt);" onMouseOut="Wechsel(1,welt);" onclick="Wechsel(2,welt);" target="rFrame"><img src="welt.gif" width="10" height="10" border="0" alt=""></a></td>
    <td width="2"></td>
  </tr>
</table>

</body>
</html>

Wenn ich jetzt beim onload auch die Funktion Wechsel in dieser Form aufrufe:

Wechsel(2,filme)

stellt der IE den Bereich richtig dar. Der Netscape weigert sich immer mit der Meldung: "filme not defined".

Wo liegt mein Fehler? Hast du vielleicht eine Idee?

Jan

  1. Hi,

    danke, daß du dir meinen Beitrag durchliest.

    Ich will in meine Page eine Navigationsleiste einbauen. Bei überfahren einzelner Bereiche sollen diese Bereiche gehighlightet werden und bei der Wahl eines Bereichs soll dieser gehighlightet bleiben. Dazu habe ich mir eine funktion zusammengestellt.
    Mit dem onMouseOver und beim onClick klappt das. Das Problem ist aber, ich will dieses Navigationsframe in einem bestimmten Bereich starten und dieser Bereich soll schon beim Start gehighlightet sein.

    }

    »»  return true;

    }
      //-->
    </script>
    </head>

    -- snip --

    <body onload="preload()">

    <table>
      <tr>
        <td width="5"><img src="out.gif" name="hobbys" width="5" height="10" border="0" alt=""></td>
        <td width="2"></td>
        <td width="10"><a href="hobbys.html" onMouseOver="Wechsel(0,hobbys);" onMouseOut="Wechsel(1,hobbys);" onclick="Wechsel(2,hobbys);" target="rFrame"><img src="hobbys.gif" width="10" height="10" border="0" alt=""></a></td>
        <td width="2"></td>
      </tr>
    </table>
    <table>
      <tr>
        <td width="5"><img src="out.gif" name="filme" width="5" height="10" border="0" alt=""></td>
        <td width="2"></td>
        <td width="10"><a href="filme.html" onMouseOver="Wechsel(0,filme);" onMouseOut="Wechsel(1,filme);" onclick="Wechsel(2,filme);" target="rFrame"><img src="filme.gif" width="10" height="10" border="0" alt=""></a></td>
        <td width="2"></td>
      </tr>
    </table>
    <table>
      <tr>
        <td width="5"><img src="out.gif" name="welt" width="5" height="10" border="0" alt=""></td>
        <td width="2"></td>
        <td width="10"><a href="welt.html" onMouseOver="Wechsel(0,welt);" onMouseOut="Wechsel(1,welt);" onclick="Wechsel(2,welt);" target="rFrame"><img src="welt.gif" width="10" height="10" border="0" alt=""></a></td>
        <td width="2"></td>
      </tr>
    </table>

    </body>
    </html>

    Wenn ich jetzt beim onload auch die Funktion Wechsel in dieser Form aufrufe:

    Wechsel(2,filme)

    stellt der IE den Bereich richtig dar. Der Netscape weigert sich immer mit der Meldung: "filme not defined".

    Wo liegt mein Fehler? Hast du vielleicht eine Idee?

    Jan

    hallo Jan,
    wenn klar ist, daß "Hobby" inaktiv sein wird, könntest du <img src="hobbys.gif" width="10" height="10" border="0" alt=""> dort schon die "inaktive" Graphik einbinden.
    Gruß,
    reni

    1. hallo Jan,
      wenn klar ist, daß "Hobby" inaktiv sein wird, könntest du <img src="hobbys.gif" width="10" height="10" border="0" alt=""> dort schon die "inaktive" Graphik einbinden.
      Gruß,
      reni

      Das geht nicht weil, wenn du über diesen Link dann drüber fährst, sich die Grafik ändert und das soll sie eben nicht.

      Trotzdem Danke für den Vorschlag.

      Jan

      1. hallo Jan,
        wenn klar ist, daß "Hobby" inaktiv sein wird, könntest du <img src="hobbys.gif" width="10" height="10" border="0" alt=""> dort schon die "inaktive" Graphik einbinden.
        Gruß,
        reni

        Das geht nicht weil, wenn du über diesen Link dann drüber fährst, sich die Grafik ändert und das soll sie eben nicht.

        Trotzdem Danke für den Vorschlag.

        Jan

        Hallo Jan,
        dann liegt es mit deiner RollOver_funktion im Argen. Wenn du diese nimmst:

        <script language="JavaScript">
        <!--
          var pfad="images/"
           var inaktiv="zebra";
          
          function Wechsel(bildname,zustand)
          {
        //alert("bildname: "+bildname+" zustand : "+zustand);
          if (inaktiv!=bildname)
            {
            if (zustand==1)
        {document[bildname].src =pfad+bildname+"over.jpg"; /*OnMouseOver*/
            }

        if (zustand==2) document[bildname].src =pfad+bildname+"out.jpg";  /*OnMouseOut*/
            if (zustand==3) {
        //alert("drei");
               document[inaktiv].src =pfad+inaktiv+"out.jpg";      /*OnClick*/
               document[bildname].src = pfad+bildname+"click.jpg";
            inaktiv=bildname; }
            }
           return true; }

        //-->
        </script>

        --snip ---
        <a href="zebra.htm" target="rechtesFenster" onMouseOver="Wechsel('zebra',1);" onMouseOut="Wechsel('zebra',2);" onClick="Wechsel('zebra',3)">
          <img src="images/zebraclick.jpg" name="zebra" border="0" width="70" height="70" alt=""></a>

        <a href="mandel.htm" target="rechtesFenster" onMouseOver="Wechsel('mandel',1);" onMouseOut="Wechsel('mandel',2);" onClick="Wechsel('mandel',3)">
          <img src="images/mandelout.jpg" name="mandel" border="0" width="70" height="70" alt=""></a>

        dann ist zebra echt inaktiv und wird erst vom RollOver erfasst, wenn eine andere Graphik inaktiv geworden ist.
        Gruß,
        Reni

  2. Hi Jan !

    [...]

    function Wechsel(num,imgname)
    {            
      if (inaktiv!=imgname)
      {    
        if (num==0) imgname.src = im[num].src;
        if (num==1) imgname.src = im[num].src;  
        if (num==2)
        {
          inaktiv.src = im[1].src;      
          imgname.src = im[2].src;
          inaktiv=imgname;
        }
      }

    [...]

    <td width="10"><a href="hobbys.html" onMouseOver="Wechsel(0,hobbys);" onMouseOut="Wechsel(1,hobbys);" onclick="Wechsel(2,hobbys);" target="rFrame"><img src="hobbys.gif" width="10" height="10" border="0" alt=""></a></td>
        <td width="2"></td>
      </tr>
    </table>
    <table>
      <tr>
        <td width="5"><img src="out.gif" name="filme" width="5" height="10" border="0" alt=""></td>
        <td width="2"></td>
        <td width="10"><a href="filme.html" onMouseOver="Wechsel(0,filme);" onMouseOut="Wechsel(1,filme);" onclick="Wechsel(2,filme);" target="rFrame"><img src="filme.gif" width="10" height="10" border="0" alt=""></a></td>
        <td width="2"></td>
      </tr>
    </table>
    <table>
      <tr>
        <td width="5"><img src="out.gif" name="welt" width="5" height="10" border="0" alt=""></td>
        <td width="2"></td>
        <td width="10"><a href="welt.html" onMouseOver="Wechsel(0,welt);" onMouseOut="Wechsel(1,welt);" onclick="Wechsel(2,welt);" target="rFrame"><img src="welt.gif" width="10" height="10" border="0" alt=""></a></td>

    [...]

    Wenn ich jetzt beim onload auch die Funktion Wechsel in dieser Form aufrufe:

    Wechsel(2,filme)

    stellt der IE den Bereich richtig dar. Der Netscape weigert sich immer mit der Meldung: "filme not defined".

    Wo liegt mein Fehler? Hast du vielleicht eine Idee?

    Du sprichst die Bilder doch mit ihrem Namen an, aber du hast keine
    Name im img-Tag definiert... Du muesstest den Tags noch
    <img src="filme.gif" width="10" height="10" border="0" alt="" name="filme"> hinzufuegen und den Namen entsprechend anpassen...
    Kann sein, dass IE das kompensiert, Netscape sich aber straeubt...

    Versuchs mal :)

    Bye,
    Jens