Tabelle als Button (onMouseOver-Effekt)

[mitaki]

Code:

<script type="text/javascript">
<!--
function onMouseOverFunction(ein,zwe,dre){
  document.getElementById(ein).style.background = "url(abc.gif)";
  document.getElementById(zwe).style.background = "url(abc.gif)";
  document.getElementById(dre).style.background = "url(abc.gif)";
}

function onMouseOutFunction(ein,zwe,dre){
  document.getElementById(ein).style.background = "url(buttonL.gif)";
  document.getElementById(zwe).style.background = "url(buttonM.gif)";
  document.getElementById(dre).style.background = "url(buttonR.gif)";
}
//-->
</script>

<table cellspacing="0" cellpadding="0" border="0">
    <tr>
        <td id="button1L"
            style="background: url(buttonL.gif);
               background-repeat: no-repeat;
               background-position: bottom right;">
        </td>
        <td id="button1"
            onMouseOver="onMouseOverFunction('button1L','button1','button1R');"
            onMouseOut="onMouseOutFunction('button1L','button1','button1R');"
            onClick="window.location='Ziel';"
            style="background: url(buttonM.gif);
               background-repeat: repeat-x;
               background-position: bottom;"
               nowrap="nowrap">
            ButtonText
        </td>
        <td id="button1R"
            style="background: url(buttonR.gif);
               background-repeat: no-repeat;
               background-position: bottom left;">
        </td>
    </tr>
</table>

Beachte auch die Veränderungen im HTML/CSS Gerüst!