Erstellen anklickbare Bereiche auf einem png von Seen ohne die Verwendung von <map>

Question

Ich habe mein Gehirn über die folgenden worden Abstich, ich werde versuchen, so spezifisch sein, wie ich kann:

Ich habe ein einziges Bild bekam von 5 Seen als Element auf einer Website, die ich entworfen habe. Ich möchte jeden einzelnen See anklickbar machen, so dass ich Lightbox nutzen kann, um Karten von jedem See aufzudecken.

Hier ist der Haken - ich würde Karten-Tags verwenden, um dies zu sortieren, aber ich würde absolute Höhe und Breite definieren müssen, um Koordinaten für die Bereiche bereitzustellen; die ich nicht definiert habe, damit meine Seite auf mobilen Geräten richtig skaliert wird oder wenn die Größe von Fenstern geändert wird.

was ist der effektivste Weg, dies zu erreichen?

Ich habe ein Bild von den Seen beigefügt. Die URL für die Website ist: http://pfowp.lowertownish.com/

5 lakes each need to be clickable

Wenn es um den Code zu sehen hilft, hier ist es:

<div id="select" style="font-size:20px; text-align:center; display:block;"> 
    <h2 class="lakesHead">Choose Your Get-A-Way!</h2><hr> 
    <img class="landscape" src="/img/theLakes.png" /> 
    <a href="/reservations/"><button style="text-shadow:0 0 10px white; padding: 20px 35px; color:#264368; font-weight:900; margin: 25px auto 40px; display:block;" class="btn btn-warning shadowMedium"> BOOK YOUR TRIP NOW </button></a> 
    <p id="foodList" style="margin-top:20px"><em>Our remote Canadian lakes offer some of the finest Canadian walleye and trophy northern fishing anywhere. The famous Ogoki and Albany River system have many rapids and pools, which result in excellent spawning and reproduction. As a result the fishing is consistent in its high quality...spring, summer or fall. This water system is not only home to trophy fish but numbers of fish caught during your fishing trip to Canada.</em></p> 
</div> 

Jede Hilfe würde geschätzt, oder sogar ein Punkt in der richtigen Richtung . Vielen Dank.

Answer 1

Dies ist ein schneller Weg, wenn Sie nicht <map> verwenden möchten.

Platzieren Sie das Bild als Hintergrund von div mit background-size:cover;.

Wenn Sie die lakes image in 9 Quadrat div Elemente aufgeteilt und binden ein Click-Ereignis auf jeder mit eindeutigen IDs können Sie auch das Seitenverhältnis Sie in mobilen Geräten wollen bewahren

• See 1 links oben
• 2 See ist oben in der Mitte
• See 3 ist oben rechts
• See 4 ist Mitte links
• kein See in Mittelzentrum
• See ist Mitte rechts
• See 6 ist unten links
• See 6 unten in der Mitte ist See 5 unten rechts ist