Grafik-Button soll sich verändern

[Olaf]

Hallo liebe Forumsgemeinde,

ich hab mal eine Frage an euch.

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.

Ich danke euch jetzt schonmal.

MfG Olaf

[spud]

Hallo!

ich hab mal eine Frage an euch.

Hm. Dein Posting enthält aber gar keine Frage. :-(

spud

[Olaf]

Hallo!

ich hab mal eine Frage an euch.

Hm. Dein Posting enthält aber gar keine Frage. :-(

spud

Die Frage ist, "könnt ihr mir dabei helfen?"

[Thomas Luethi]

Hallo Olaf,

»»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.

Das geht nicht mit HTML, sondern nur mit JavaScript.
http://selfhtml.teamone.de/javascript/index.htm
http://selfhtml.teamone.de/javascript/sprache/eventhandler.htm

Etwas aehnliches ist das hier:
http://selfhtml.teamone.de/javascript/beispiele/buttons.htm

Gruesse,

Thomas

[Olaf]

Hallo Olaf,

»»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.

Das geht nicht mit HTML, sondern nur mit JavaScript.
http://selfhtml.teamone.de/javascript/index.htm
http://selfhtml.teamone.de/javascript/sprache/eventhandler.htm

Etwas aehnliches ist das hier:
http://selfhtml.teamone.de/javascript/beispiele/buttons.htm

Gruesse,

Thomas

Danke, aber wie mache ich das ganze, das der Button auch verändert bleibt, also nicht nur wenn man mit der maus drüber fährt?

[Thomas Luethi]

Hallo,

Danke, aber wie mache ich das ganze, das der Button auch verändert bleibt, also nicht nur wenn man mit der maus drüber fährt?

Lerne JavaScript.
Dann verstehst Du, was das Beispiel-Skript tut
(Bildwechsel bei onMouseOver und onMouseOut)
und kannst es entsprechend anpassen bzw. auf
dieser Grundlage ein neues Skript schreiben,
welches bei onClick das Bild austauscht und
gleichzeitig alle anderen Bilder auf den
Original-Zustand zuruecksetzt.

Von mir (und vielen andern hier im Forum)
kriegst Du keine fertigen Loesungen auf
dem Silbertablett. Lies mal </faq/#Q-07a>.

Von mir kriegst Du erst recht keine fertige
Loesung, wenn es um JavaScript geht...
(Diesen Themenbereich habe ich auch
ausgeblendet, nur weil Du dummerweise
den falschen Themenbereich HTML erwischt
hattest, habe ich ueberhaupt geantwortet...)

Gruesse,

Thomas

[Olaf]

Wozu ist ein Forum überhaupt da?
Wenn ich eine Frage habe und dann die Antwort kommt "Lerne Javascript" ist mir damit echt geholfen, klasse!
Vielleicht kann mir ja noch jemand anderes weiter helfen.
Danke

[Struppi]

Wozu ist ein Forum überhaupt da?

Einfach mal lesen, was oben drüber steht.

Wenn ich eine Frage habe und dann die Antwort kommt "Lerne Javascript" ist mir damit echt geholfen, klasse!

Dazu ist aber das Forum da, um Leuten die was lernen wollen zu helfen.

Vielleicht kann mir ja noch jemand anderes weiter helfen.

Ich weiß ja nicht was du noch alles willst. Lerne Javascript oder lerne eine Suchmaschine bedienen. Was sollen wir denn sonst noch machen?

Struppi.

[Olaf]

Ist mir ja klar das ihr mir kein komplettes skribt geben wollt, aber nur zu sagen "Lern Javaskribt" ist doch auch nicht die Hilfe, oder.
Vielleicht mal einen kleinen Befehl sagen, wo ich z.B. versuchen kann diesen mit dem anderen, vorhanden skribt zu verknüpfen.

[Olaf]

Sorry, hab deinen ersten beitrag total übersehn, hab jetzt was brauchbares gefunden, danke dafür. Es hätte ja gereicht, wenn mir jemand z.B. etwas mit stay erläutert hätte, denn damit hät ich dann wirklich viel anfangen können.
Also nochmal danke ...

[Struppi]

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.

Ich hab mal gesucht für dich http://www.google.de/search?num=30&hl=de&ie=ISO-8859-1&q=mouseover+stay+javascript&meta=

Struppi.

[Kai]

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