Klaus Engroff: Javascript: dynamische grafische Buttons - Positionsproblem !!

Beitrag lesen

Hallo I need Hilfe !!

Ich habe ein Problem mit der Positionierung einer bzw. mehrerer Highlight-Grafik-Buttons. Die "Mutter"-Buttons sind positioniert.

Ich habe einen Seitenkopf aus Tabellen gebaut, der aus 3 Spalten besteht. Die mittlere Spalte ist 2-zeilig, die rechte Spalte ist 5-zeilig (bzw. es steckt eine 5-zeilige Tabelle drin).

In der linken Spalte steckt eine Grafik. Die 2 Zeilen der mittleren Spalte enthalten ebenfalls je eine Grafik (Schriftzug-Bilder als Seitenkopf). In der rechten Spalte sollen nun untereinander 5 Grafik-Buttons eingebaut werden die auch dort highlightbar sind - wie mache ich das genau ??

Bisher gelingt mir zwar die Erzeugung des Scripts zum Umschalten der Buttons, jedoch wird bei "onMouseOver" die Grafik in der linken Spalte durch die Buttongrafiken ersetzt. Der Mutter-Button verändert sich nicht. Entferne ich zum Spass die Orginalgrafik der linken Spalte, dann ersetzt sich die Grafik in der Mitte oben usw. - was mache ich falsch ??

PS: Es ist dabei egal, ob die "new Image"-Instanzen im "head" oder "body" definiert werden.

Vielen Dank vorab für die Hilfe !!
Gruß Klaus Engroff

Script der Seite:
<body topmargin="0" leftmargin="0" marginwidth="0" marginheight="0" bgcolor="#f0f0f0" text="#000000" link="#363636" vlink="#363636" alink="#d5ae83">
  <table border="0" cellpadding="0" cellspacing="0" background="../bilder/themes/hbv-headback.gif" width="100%" height="115">
   <tr height="40">
    <td rowspan="2" align="center" width="130" height="115"><a href="http://www.hbv-aktuell.de" target="_top"><img src="../bilder/themes/hbv-logo.gif" width="97" height="110" border="0" align="right"></a></td>
    <td align="center" height="40"><a href="http://www.hbv-aktuell.de" target="_top"><img src="../bilder/themes/hbv_title.gif" width="444" height="20" border="0"></a></td>
    <td width="20" height="40"></td>
    <td rowspan="2" width="110" height="110">
     <div align="center">
                        <table border="0" width="100%">
                          <tr>
                            <td width="110" align="center">
                              <p style="word-spacing: 0; line-height: 100%; margin-top: -2; margin-bottom: -3">
       <script type="text/javascript">
       <!--
       normal1        = new Image();
       normal1.src    = "../bilder/themes/hbv1_b1.gif";     /* 1. Standard-Button  */
       highlight1     = new Image();
       highlight1.src = "../bilder/themes/hbv1_b1h.gif";    /* 1. Highlight-Button */

/* usw. fuer alle weiteren zu benutzenden Grafiken */

function bildwechsel(normal1,highlight1)
      {
      window.document.images[normal1].src = highlight1.src;
      }
      //-->
      </script>

<a href="index1.html"
       onMouseOver="bildwechsel(0,highlight1)"
       onMouseOut="bildwechsel(0,normal1)"><img src="../bilder/themes/hbv1_b1.gif" width="87" height="21" border="0"></a></td>
                          </tr>
                          <tr>
                            <td width="110" align="center">
                              <p style="word-spacing: 0; line-height: 100%; margin-top: -2; margin-bottom: -3"></td>
                          </tr>
                          <tr>
                            <td width="110" align="center">
                              <p style="word-spacing: 0; line-height: 100%; margin-top: -2; margin-bottom: -3"></td>
                          </tr>
                          <tr>
                            <td width="110" align="center">
                              <p style="word-spacing: 0; line-height: 100%; margin-top: -2; margin-bottom: -3"></td>
                          </tr>
                          <tr>
                            <td width="110" align="center">
                              <p style="word-spacing: 0; line-height: 100%; margin-top: -2; margin-bottom: -3"></td>
                          </tr>
                        </table>
     </div>
    </td>
   </tr>