Mouseover

Computer: Software & Programmierung HTML & CSS
#1

Hallo Xperten,

folgendes möchte ich in einer Html-Seite bewerkstelligen:

Eine blaue Schaltfläche, grafisch, am liebsten ein gestrecktes 1x1-Pixel-GIF soll sich beim Mouseover in eine gelbe Schaltfläche verändern. Bis dahin eigentlich noch kein Problem (hab ich mit einem jScript schon gelöst). Jetzt kommt´s aber:

Die Schaltfläche soll natürlich auch beschriftet sein. Lege ich aber ein mit dem Text über die Schaltfläche, funktioniert das Mouseover nicht mehr, weil ja der div-Layer drüberliegt.

Wer hat hierzu eine gute Idee? Vorweg: Ich kann keine serverseitigen Scripte einsetzen.

Gruß und 1000-Dank
(Woly)

#2

Wer hat hierzu eine gute Idee? Vorweg: Ich kann keine
serverseitigen Scripte einsetzen.

Eine Idee (ob sie gut ist sei mal dahingestellt):

Den Text gleich ins Gif einbauen.

Gruss
Patrick

#3

leider nein…
Den Text gleich ins Gif einbauen.

Genau das wollte ich eben nicht machen, weil ich dann für jede Schaltfläche umständlich zwei Grafiken erstellen muß. Außerdem ist die Downloadzeit dann sehr hoch, weil ich viele Schaltflächen auf der Seite platzieren möchte.

Weitere Ideen?

(Woly)

#4

Hallo,

Die Schaltfläche soll natürlich auch beschriftet sein. Lege
ich aber ein mit dem Text über die Schaltfläche,
funktioniert das Mouseover nicht mehr, weil ja der div-Layer
drüberliegt.

Wer hat hierzu eine gute Idee? Vorweg: Ich kann keine
serverseitigen Scripte einsetzen.

kein Problem.
Du legst also ein 1*1 gif in eine Seite.
Dann legst Du ein div darueber und in dem div ist ein (Text-)Link.
In dem Link sollte dann ein Stueck Javascript auftauchen, dass das Bild austauscht.

Schau Dir mal das Script im http://sefhtml.teamone.de bei Javascript - Anwendungsbeispiele an.
Das laesst sich hervorrangend so anpassen, dass nicht der Button, in dem der Aufruf steht, sondern auch ein beliebiges anderes Bild ausgetauscht werden. Und statt eines Buttons laesst sich auch ein TextLink nehmen - das ist voellig egal, weil der JS-Aufruf im Link steht und nicht im Bild.

HTH
Greetinx
Christian

http://www.html-workshop.de

#5

that’s it…!
Perfekter Tipp… 1000-Dank! Dafür gibt´s auch ein *

Gruß
(Woly)