Um eine responsive Image-map in HTML zu erstellen braucht man ein Plugin für JQuery. Dieses Plugin wurde von Matt Stow geschrieben und ist auf Github verfügbar. Eine Live-Demo kann auf *Link* angesehen werden. Dort befindet sich auch der Link zum Github-repository.
Die Implementierung ist super einfach und benötigt keine allzu großen HTML bzw. JQuery Kenntnisse. Um das Bild im <img> tag responsive zu gestalten reichen schon folgenden Zeilen in der CSS Datei bzw. im <style> tag:
img {
width: auto;
max-width: 100%;
}
Dann braucht man noch eine Bilddatei, worauf die Links angeklickt werden sollen (Die originale Größe muss in <width> und <height> angegeben werden, wird aber im CSS geupdated.) :
<img src=“BILD-QUELLE“ alt=““width=“1920px“ height=“1080px“ usemap=“#Map“ />
Weiterhin braucht man eine <map>, in der die Koordinaten in Originalgröße angegeben werden müssen:
<map name=“Map“ id=“Map“>
<area alt=““ title=““ href=“LINK“ shape=“rect“ coords=“391,253,530,398″ />
<area alt=““ title=““ href=“LINK“ shape=“rect“ coords=“697,304,835,469″ />
</map>
Als letztes muss nur noch JQuery und das ResponsiveImageMaps-Plugin am Ende des <body> Tags eingebunden und aktiviert werden (Die Dateien aus dem Github Archiv müssen natürlich im Verzeichnis der HTML-Datei liegen) :
<script src=“http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js“></script> <!– Bindet JQuery ein –>
<script src=“jquery.rwdImageMaps.min.js“></script>
<script> <Bindet das rwdImageMaps-Plugin ein –>
$(document).ready(function(e) {
$(‚img[usemap]‘).rwdImageMaps();
});
</script>
Das wars auch schon, Das Plugin berechnet die Koordinaten immer so, dass die Links immer auf dem korrekten Punkt liegen.