Frage Mehrere Links auf Image mit Hovereffekt

[peter83]

Hallo,

ich habe ein Foto auf welchem in verschiedenen Bereichen "Schlagwörter" stehen. (Anordnung nach keinem bestimmten Schema). Diese Schlagwörter sollen Links mit einem "hover-effekt" sein.
Könnte mir jemand bitte einen Tipp geben, wie ich das am Besten realisieren könnte ? Schlagwörter nebeneinander und/oder untereinander zu positionieren wäre jetzt nicht das Problem. Viel interessanter ist es, daß sie auf dem Foto mehr oder weniger verstreut sein sollten.
Weitere Frage wäre dann auch gleich...ist dies mit CSS am Leichtesten zu lösen, oder mache ich es mir grad zu kompliziert ?
Vielen Dank für die Hilfe.

VG,
Peter

 

[LeCub]

Das ist meiner Meinung nach mit einem Div zu lösen, dem du per CSS ein Bild als hintergrund gibst und anschließend die a- Tags in dem Div verteilst. Positionieren kannst du diese dann mit margin.

 

[SpiceLab]

Wie wäre es mit einer verweis-sensitiven Grafik?

http://www.cssplay.co.uk/menu/cssplay-imagemap-hover-v2.html lässt sich dahingehend modifizieren, damit die Schlagwörter an unterschiedlichen Positionen erscheinen.

Die einmalig festgelegte Position:

.backer:after { ... left:280px; top:50px; ... }

wird dort entfernt und im weiteren Verlauf des Stylesheets an dieser Stelle differenziert:

area:nth-of-type(1):hover ~ span:after {left:280px; top:50px; content:"...";}
area:nth-of-type(2):hover ~ span:after {right:280px; bottom:50px; content:"...";}
area:nth-of-type(3):hover ~ span:after {left:10px; bottom:90px; content:"...";}
/* usw. */