Matthias & Michael: Hoverschaltfläche mit Imagemap

Wir basteln seit Tagen an einer Navigationsleiste, die zu erst durchsichtig sein soll und beim hovern erscheint. Auf dem gif soll nun ein Imagemap installiert werden. Im MSIE4.0 funktioniert unser folgender Quelltext einwandfrei, aber im Netscape Navigator läuft entweder nur das Imagemap oder die Hoverschaltfläche. Kann uns jemand weiterhelfen?

<html>

<head>
<title>Navigationsleiste</title>
<meta name="GENERATOR" content="Microsoft FrontPage 3.0">
<meta name="Microsoft Border" content="none">
</head>

<body background="images/johgepra1.jpg">
<script language="JavaScript"> <!--

Normal1 = new Image();
Normal1.src = "images/nav3aus.gif";
Highlight1 = new Image();
Highlight1.src = "images/nav3an.gif";

function Bildwechsel(Bildnr,Bildobjekt)
{ window.document.images[Bildnr].src = Bildobjekt.src; }
//-->
</script>
<map name="Navigation">
<area shape=rect coords="0,0,140,20" href="index.htm">
<area shape=rect coords="0,21,140,40" href="index1.htm">
</map>
<table border="0" width="120" cellpadding="0" cellspacing="0">
  <tr>
    <td width="140" valign="top" align="center" onMouseOver="Bildwechsel(0,Highlight1)" onMouseOut="Bildwechsel(0,Normal1)">
    <img src="images/nav3aus.gif" ALT width="140" height="380" BORDER="0" usemap="#Navigation" border="0"
</tr>
</table>
</body>
</html>

  1. Hallo,

    <td width="140" valign="top" align="center" onMouseOver="Bildwechsel(0,Highlight1)" onMouseOut="Bildwechsel(0,Normal1)">

    Falls das wirklich so in eurer Datei steht, wird da wohl einiges nicht gehen. Der MSIE kennt onMouseover und onMouseout zwar in Verbindung mit praktisch allen HTML-Elementen, so wie es auch in HTML 4.0 vorgesehen ist, Netscape aber nicht. Da funktionieren diese beiden Event-Handler nur bei <a ...> und <area ...>. Aber bestimmt nicht in <td ...>

    Deshalb vielleicht mal folgendes versuchen:

    <td width="140" valign="top" align="center">
    <a name="hier" href="#hier" border=0  onMouseOver="Bildwechsel(0,Highlight1)" onMouseOut="Bildwechsel(0,Normal1)"><img src="images/nav3aus.gif" ALT width="140" height="380" BORDER="0" usemap="#Navigation" border="0"></a>
    </td>

    Oder:

    <td width="140" valign="top" align="center">
    <img src="images/nav3aus.gif" ALT width="140" height="380" BORDER="0" usemap="#Navigation" border="0">
    </td>

    und an anderer Stelle:

    <map name="Navigation">
    <area shape=... coords=.... onMouseOver="Bildwechsel(0,Highlight1)" onMouseOut="Bildwechsel(0,Normal1)">
    ...
    </map>

    viele Gruesse
      Stefan Muenz

  2. Wir basteln seit Tagen an einer Navigationsleiste, die zu erst durchsichtig sein soll und beim hovern erscheint. Auf dem gif soll nun ein Imagemap installiert werden. Im MSIE4.0 funktioniert unser folgender Quelltext einwandfrei, aber im Netscape Navigator läuft entweder nur das Imagemap oder die Hoverschaltfläche. Kann uns jemand weiterhelfen?

    Evtl. hilft das Studium der Source des entsprechenden Frames auf http://www.general-anzeiger-bonn.de. Dort ist für das Auswahlmenü etwas in der Art realisiert.

    Georg

  3. Hallo Matthias und Michael,

    ob ich eure Fragestellung kapiert habe ist mir noch
    immer nicht klar. Mir scheint die Lösung zu naheliegend.
    Hilft sowas weiter?

    <html>
    <head>
      <title>Navigationsleiste</title>
        <script language="JavaScript">
        <!--
        Normal1 = new Image();
        Normal1.src = "images/nav3aus.gif";
        Highlight1 = new Image();
        Highlight1.src = "images/nav3an.gif";
        function Bildwechsel(Bildnr,Bildobjekt)
        { window.document.images[Bildnr].src = Bildobjekt.src; }
        //-->
        </script>
    </head>
    <body>
        <map name="Navigation">
         <area shape=rect coords="0,0,140,20" href="index.htm">
         <area shape=rect coords="0,21,140,40" href="index1.htm">
        </map>
        <table border="0" cellpadding="0" cellspacing="0">
         <tr>
          <td><a href="#"
                 onMouseOver="Bildwechsel(0,Highlight1)"
                 onMouseOut="Bildwechsel(0,Normal1)"
           ><img src="images/nav3aus.gif"
                 ALT="Navigatonsleiste"
                 width="140"
                 height="380"
                 usemap="#Navigation"
                 border="0"></td></a>
         </tr>
        </table>
    </body>
    </html>

    <a href="#" ist nicht abgefangen, da könnte noch ein
    onClick mit einem return false sinnvoll sein.

    Klaus