button rollover ...

Ehm ich möchte bei meinem design dass wenn man auf die buttons mit der maus drauf geht sich das button verändert (z.B. färblich)
also das button hat einen schwarzen schlagschatten aber ich will das wenn man mit der maus drauf geht das der schwarze schlagschatten sich in einen orangen schlagschatten umwandelt

was muss ich jetzt machen?
ich möchte das wenn möglich mit CSS machen
doch muss ich auch die buttons so machen oder wie funtkioniert das??
habe photoshop 7

ich zeig am besten einen screen von den buttons:

[Blockierte Grafik: http://www.directupload.net/images/050706/temp/Z9fQbU5D.jpg]

die zei weißen die umrahmt sind! hoffe man erkennt es

Zitat von baloo

mit css alleine ists vielleicht schon möglich, weiss nicht *g*
auf jeden fall empfehle ich dir, dass du den text nicht direkt auf den button schreibst, sondern erst später in html.
das hat viele vorteile: navigation durch textlinks (gut für suchmaschinen, bilderlose browser, sprachausgabe...), einfaches ändern der texte auf dem button, einfaches ändern des buttons, ohne alle texte ändern zu müssen.. etc etc...

also dann kannst du den rohen button erstellen wo immer du willst.
dann erstellst du eine css klasse für den normalen button und eine für den hover-button, ich schlage die eine tabellenzelle vor.
zum beispiel so:

Code

td.menu_normal {
background-image; url(images/dernormalebutton.gif);
}
td.menu_hover {
background-image; url(images/derhoverbuttonmitkrassemeffekt.gif);
}

dein menu kannst du jetzt auf einer tabelle aufbauen, pro zelle ein menupunkt.
beim onmouseover wechselst du jetzt aber die css klasse per JS, und beim onmouseout ebenfalls. das kann dann etwa so aussehen:

Code

html und headerzeugs.. tabellenkopf


<tr><td class="menu_normal" onmouseover="this.className='menu_hover'" onmouseout="this.className='menu_normal'">menu 1</td></tr>
<tr><td class="menu_normal" onmouseover="this.className='menu_hover'" onmouseout="this.className='menu_normal'">menu 2</td></tr>
<tr><td class="menu_normal" onmouseover="this.className='menu_hover'" onmouseout="this.className='menu_normal'">menu 3</td></tr>


tabellenende und footerzeugs etc.

wenn du jetzt über eine tabellenzelle fährt, ändert das hintergrundbild.

jetzt empfiehlt sich es noch, den link auf die ganze tabelle zu erweitern - denn wenn sich schon das gesamte hintergrundbild ändert, will ich auch überall klicken können und nicht nur genau über dem text.
dies ist per css kein problem:

Code

a {
display: block;
width: 150px; /* oder je nach dem, wie breit deine buttons sind */
line-height: 20px; /* von vorteil: die höhe deiner buttons */
}

die schrift kannst du mit den diversen css teilern natürlich deinem button anpassen.

ich hoffe es hilft dir.
mein menu unter multi-web.ch ist zum beispiel so aufgebaut.

Alles anzeigen

danke schonmal für die ausfürhliche erklürung
werde das später ausprobieren

ehm habs jetzt zwar noch nicht ausprobiert weil ich skaten war und jetzt tennis geh aber hab gerade gedacht dass ich eiegntlich nicht etwas mit einer sprache coden will von der ich noch gar keine ahnung habe! und das ist bei JS so
das mit dem mouseout und so bei JS geht doch mit CSS auch
den code weiß ich glaube ich eh weil schon öfters solche threads über das gab

also es wird sicher noch probleme geben . ich melde mich dann einfach

hm ja muss alles zuerst probieren so kann ich nichts sagen
muss noch zuerst das design fertig stellen und danach mit dem coden anfangen
mich interessierte erstmal ob das überhaupt möglich ist

ich hoffe wenn ich dann soweit bin kann ich mich bei problemen an dich wenden

hrhr vlt. schaff ichs eh allein
aber wenn nicht dann sind hier genug leute die mir helfen können

danke<!

http://www.php.de/ftopic38451.html

hm da wirds ein wenig anders erklärt
ich glaub der unterschied liegt nur daran das ers nur mit CSS macht und ganz ohne JS