Buttons selber erstellen und einfügen

[jimi77]

Hi

Ich hab nicht ganz genau gewusst ob es hier in dieses Thema reinpasst, weil es ja auch ein bisschen mit Bildbearbeitung zu tun hat.

Ich habe vor einigen Monaten angefangen mich mit html zu beschäftigen. Nun da ich schon ein bisschen was kann versuche ich mich schon an etwas schwierigere Sachen ranzuwagen.
Ich wollte versuchen meine Seiten optisch schöner gestalten und wollte deshalb Buttons selber machen.
Nun jaah, es hat nicht so wirklich funktioniert. Ich habe dazu fireworks benutzt, ja rein optisch sehen sie ja nicht so schlecht aus. Ich habe einen Suchebutton gemacht (er hat keine Funktion oder so, ich habe ihn nur eingefügt).
Nur wie bringe ich ihn dazu das er sich zB wenn man mit der Maus darüber fahrt, dass er leuchtet oder ähnliche effekte. und dass man den klick sieht (also nicht das er nur ein verweis ist). Ein weiteres Problem war das ich nicht wusste wie man alles außer dem Button transparent macht. Es hat immer wieder Stelle gegeben die nicht transparent waren (da der Button einen Schatten hatte).

Ich hoffe ihr könnt mir helfen
Wenn irgendwas unklar is im Text, dann fragt nochmal nach weil ich blicke auch nicht mehr ganz durch was ich da zusammen geschrieben habe

Danke

 

[nichtsooft]

<INPUT TYPE="image" SRC="blaaa" STYLE="blubb">

oder noch besser:

<DIV STYLE="blaaa" OnClick="blubb">click</DIV>

 

[jimi77]

tut mir leid ich versteh nicht was du da geschrieben hast. Ich kann nicht php.

ich wollte buttons aus zB png bildern machen. Mit dreamweaver kann man auch buttons einfügen nur wollte ich sie selber grafisch gestalten. Ich hab mir gedacht den button in ein formular zugeben.

 

[nichtsooft]

Das ist kein PHP sondern HTML! Wenn du dir ernsthaft Gedanken drüber machst eine FORM zu bauen (und dazu braucht man nen Button) dann sollte dir HTML bekannt sein und du hättest es erkannt.

 

[hurga_gonzales]

Nicht wirklich hilfriech, nichtsooft, denn die Frage des TE war nicht: "Bitte testet mich, ob ich HTML kann!".


Grafischer Button:
<input type="image" src="/pfad_zum_bild/meinButtonBild.png" ...>

In einem Formular löst der Button Type Image immer ein Submit des Formulars aus, sobald man darauf klickt. Das heißt, das Formular wird abgesendet.

Wenn Du möchtest, dass der Button "leuchtet", kannst Du das beispielsweise mit einem Link machen, dessen Hintergrund die "dunkle" Grafik des Buttons enthält und, bei der Hover Deklaration im Stylesheet wird die dunkle Grafik mit einer hellen getauscht.
Du hast also zwei Button Grafiken. Eine mit dunkler und eine mit heller Beschriftung.

Dein Link Style:
a.btn:link, a.btn:active, a.btn:visited { background-image:url(/pfad_zum_bild/meinButtonBildDunkel.png) no-repeat; width:100px; height:20px; color:#000; }
a.btn:hover { background-image:url(/pfad_zum_bild/meinButtonBildHell.png) no-repeat; width:100px; height:20px; color:#fff; }

Dein Link im HTML Code:
<a href="http://WohinAuchImmer.html" class="btn">ButtonBeschriftung</a>

Du kannst "hover" auch auf andere Elemente, beispielsweise dem Button Type Image, enwenden, aber ältere IE-Browser als der IE7 checken das nicht und so wird das Hover dort nicht funktionieren, da diese Browser nur Hover auf "a" mit einem "href" verstehen.

Eine ganz andere Lösung wäre, die Sache mit Javascript zu lösen. Bietet mehr Möglichkeiten, funktioniert aber auf einem kleinen Benutzerkreis, der aus welchen Gründen auch immer kein Javascript anzeigen kann, nicht.

Schüss
Hurga

 

[Livven]

Nur wie bringe ich ihn dazu das er sich zB wenn man mit der Maus darüber fahrt, dass er leuchtet oder ähnliche effekte. und dass man den klick sieht (also nicht das er nur ein verweis ist). Ein weiteres Problem war das ich nicht wusste wie man alles außer dem Button transparent macht.

Man erstellt für jeden Status des Buttons ein eigenes Bild:

Dann gibt man den <a>-Tags, bei denen man das Button-Bildchen verwenden möchte, ein class-Attribut mit dem Wert button. Im CSS schreibt man dann:

a.button
{
	background:#E6F0FF url(Button.png) no-repeat;
	width:121px;
	height:36px;
	text-align:center;
}
a.button:hover
{
	background:#E9F2FF url(Button_hover.png);
}
a.button:active
{
	background:#D8E1F0 url(Button_click.png);
}

Also ähnlich wie bei hurga_gonzales.

 

[jimi77]

danke für die antworten

ich hätt mir das um einiges komplizierter vorgestellt. Jetzt muss ich das nur ausprobieren.

 

[jimi77]

ich habs irgendwie nicht geschafft

könnt ihr mir das vlt ein bisschen genauer erklären.

Und könnt ihr mir sagn wie ich schaffe die buttons zu platzieren. immer wenn ich ihn einfüge dann vergrößert sich die tabellenzeile und das hintergrundbild ist dann vervielfacht. Ich hab unten ein Bild von dem Problem hingegeben.

Danke für eure Geduld