Gestern hatte ich in diesem Blogeintrag von einer BPMN Imagemap berichtet. Habe jetzt im Internet einen coolen kostenlosen CSS Generator gefunden, der das gleiche macht, nur mit CSS. Hier ein Beispiel:
Dies ist der generierte Code:
<style type="text/css">
.map_image { display: block; width: 800px; height: 438px; position: relative; background-position: 0 0; background-repeat: no-repeat; }
.map_image .map_link { display: block; position: absolute; text-indent: -999em; overflow: hidden; }
.map_image #map_link_0 { width: 150px; height: 80px; top: 187.00003051757812px; left: 96px; }
.map_image #map_link_1 { width: 111px; height: 77px; top: 38px; left: 373px; }
.map_image #map_link_3 { width: 105px; height: 71px; top: 129px; left: 374px; }
.map_image #map_link_4 { width: 102px; height: 76px; top: 212.00003051757812px; left: 375px; }
.map_image #map_link_5 { width: 102px; height: 83px; top: 299.0000305175781px; left: 376px; }
.map_image #map_link_6 { width: 81px; height: 56px; top: 200.00003051757812px; left: 578px; }
</style>
<div class="map_image" style="background-image: url('http://blog.wenzlaff.de/wp-content/uploads/2014/05/wenzlaff-de-menuefarbe.png');">
<a class="map_link" id="map_link_0" title="wenzlaff.de" href="http://www.wenzlaff.de">wenzlaff.de</a>
<a class="map_link" id="map_link_1" title="wenzlaff.info" href="http://www.wenzlaff.info">wenzlaff.info</a>
<a class="map_link" id="map_link_3" title="kleinhirn.eu" href="http://www.kleinhirn.eu">keinhirn.eu</a>
<a class="map_link" id="map_link_4" title="Mindmap" href="http://www.wenzlaff.de/mindmaps.html">Mindmaps</a>
<a class="map_link" id="map_link_5" title="Reisen" href="http://www.wenzlaff.de/reise.html">Reisen</a>
<a class="map_link" id="map_link_6" title="BPMN" href="http://blog.wenzlaff.de/?cat=1430">BPMN</a>
</div>