transparentes GIF bei Hover über eigentliche Grafik legen

[natket]

Hallo,

ich hab folgendes Problem und ich hoffe, dass mir jemand helfen kann:
ich habe auf einer Website viele verschiedene Grafiken als Links (alle Grafiken haben unterschiedliche Motive aber die gleichen Maße).
Nun hätte ich gerne, dass bei Hover sich immer die gleiche transparente Grafik über die jeweils mit der Maus darübergefahrene Maus Grafik legt, sodass sie z.Bsp. rot eingefärbt wird.
In HTML habe ich das Ganze für jeden Link so aufgebaut:

<a href="images/inhalt.pdf" target="_blank">
<img class="ref-links" src="images/link1.gif">
</a>

Ist das irgendwie möglich? Es gibt in CSS doch nur die möglichkeit bei a:hover ein background-image einzubauen, dass dann aber hinter meiner eigentlichen Grafik platziert wird, oder?

Vielen Dank im Voraus!
natket

[marc22]

Das ist, wenn überhaupt, nur ganz eklig und auch nicht besonders zuverlässig mit JS möglich.

Du könntest per Javascript ein a-element mit dem eigentlichen Linkerzeugen, dass transparent ist und die gewünschte Farbe hat. Das ziehst Du auf dieselbe Größe wie das Bild auf, positionierst es absolut und legst es über das Bild.
Allerdings kann es Browserabhängig passieren, dass die Position nicht stimmt, o.ä.. Da wäre es beinahe schon einfacher, von jedem Bild eine Rollover-Variante zu machen und diese bei hover auszutauschen..

[natket]

Vielen Dank für die schnelle Antwort!

Ich habs heute Mittag dann mal mit der Hover-Variante versucht und für jedes GIF ein Rollover erstellt.
Das war ziemlicher Zeitaufwand, aber ansonsten gings!

Wenn die andere Variante so unsicher ist, dann lass ich es jetzt lieber so!
Vielen Dank nochmal.

VG
natket