Wie kann eine BPMN 2.0 Map mit CSS Image Map Generator als Image-Map erzeugt werden?

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>

Schreibe einen Kommentar

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert.