Button Design

Computer: Software & Programmierung HTML & CSS
#1

Hey

Ich habe folgende Frage:

Wie kann ich einem Button vom Type Submit variable Hintergrundbilder Zuweisen? (also dass ich beim klicken einen „Klickeffekt“ habe)

Habe das ganze über Javascript versucht:

var status = „green“;

function onDown() {

document.getElementById(„myButton“).style.backgroundImage = „url(images/red.jpg)“;
}

function onUp() {

document.getElementById(„myButton“).style.backgroundImage = „url(images/green.jpg)“;
}

function onOut() {

document.getElementById(„myButton“).style.backgroundImage = „url(images/green.jpg)“;
}

Dieses Tag wird vom Tomcat in ein umgewandelt
Nur werden mir die Ändereungen per Javascript und CSS nicht angezeigt.

Wenn ich nun den Button direkt als setzte dann funktioniert das alles…

Aber es muss doch auch n weg geben wie ich den Type Submit Bilder onmousedown usw zuweisen kann sodas ich auch einen „klickeffekt“ habe…

Hoffe ich habe mich deutlich ausgedrückt und ihr könnt mir helfen…

Grüße

DE

#2

Wie kann ich einem Button vom Type Submit variable
Hintergrundbilder Zuweisen? (also dass ich beim klicken einen
„Klickeffekt“ habe)

Hallo,

also wenn man’s richtig machen möchte, verzichtet man für diesen Effekt besser auf JavaScript und macht das mit CSS. Du kannst, ohne im HTML-Code große Änderungen zu machen, mit CSS definieren, welches Objekt beim Überfahren mit der Maus oder beim Klick sein Aussehen ändern soll.

Vereinfachtes Beispiel:

Und hier der zugehörige CSS-Teil:

input.klickiklack
{background-image:url(bild1.gif);
}
input.klickiklack:hover
{background-image:url(bild2.gif);
}
input.klickiklack:active
{background-image:url(bild3.gif);
}

bild1.gif ist das Normalbild, bild2.gif das Bild beim Überfahren mit der Maus, bild3.gif das Bild beim Anklicken des Elements.

Wie man CSS einbindet, findest Du hier:
http://de.selfhtml.org/css/index.htm
oder hier: http://de.selfhtml.org/navigation/css.htm

Viele Grüße
Wolfgang

#3

Kurzer NAchtrag noch mal,

wichtig bei dieser Lösung (wie eigentlich bei jeder Webseite!) ist noch, dass die Doctype-Angabe vollständig und gültig ist. Wenn ich mich recht erinnere, werden sonst nicht alle Browser die Gestaltung richtig anzeigen.

Der Internet-Explorer hat bei mir früher auch mal die Active-Angabe nicht korrekt dargestellt. Weiß nicht genau, ob der aktuelle das immer kann und macht.

Gruß. W

[Bei dieser Antwort wurde das Vollzitat nachträglich automatisiert entfernt]

#4

Hey

Erstmal vielen Dank für deine Antwort

Aber das war nicht ganz das was ich gesucht habe. Ich habe bewusst auf ein hover Effekt verzichtet, da ich vermeiden will, dass sich Kunden, wenn sie nur mit der Maus über den Button gehen (ohne zu klicken), denken dass sie schon geklickt haben (auf Grund des Effekts). Das würd unser TicketSystem, denk ich, schwer zum qualmen bringen…

Der Effekt soll wirklich NUR dann auftreten wenn ich als User auf den Button klicke.

Des weiteren besteht noch das Problem dass ich die Ecken der Buttons noch sehe… Die Buttons sollen aber abgerundete Ecken besitzen. Mit den Ecken ist der Button größer als das Bild und das sieht besch… eiden aus…

Grüße

DE

#5

Hallo nochmal,

Aber das war nicht ganz das was ich gesucht habe. Ich habe
bewusst auf ein hover Effekt verzichtet, da ich vermeiden
will, dass sich Kunden, wenn sie nur mit der Maus über den
Button gehen (ohne zu klicken), denken dass sie schon geklickt
haben (auf Grund des Effekts). Das würd unser TicketSystem,
denk ich, schwer zum qualmen bringen…
Der Effekt soll wirklich NUR dann auftreten wenn ich als User
auf den Button klicke.

Ja, genau das lässt sich wie bereits beschrieben mit der Pseudoklasse „:active“ (der auch „:focus“) erzielen. Allerdings habe ich noch mal gestöbert, und während die meisten üblichen Browserprogramme das können, ist der Internet-Explorer selbst in der Version 7 für diese Gestaltung immer noch zu dumm. Quelle de.selfhtml.org: „Im Internet Explorer bis einschließlich Version 6 funktioniert keine dieser allgemeingültigen Pseudoklassen und in Version 7 lediglich :hover.“ Schön doof, das Ding.

Des weiteren besteht noch das Problem dass ich die Ecken der
Buttons noch sehe… Die Buttons sollen aber abgerundete Ecken
besitzen. Mit den Ecken ist der Button größer als das Bild und
das sieht besch… eiden aus…

Für einen Überblick solltest Du auf jeden Fall ein bisschen mehr über CSS anlesen (s.a. die Hyperlinks, die ich aufgeführt hatte). Du hast mit CSS den kompletten Einfluss auf die Gestaltung, kannst also außer der Hintergrundgrafik z.B. auch eine Eigenschaft „border“ angeben, die den Rahmen ausschaltet oder von mir aus auch gestrichelt oder gepunktet macht, oder eine Eigenschaft „font-family“ für die Schriftart, oder eine Eigenschaft „direction“, um deinen Text von rechts nach links statt von links nach rechts laufen zu lassen, und so weiter und so fort…

Ein Blick darauf lohnt sich!
Viele Grüße
Wolfgang