Kai: Grafik-Button soll sich verändern

Beitrag lesen

Und zwar möchte ich auf eine Page Buttons machen. Soweit kein Problem. Wenn man dann aber auf einen Button klickt, soll dieser die Farbe verändern (also eine neue Button-Grafik laden). Dieser verfärbte Button soll so lange verändert bleiben, bis man auf einen anderen button klickt und dieser sich verändert.

Eine Lösung hätte ich da mal, allerdings ist zum Anpassen ebenfalls ein wenig Kenntnis von JavaScript hilfreich:
([...] heißt: Hier fehlt noch dein Codezeugs)

[...]
<head>
<script type="text/javascript">

/* Zuerst die gewuenschten Bilder initialisieren */
[...]
kontakt01 =  new Image;
kontakt01.src = "img/kontakt01.gif"
kontakt02 =  new Image;
kontakt02.src = "img/kontakt02.gif"

/* Diese Funktion muss im body aufgerufen werden:
 * <body onLoad="init()">
 */
function init()
{
  topic = 1;   /* Zeigt auf angewaehltes Topic */

/* temporaere Zwischenspeicher */
  oldBildNr = 0;
  oldBildId = "";
}

/* Diese Funktion setzt einen neuen Menuepunkt aktiv
 *
 * Beispielaufruf:
 *
 * <a href="01home/index.html"
 *    onClick="ActivateTopic(1,1,home02,home01)"
 *    onMouseOver="SwapImage(1,1,home02)"
 *    onMouseOut="SwapImage(1,1,home01)">
 *    <img src="img/home02.gif" border="0"
 *              width="100" height="50"></a>
 */
function ActivateTopic(nr,BildNr,BildId,inaktBildId)
{   /* Aktivieren eines Topics durch Klicken
     * Veraendern des Hintergrundbildes
     *
     * Parameter: Akt. Topic Nummer fuer den Vergleich
     *            Bild Nummer
     *            Bild ID
     *            Bild ID inakt. Bild (zum Ruecksetzen)
     *
     */
  if( topic != nr) {

/* Sonderfall erstes Anklicken */
  if( oldBildNr == 0 ) {
    /* Erstes Bild wiederherstellen */
    document.images[1].src = "img/home01.gif";
  } else {
      /* Altes Bild wieder herstellen */
      document.images[oldBildNr].src = oldBildId.src;
  }

/* Zeiger auf aktiviertes Topic setzen */
  topic = nr;

/* Aktives Bild setzen */
  document.images[BildNr].src = BildId.src;

/* Zwischenspeicher fuer das Ruecksetzen aktualisieren */
  oldBildNr = BildNr;
  oldBildId = inaktBildId;
  }
}

/* Die Bildwechsel Funktion (Hover-Effekt) */
function SwapImage(nr,BildNr,BildId)
{  /* Setzen des Bildes, wenn Topic nicht aktiv
    *
    * Parameter: Topic-Nr (nr)        - festgelegt (integer)
    *            Bild Nummer (BildNr) - forlaufend (integer) => probieren
    *            Bild Id (BildId)     - festgelegt (z.B home01)
    */
  if(topic != nr) {
    document.images[BildNr].src = BildId.src;
  }
}
</script>
</head>
<body>
[...]

Hoffe, es hilft.

Gruß.
  Kai