CSS Klickbutton

Computer: Software & Programmierung HTML & CSS
#1

Hallo CSS-Experten,

habe hier (http://home.arcor.de/michaels.interface/tutors/css/c…) eine Anleitung zur Erstellung von Klickbuttons befunden. Der Text lautet:

Titel der Datei
form { width:450; height:190; background-color:#112233; padding:15; font-family:verdana; font-size:10; }

input.bgcolor { background-color:#445566; width:150; color:#bbccdd; font-size:10; border:1 solid #aabbcc; }

input.bgimage { background-image:url(‚button_image.png‘); width:150; color:#000000; font-size:10; border:0 solid #000000; }

Meine Fragen:

Kann man noch einen Hover Effekt erzeugen, der z.B. ein neues Hintergrundbild für den Button lädt, wenn man mit der Maus drüber
fährt?

Kennt Ihr vielleicht noch andere Sammlungen von Klickbuttons, die auch gut aussehen?

Viele Grüße

Sisko

#2

Hallo CSS-Experten,

Hi, (Wer?)

[Qoting sinnvoll sortiert]

Kann man noch einen Hover Effekt erzeugen, der z.B. ein neues
Hintergrundbild für den Button lädt, wenn man mit der Maus
drüber fährt?

Der Text lautet:

PRE-Tags sind extrem geil:

> Titel der Datei  
>   
>   
> form { width:450; height:190; background-color:#112233;  
> padding:15; font-family:verdana; font-size:10; }  
>   
> input.bgcolor { background-color:#445566; width:150;  
> color:#bbccdd; font-size:10; border:1 solid #aabbcc; }  
>   
> input.bgimage { background-image:url('button\_image.png');  
> width:150; color:#000000; font-size:10; border:0 solid  
> #000000; }


input.bgimage:hover {background-image:url('foo.png');}



>

Kennt Ihr vielleicht noch andere Sammlungen von Klickbuttons,
die auch gut aussehen?

Nein. Buttons sind doof.

Gruss vom Frank.

#3

Hi Frank,

„PRE-Tags sind extrem geil:“ Was ist das genau?

Leider klappt das bei mir nicht. Habe es genau so übernommen, wie Du es beschrieben hast. Habe dann nur die *.png durch meine Bilder ersetzt. Muss man eigentlich dann den URL des Bildes angeben oder reicht der Name?

Und wie lautet dann die Befehlszeile für den Klickbutton? Übriegens möchte ich, dass ein neues Fenster aufgeht, bestimmte Größe hat und keine Scrollbars hat.

Kannst Du mir da auch helfen??

#4

Hi,

„PRE-Tags sind extrem geil:“ Was ist das genau?

[http://www.wer-weiss-was.de/cgi-bin/faqs/faqlist.fpl...](http://www.wer-weiss-was.de/cgi-bin/faqs/faqlist.fpl?op=show&context=classic&entries=,30,%2330)



> Leider klappt das bei mir nicht. Habe es genau so übernommen,  
> wie Du es beschrieben hast. Habe dann nur die \*.png durch  
> meine Bilder ersetzt. Muss man eigentlich dann den URL des  
> Bildes angeben oder reicht der Name?

Funktioniert genauso wie beim Einbinden von Grafiken in HTML:
[http://de.selfhtml.org/html/grafiken/einbinden.htm](http://de.selfhtml.org/html/grafiken/einbinden.htm)
Befinden sich die Bilder im gleichen Verzeichnis? Handelt es sich um \*.jpg, \*.gif oder \*.png s? 



> Und wie lautet dann die Befehlszeile für den Klickbutton?  
> Übrigens möchte ich, dass ein neues Fenster aufgeht,  
> bestimmte Größe hat und keine Scrollbars hat.

Das geht mit window.open()
[http://de.selfhtml.org/javascript/objekte/window.htm...](http://de.selfhtml.org/javascript/objekte/window.htm%23open)



mfg

Sebastian
#5

Hi Frank,

Hallo,

Leider klappt das bei mir nicht.

Funktioniert denn das hier? http://www.der-frank.org/tmp/sisko.html Wenn nein, kann Dein browser das nicht.

Muss man eigentlich dann den URL des Bildes angeben oder
reicht der Name?

Den Pfad zur Datei relativ zum stylesheet oder absolut.

Und wie lautet dann die Befehlszeile für den Klickbutton?

Genau so, wie Du sie angegeben hattest.

Übriegens möchte ich, dass ein neues Fenster aufgeht,
bestimmte Größe hat und keine Scrollbars hat.

Keine Ahnung, das geht so irgendwie mit JavaScript, oder? Davon versteh ich nix. Warum muss es eigentlich ein button sein? Tut es ein link nicht?

Gruss vom Frank.

#6

klick ja, aber kein onmouseover (hover)
owt

#7

hallo sisko,

erstmal vielen dank für deinen verlinkten artikel zu meinem tutor ‚css.documentation‘ … :wink:

der klassische :hover-effekt wird im IE nur für die ‚normalen links‘ -TAGS zugelassen und angezeigt, ergo:
alle anderen html-elemente können so nicht animiert werden…, wie eben in deinem fall das input:hover… :frowning:

die lösung heisst ‚exchange.className‘ und tauscht beim überfahren eines html-elements seine css-klasse.
vorteil: diese technik funktioniert browserübergreifend im IE, mozilla, netscape, opera …

tutor >>> http://home.arcor.de/michaels.interface/tutors/css/exchange.className/index.htm

habe das von dir erwähnte demo ‚form_input_button.htm‘ aus meiner ‚css.documentation‘ mit diesem feature ausgestattet und auf meinem webserver geladen … :wink:

demo >>> http://home.arcor.de/michaels.interface/support/sisko/index.htm

anmerkung: die formular-buttons tauschen u.a. ihr hintergrundbild und öffnen ein neues fenster.

good luck & Xperience!
greez, maik.l