Frage von Fischwaage, 28

Ein Bild mit mehreren Link in verschiedenen Bereichen?

Hallo, Ich würde gerne ein einzelnes Bild mit mehreren Links austatten!

Also simples Beispiel: Ein Bild von einem Skateboard und je nachdem welchen Bereich man mit der Maus berührt (Rollen, Auflage etc.) kommt ein unterschiedlicher Link!

Ich habe Grundkentnisse in Photoshop, InDesign und kann ein bisschen HTML bzw. kenne mich halt mit Internetseiten und so Sachen wie Joomla aus.

Wie kriege ich meine Idee umgesetzt?

Danke für eure Hilfe

Hilfreichste Antwort - ausgezeichnet vom Fragesteller
von FaTech, 19

Teile das Bild einfach in mehreren hätten und verlinke die einzelnen Bilder ordentlich nebeneinander. Jedes Bild kann dann einen anderen Link bekommen

Antwort
von Limearts, 23

Das funktioniert mit einer Imagemap https://wiki.selfhtml.org/wiki/HTML/Multimedia_und_Grafiken/verweissensitive_Gra... über diese werden anhand von Knotenpunkten Bereiche definiert, die innerhalb der Grafik gesonderte Aufmerksamkeit besitzen.

Darüber hinaus gibt es im Web einige Imagemap-Generatoren, mit denen die Anpassung der Bereiche etwas flotter von der Hand geht.

Kommentar von GanMar ,

Selfhtml - schön, daß das noch jemand kennt :)

Antwort
von MonkeyKing, 17

Die klassische Herangehensweise wäre eine sogenannte Image Map. Damit kann man rechteckige Bereiche aber auch unregelmäßig geformte Bereiche verlinken. Eine Image Map Generator hilft die dabei:

http://imagemap-generator.dariodomi.de/

Wenn du nur rechteckige Bereiche hast, kannst du auch normale Links erstellen und dann per CSS absolut positionieren. Hier ein Beispiel:

https://jsfiddle.net/e5ymbszs/

Den roten Rand habe ich nur gemacht um die Links deutlicher hervorzuheben.

Kommentar von Fischwaage ,

Wow, das kommt meiner Idee schon sehr nah!
Wäre es noch irgendwie möglich MouseOvers einzublenden sobald die Maus einen Bereich berührt hat? Also das erst dann dieser Rote Rand auftaucht mit einem Text? Ich sehe also nur das Bild - gehe mit der Maus dann auf z.B. die Rollen vom Skateboard dann erscheint eine Box mit Text "Rollen" und ich kanns halt anklicken und werde zu index/rollen.html weitergeleitet?

Kommentar von MonkeyKing ,

Ich hab das mal aktualisiert. Jetzt taucht der rote Rand erst auf wenn man mit der Maus drüber ist. Wenn du deinem <a> Tag dann noch ein "title" attribute hinzufügst, stellt der Browser automatisch einen hove Text dar, allerdings mit einer gewissen Verzögerung. Oder du machst das so dass dann der Link Text wieder erscheint. Wenn es noch fancier sein soll kommst du wohl nicht an Javascript bzw. irgendeinem jQuery Plugin vorbei. Oder du zerlegst das Bild in mehrere Quadrate und tauscht das Bild bei hove aus.. Es gibt viele Möglichkeiten.

Keine passende Antwort gefunden?

Fragen Sie die Community