Thema: Hover Effekt Bei Buttons

Hallo, ich mache zurzeit eine Website für eine Freunden, Nun habe ich die Links z.b Startseite mit Buttons Grafisch dargestellt und würde gerne einen Hover effekt einfügen, also das wenn die maus über den Button geht dort der hintergrund aufleuchtet bzw die schrift (also das ein anderes bild in dem moment gezeigt wird).

Hab schon gegooglet aber nix passendes gefunden da ich mich null mit css auskenne.

Hoffe ihr könnt mir helfen wie ich das ganze in Html / java script darstellen könnte oder eine fertige css mir liefern könnten.

Vielen Dank im Vorraus

Gibt mehrere Moeglichkeiten.. hier mal die zwei Naheliegendsten:

-In CSS eine :hover Klasse definieren und dann in dieser Klasse zB den Background veraendern, oder einen Schatten setzen oder was auch immer. Das ist wohl das Eleganteste, und auch recht einfach fuer Links.

-In dem Img oder Div in dem du den Button hast, eine "onmouseover" Funktion einfuegen, in der du dann das Bild gegen ein Anderes austauschst. Natuerlich muss dann auch eine "onmouseout" her, in der man das erste Bild wieder anzeigt.

Beispiel fuer CSS: Free CSS Navigation Menu Designs at exploding-boy.com (nicht meins, aber hat mir viel beigebracht, die Seite : p)

Beispiel fuer JS: (_tab und _tab2 jeweils dieselben Grafiken, aber mit unterschiedlichem Hintergrund)

Code:

<div id="menu" style="position:absolute; top:0; left:0;">
<img onmouseover="this.src='images/gen_tab2.png'" onmouseout="this.src='images/gen_tab.png'" src="images/gen_tab.png" />
<img onmouseover="this.src='images/adv_tab2.png'" onmouseout="this.src='images/adv_tab.png'" src="images/adv_tab.png" />
<img onmouseover="this.src='images/abt_tab2.png'" onmouseout="this.src='images/abt_tab.png'" src="images/abt_tab.png" />
</div>

Schonmal danke nur leider funktioniert das so nicht wirklich bei mir, hatte eine neue .html datei gemacht und den pfad zu den bildern angegeben

images\buttonstartseite.png - onmouseout
images\buttontesthover - onmausover

Beispiel

Code:

<div id="menu" style="position:absolute; top:0; left:0;">
<img onmouseover="this.src='images/buttontesthover.png'" onmouseout="this.src='images/buttonstartseite.png'" src="images/gen_tab.png" />

wobei ich jetzt nicht wirklich verstehe wofür

Code:

 src="images/gen_tab.png

also der letze tag sein soll.

M3PHISTO

wobei ich jetzt nicht wirklich verstehe wofür

Code:

 src="http://www.forumla.de/images/gen_tab.png

also der letze tag sein soll.

img src ist das Bild was am Anfang erscheint, ersetze "gen_tab.png" mit "buttonstartseite.png" und das sollte funktionieren.

ah danke super, es funktioniert.

Finde diese Lösung sehr einfach, hab viele möglichkeiten ausprobiert und die waren alle sehr umständlich

/edit : hmm jetzt hab ich leider nur ein problem ich brauch den button als link und weiss jetzt nicht genau wo ich "<a href" hinsetzen soll

Hmm hätte da jetzt noch ein problem, undzwar kann ich die buttons nicht verschieben mit hilfe von

Code:

 

oder

Code:

<br>

die bleiben die ganze zeit auf der selben stelle und mit

Code:

<div align="center">

bekomm ich die auch nicht in die mitte.

Entferne

Code:

style="position:absolute; top:0; left:0;"

aus dem DIV, falls du das noch da stehen hast.. das sollte das "Problem" beheben, und du kannst die Dinger selbst positionieren.

Super danke funktioniert wunderbar, jetzt hab ich nur noch ein problem (glaube ich zumindest^^)

undzwar benutzt ich ein frameset (leftframe,topframe,mainframe und index) so links (leftframe) hab ich die navigation mit den buttons als verweis hab ich benutzt

Code:

<a href="beispiel.html" target="mainframe" (damit es in der mitte angezeigt wird)<img balblabla></a>

So der mittlere frame den habe ich auch als mainframe bezeichnet nur wenn ich auf den link klicke öffnet er es immer wieder in der Linken Seite.

ich habs mal hochgeladen damit du vielleicht besser verstehst was ich meine
Unbenanntes Dokument

Hm, kenne mich nicht sehr gut mit Frames aus.. aber.. uh.. ich denke du hast nur einen Tippfehler. "mainframe" sollte "mainFrame" sein.. oder halt umgekehrt ; )

ja das dachte ich auch zuerst aber das ist schon so richtig, naja was solls dann muss ich auf ne antwort warten aber dank dir

/edit : ok das mit den frames hat sich erledigt, hab erfahren das die seite dann so nicht in google erscheint und muss mir jetzt ne andere lösung suchen

Code:

<a href="index.html target="mainframe">
                   ^

Da fehlt uebrigens noch einmal ein --> " <-- : p

Edit: So funktionierts dann auch, wie gesagt nur Tippfehler.. Richtig:

Code:

<a href="index.html" target="mainFrame">

So: Unbenanntes Dokument

ah okay danke, nur hab ebend von nem kumpel erfahren das google die frame seiten nicht unterstützt weil dadurch so ne art endloschleife passiert wenn die robots/crawler auf der seite sind. deswegen Verweigert google frame seiten.

was wiederum heißt das ich jetzt <div> <span> etc irgendwie mir beibringen muss obwohl ich keine ahnung davon habe

M3PHISTO

ah okay danke, nur hab ebend von nem kumpel erfahren das google die frame seiten nicht unterstützt weil dadurch so ne art endloschleife passiert wenn die robots/crawler auf der seite sind. deswegen Verweigert google frame seiten.

was wiederum heißt das ich jetzt <div> <span> etc irgendwie mir beibringen muss obwohl ich keine ahnung davon habe :D

Das mit den Frames und Google halte ich fuer 'nen (lahmes) Geruecht >_<. Aber mit div's statt frames wird das eh alles schoener und dynamischer, also lass dich davon nicht abhalten ; )

joar naja, hab bisjetzt noch nicht so richtig verstanden wie ich das machen soll, und muss mir noch die ganzen tags suchen -.-. naja und weiss halt noch nicht was mit div so möglich ist