Ich habe eine Frage bezüglich Maps. Ich möchte gerne, wenn man in einem Bild über einen bestimmten Bereich mit der Maus fährt, diesen Bereich clickable machen, und zu einer anderen Seite verweisen. Mit und den entsprechenden Cords hab ich das auch geschafft. Nun möchte ich aber, dass an einer bestimmten Stelle mehrere Links im Hintergrund sind, sodass man auswählen muss, auf welchen Link man gehen will. Also evtl etwas ähnliches wie ein Dropdown oder Popup, aber wie binde ich das in das IMG an die bestimmte cords rein?
Wie im Bild gezeigt, sollte man, sobald man über die gelbe Fläche fährt, z.B die Möglichkeit haben, auf www.youtube.com oder auf www.google.de zu gehen.
bevor du weiter Zeit und Energie für eine Lösung aufwendest:
Hast du dir auch Gedanken gemacht, wie die Smartphon-, Tablet- und anderen Touchscreenanwender die Links erreichen können? Immerhin bereits deutlich über 50% aller User im Internet. Einen Hoverzustand gibt es bei Touchscreens bekanntermaßen nicht.
Das Bild kommt als background-image auf ein Div, in welches per CSS ein unsichtbarer Container platziert wird, der als Click-Spot dient.
wie oben, aber statt des Container wird der klickbare Bereich per JS definiert.
Für den Click schreibt man ein Mouseevent in JavaScript. Dort lässt sich festlegen, ob z.B. ein Modal aufpoppen soll, das mehrere Links zur Auswahl anbietet.
Das würde dir wahrscheinlich kaum helfen, zumal es mit HTML hier nicht getan ist. Ich mache so etwas ohne Image-Map und simuliere den Clickspot im Bild per JavaScript. Dafür gibt es Funktionen wie offset(), pageX und pageY, um Position von Bild und Mauszeiger zu berechnen.
Vielleicht hilft dir ja der Ansatz von Sempervirum weiter. Ansonsten kannst du mich für eine Auftragsarbeit gerne per PM kontaktieren.
