Buttons: Hover-Funktion hinzufügen

[petergriffin]

Hallo,

momentan sind alle Buttons (Produktdetail, In den Warenkrob, Kasse, usw.) ja einfache Bilddateien.

Wie bekomme ich es hin, dass diese beim drüberfahren mit dem Mauszeiger eine andere Hintergrundfarbe erhalten?
Gibt es dafür eine einfache Lösung? Die Suchfunktion hat mir zwar vieles ausgespuckt, die Topics waren aber teilweise recht alt und es waren scheinbar immer irgendwelche Module nötig.

Gibt es dafür inzwischen eine einfache Lösung?

Danke

Linkback: https://www.modified-shop.org/forum/index.php?topic=18187.0

[peterpan19]

Soweit ich weiss leider nein, alle Buttons müssten neu mittels ccs gestaltet und eingebunden werden. Im Forum gibt es aber ein paar Ansätze dazu. Suche mal nach "css Buttons", oder hier z.B. ein Modul: http://www.modified-shop.org/forum/index.php?topic=9759.0
Gruß

[cannewitz]

Hallo peterpan19.
Wenn Du den Code für die eingebundenen verlinkten Grafiken hast, so nur Anpassen. Da ich aber Dein Templates nicht kenne (wie die Navi geschrieben wurde) ist das so eine Sache. Eigentlich kann dies auch per CSS geregelt werden.
Beispiel:

Code: PHP  [Auswählen]

<a href="#" onMouseOver="eink.src='bild-2.jpg';" onMouseOut="eink.src='bild-1.jpg';">
<img name="eink" src="Bild-1.gif" border="0" width="71" height="40" alt=""></a>

Ich hoffe alles mal so richtig geschrieben zu haben (-; Gruß.

[noRiddle (revilonetz)]

Hi petergriffin.

Es kommt darauf an was du genau machen möchtest.
Eine Hintergrundfarbe im Sinne von CSS haben die Buttons ja normalerweise nicht.

Man könnte z.B. mit box-shadow (CSS3) einen Schatten hervorrufen, den man bei hover wieder entfernt,
oder umgekehrt.
Das ginge allein über CSS.

Ansonsten müsstest du genauer sagen was du an Effekt hervorrufen möchtest.
Manche Button sind halt reine img -tags und andere sind input type="image",
da gibt es keine generelle Lösung.

Sag mal was du genau willst.

Gruß,
noRiddle

[Barnabas]

Gibt es dafür inzwischen eine einfache Lösung?

Mit dem Warenkorb-Button gestaltet es sich ein bisschen schwieriger! Ansonsten hier mal schauen! 

http://tinyurl.com/82pt2su

Gruß Barnabas

[jaspa]

Buttongrafik ( reiner Text/Beschriftung) als Transparentes png anlegen, Background (Verlauf/Grafik) via CSS als Sprite (Pseudoklasse Hover)einbinden, oder Farbe/Hintergrund über CSS 3 lösen.

[petergriffin]

Hallo,

Sag mal was du genau willst.

Alle Buttons (Produktdetails ansehen, In den Warenkorb, Kasse, usw. - Nicht die Menünavigation) sind ja aktuell einfache IMG-Dateien. Wenn ich mit der Maus drüber gehe ändert sich optisch nichts.

Ich möchte einfach, dass der Button, wenn ich mit der Maus drüber fahre, eine andere (Hintergrund)Farbe bekommt. (Der Text in dem Button darf unverändert bleiben.)

Also einfach ein optischer Reiz ...

[noRiddle (revilonetz)]

Ja, da hast du ja dann genug Vorschläge bekommen.
Das Problem ist halt, daß nicht alle Buttons gleich generiert werden.
Es gibt

Code: XML  [Auswählen]

<a href="#"><img src="" alt="" /></a>

und es gibt

Code: XML  [Auswählen]

<input type="image" alt="" title="" />

Die beiden Typen kann man nicht so ohne weiteres gleich behandeln.

Wenn du kein Javaycript benutzen möchtest und die Pseudoklasse "hover" in CSS benutzen möchtest, wirst du nicht umhin kommen neue Buttons zu erstellen.
Die Buttons bei hover auszutauschen dürfte viel zu aufwändig werden, denn du müsstest ja dann für jeden Button zwei Varianten vorhalten.
Also bleibt background in CSS oder box-shadow.

Für background-Änderungen müsstest du in der Tat, wie bereits gesagt worden, transparente images nehmen (gif oder, wenn mit Verlauf evtl. png).
Diesen Bildern müsstest du dann einen background geben welcher sich auf hover ändert.

Um alle Button anzusprechen muß man sich ein wenig verrenken, da sie ja nicht alle eine ID, oder eine Klasse haben.
Es wird also einige Arbeit fällig, um (mit Hilfe von Firebug ?) herauszufinden wie man die Buttons in CSS alle erfasst.
Die input -Button z.B. so:

Code: CSS  [Auswählen]

input [type="image"] {some css styles;}

Für die anderen schaust du ins XHTML und mußt halt suchen wie du sie ansprechen kannst.
Um da genaueres zu sagen, müsste man dein Template kennen.

Wenn es dir lediglich um einen Effekt beim Hovern geht, ist wohl vielleicht box-shadow die erste Wahl.
Damit schließt man allerdings gewisse Browser der Firma "Miniweich" aus.

Wenn du einen Link hättest, könnte man mehr helfen....

Gruß,
noRiddle