• Jetzt anmelden. Es dauert nur 2 Minuten und ist kostenlos!

Schaltfläche mit wechselnden Farben

L

Lukasco

Neues Mitglied
Hallo, ich möchte gerne eine art Button/Schaltfläche erstellen, die Anfangs grün ist und wenn man drauf klickt, soll sie rot werden. nur wie kann ich das realisieren, das der Button die Farbe wechselt?

Soll ein ganz einfaches HTML Dokument werden, was man mit jedem Browser öffnen kann.

***
Wäre super wenn ihr mir Helfen könnt :)
 
Ist der "Button" ein Link der beim Anklicken eine neue Seite lädt? Dann müsstest Du auf der neuen Seite diesem Link/Button eine CSS-Klasse geben die die Farbe ändert.

Seite 1
HTML: 
<a href="linkziel.html">Linkbeschriftung</a>

linkziel.html
HTML: 
<a href="linkziel.html" class="aktiv">Linkbeschriftung</a>

Per CSS definierst Du dann für den Link mit der Klasse "aktiv" die gewünschte Schriftart.
 
nein, der Button soll nicht mit Link zu einer anderen Seite sein.

ehm, wie beschreib ich das mal...

Also später soll das so eine art bestätigung sein, wie im Kino die Sitzplatzreservierung, der Sitz der vergeben ist, wird angeklickt :)

dann färb er sich rot. ;)

Mit dem Link geht das wohl nicht, denn ich möchte ja keine neue Seite aufrufen...

Edit*

Man kann da auch, wen es geht mit einer Grafik irgendiwe machen, sollte halt nur Wechsel,wenn man drauf klickt.
 
Zuletzt bearbeitet:
Auch für diesen Fall gilt das selbe wie ich oben geschrieben habe: du musst eine CSS-Klasse setzen die die Einfärbung regelt. Alternativ kannst Du die von devilseye erwähnte Pseudoklasse :active verwenden.
 
also wenn es eine Sitzplatzbestätigung oder ähnliches werden soll dann musst du sicher mit JavaScript arbeiten wieviel PHP dass dann noch von nöten sein wird kann ich dir nicht sagen da meine PHP Kenntnisse noch sehr überschaubar sind.
 
so ehm also das würde dann so aussehen... oder ?

HTML: 
 <body>
    <style type="text/css"><!--
a:link{color:#000;}
a:visited{color:#f00;}
a:hover{color:#f00;}
a:active{color:#f00;}
--></style>
    <table style="border-collapse:separate;" border="1">
      <tbody>
        <tr>
          <td><font style="font-weight: bold;" size="+2"><a href="."
                class="aktiv">1</a></font> </td>
wenn ich dann aber auf die "1" drücke öffnet sich ja eine neue Seite, soll es ja aber nicht...

oder wie seh ich das?

soll quasi einfach nur ein button sein bzw ne Zahl, die sich immer ändert, wenn man drauf klickt.. ohne php,datenbanken oder sonstiges

das mit dem kino ist mir nur so eingefallen...
 
Zuletzt bearbeitet:
Wenns nur ein Button sein soll, nimm ein anderes Element als <a>, z.B. <strong> oder <i> oder auch das bedeutungslos <span>. :active kann man auch daran hängen. Wenn Du den Link behalten willst, fang den Aufruf mit JavaScript ab, z.B. so:
HTML: 
<a href="javascript:void(0);">1</a>

PHP bräuchtest Du sicher zur Speicherung dieser Informationen. Dazu musst Du die angeklickten Sitzplätze aber auch anders Definieren. Ein <span> oder <a> wäre dann auch falsch. Dann müsstest Du die Zahlen als Formularfelder knüpfen, z.B. jeweils an ein <input>, welches Du auch per CSS so aussehen lassen kannst wie Du willst. Daher ist es schon wichtig, selbst wenn es nur eine Übung sein soll, zu hinterfragen was das eigentliche Ziel von so einer Oberfläche ist um letztlich den richtigen HTML-Code für diesen Einsatzzweck zu definieren.
 
Also....
das sieht so aus.... ich kann zwar draufklicken, jedoch bleibt die Rote Farbe ja dann nicht... oder ? :?

PS: ich habe es nun mal mit Zahlen gemacht, fand ich einfacher...
********
Um vllt noch genauer zu werden: es soll quasi ein endlosschleife werden, immer wenn ich draufklicke wechselt sich die farbe wieder, es soll weder gespeichert werden noch sonst was, e soll sich nur in diesem HTML dokument ändern.

Beispiel: Standartmäßig steht dorf eine 1 .... ich klicke drauf und nun wird aus der 1 eine 2... klicke ich nochmals drauf wird es wieder eine 1... :D

Verstanden?
*********

HTML: 
 <body>
   
    <title></title>
    <style type="text/css"><!--
a:link{color:#000;}
a:visited{color:#f00;}
a:hover{color:#f00;}
a:active{color:#f00;}
--></style>
    <table style="border-collapse:separate;" border="1">
      <tbody>
        <tr>
          <td><font style="font-weight: bold;" size="+2"><a
                href="javascript:void(0);" class="aktiv">1</a></font><a
              href="javascript:void(0);"> </a></td>
          <td style="font-weight: bold;"><font size="+2">2</font></td>
        </tr>
 
HTML: 
<a href="javascript:void(0);" onclick="if(this.innerHTML == 1){this.style.color='red';this.innerHTML='2';}else{this.style.color='blue';this.innerHTML='1';}">1</a>
Um es ganz schick zu machen, sollte man das noch in einer Funktion kapseln. Die Färbung sollte man auch über eine CSS-Klasse lösen. Aber das findest Du mit dieser Basis dann sicher selbst. Achja, und lass <font>-Tags weg. Die gehören nicht mehr in HTML rein. Styles werden per CSS gesetzt.
 
Du musst dich einloggen oder registrieren, um hier zu antworten.

Neueste Beiträge

Zurück
Oben