Tabelle als Button (onMouseOver-Effekt)

[Manni]

Ich habe für eine Seite eine Art Buttons mit einer Tabelle gemacht.
Hier ist der Code:

PHP-Code:

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

Ich möchte gerne wissen, was ich in die Funktionen onMouseOverFunction() und onMouseOutFunction() schreiben muss, damit sich, wenn ich mit der Maus über die mittler Zelle fahre, sich die Hintergrundbilder von allen drei Zellen entsprechend ändern. Ich habe alles ausprobiert was ich mit JavaScript kann (das ist nicht gerade viel ) aber habe keine Lösung gefunde

Bitte helft mir

Manni

[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!

[Manni]

Thx, hat geklappt !

Kann man auch per JavaScript die Klasse verändern?

Manni

[mitaki]

Code:

<style type="text/css">
.def { color:blue; }
.abc { color:green; }
</style>

<div id="heins"
     class="abc"
     onMouseOver="document.getElementById('heins').className = 'def';"
     onMouseOut="document.getElementById('heins').className = 'abc';">hallo</div>

Das solltest du verstehen können
Wichtig zu Wissen: class ist ein reservierter Name in Javascript, daher schreibt man für das HTML Attribut className.

[Manni]

Thx. Dann werde ich mal das obere Script mit Klassen bauen

Manni