{"id":3371,"date":"2014-05-25T07:24:40","date_gmt":"2014-05-25T05:24:40","guid":{"rendered":"http:\/\/blog.wenzlaff.de\/?p=3371"},"modified":"2021-11-22T17:15:24","modified_gmt":"2021-11-22T16:15:24","slug":"wie-kann-eine-bpmn-2-0-map-mit-css-image-map-generator-als-image-map-erzeugt-werden","status":"publish","type":"post","link":"http:\/\/blog.wenzlaff.de\/?p=3371","title":{"rendered":"Wie kann eine BPMN 2.0 Map mit CSS Image Map Generator als Image-Map erzeugt werden?"},"content":{"rendered":"<p>Gestern hatte ich in <a href=\"http:\/\/blog.wenzlaff.de\/?p=3340\" title=\"blog\" target=\"_blank\" rel=\"noopener noreferrer\">diesem<\/a> Blogeintrag von einer BPMN Imagemap berichtet. Habe jetzt im Internet einen coolen kostenlosen <a href=\"http:\/\/web.archive.org\/web\/20140805050712\/http:\/\/webpresencepartners.com\/tools\/css-image-map-generator\/\" title=\"generator\" target=\"_blank\" rel=\"noopener noreferrer\">CSS Generator<\/a> gefunden, der das gleiche macht, nur mit CSS. Hier ein Beispiel:<!--more--><\/p>\n<style type=\"text\/css\">\n\t.map_image { display: block; width: 800px; height: 438px; position: relative; background-position: 0 0; background-repeat: no-repeat; }\n\t.map_image .map_link { display: block; position: absolute; text-indent: -999em; overflow: hidden; }\n\t.map_image #map_link_0 { width: 150px; height: 80px; top: 187.00003051757812px; left: 96px; }\n\t.map_image #map_link_1 { width: 111px; height: 77px; top: 38px; left: 373px; }\n\t.map_image #map_link_3 { width: 105px; height: 71px; top: 129px; left: 374px; }\n\t.map_image #map_link_4 { width: 102px; height: 76px; top: 212.00003051757812px; left: 375px; }\n\t.map_image #map_link_5 { width: 102px; height: 83px; top: 299.0000305175781px; left: 376px; }\n\t.map_image #map_link_6 { width: 81px; height: 56px; top: 200.00003051757812px; left: 578px; }\n<\/style>\n<div class=\"map_image\" style=\"background-image: url('http:\/\/blog.wenzlaff.de\/wp-content\/uploads\/2014\/05\/wenzlaff-de-menuefarbe.png');\">\n\t<a class=\"map_link\" id=\"map_link_0\" title=\"wenzlaff.de\" href=\"http:\/\/wenzlaff.de\/\">wenzlaff.de<\/a><\/p>\n<p>\t<a class=\"map_link\" id=\"map_link_1\" title=\"wenzlaff.info\" href=\"http:\/\/www.wenzlaff.info\">wenzlaff.info<\/a><\/p>\n<p>\t<a class=\"map_link\" id=\"map_link_3\" title=\"kleinhirn.eu\" href=\"http:\/\/kleinhirn.eu\/\">keinhirn.eu<\/a><\/p>\n<p>\tMindmaps<\/p>\n<p>\tReisen<\/p>\n<p>      <a class=\"map_link\" id=\"map_link_6\" title=\"BPMN\" href=\"http:\/\/blog.wenzlaff.de\/?cat=1430\">BPMN<\/a>\n<\/div>\n<p>Dies ist der generierte Code:<br \/>\n<!--more--><br \/>\n<code><br \/>\n&lt;style type=&quot;text\/css&quot;&gt;<br \/>\n\t.map_image { display: block; width: 800px; height: 438px; position: relative; background-position: 0 0; background-repeat: no-repeat; }<br \/>\n\t.map_image .map_link { display: block; position: absolute; text-indent: -999em; overflow: hidden; }<br \/>\n\t.map_image #map_link_0 { width: 150px; height: 80px; top: 187.00003051757812px; left: 96px; }<br \/>\n\t.map_image #map_link_1 { width: 111px; height: 77px; top: 38px; left: 373px; }<br \/>\n\t.map_image #map_link_3 { width: 105px; height: 71px; top: 129px; left: 374px; }<br \/>\n\t.map_image #map_link_4 { width: 102px; height: 76px; top: 212.00003051757812px; left: 375px; }<br \/>\n\t.map_image #map_link_5 { width: 102px; height: 83px; top: 299.0000305175781px; left: 376px; }<br \/>\n\t.map_image #map_link_6 { width: 81px; height: 56px; top: 200.00003051757812px; left: 578px; }<br \/>\n&lt;\/style&gt;<\/p>\n<p>&lt;div class=&quot;map_image&quot; style=&quot;background-image: url(&apos;http:\/\/blog.wenzlaff.de\/wp-content\/uploads\/2014\/05\/wenzlaff-de-menuefarbe.png&apos;);&quot;&gt;<br \/>\n\t&lt;a class=&quot;map_link&quot; id=&quot;map_link_0&quot; title=&quot;wenzlaff.de&quot; href=&quot;http:\/\/www.wenzlaff.de&quot;&gt;wenzlaff.de&lt;\/a&gt;<\/p>\n<p>\t&lt;a class=&quot;map_link&quot; id=&quot;map_link_1&quot; title=&quot;wenzlaff.info&quot; href=&quot;http:\/\/www.wenzlaff.info&quot;&gt;wenzlaff.info&lt;\/a&gt;<\/p>\n<p>\t&lt;a class=&quot;map_link&quot; id=&quot;map_link_3&quot; title=&quot;kleinhirn.eu&quot; href=&quot;http:\/\/www.kleinhirn.eu&quot;&gt;keinhirn.eu&lt;\/a&gt;<\/p>\n<p>\t&lt;a class=&quot;map_link&quot; id=&quot;map_link_4&quot; title=&quot;Mindmap&quot; href=&quot;http:\/\/www.wenzlaff.de\/mindmaps.html&quot;&gt;Mindmaps&lt;\/a&gt;<\/p>\n<p>\t&lt;a class=&quot;map_link&quot; id=&quot;map_link_5&quot; title=&quot;Reisen&quot; href=&quot;http:\/\/www.wenzlaff.de\/reise.html&quot;&gt;Reisen&lt;\/a&gt;<\/p>\n<p>      &lt;a class=&quot;map_link&quot; id=&quot;map_link_6&quot; title=&quot;BPMN&quot; href=&quot;http:\/\/blog.wenzlaff.de\/?cat=1430&quot;&gt;BPMN&lt;\/a&gt;<br \/>\n&lt;\/div&gt;<\/code><\/p>\n","protected":false},"excerpt":{"rendered":"<p>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:<\/p>\n","protected":false},"author":2,"featured_media":0,"comment_status":"closed","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[1430,1204,79],"tags":[1485,1487,1486,1483,279,1287],"class_list":["post-3371","post","type-post","status-publish","format-standard","hentry","category-bpmn","category-internet-2","category-programmierung","tag-css","tag-css-generator","tag-generator","tag-image-map","tag-map","tag-menue"],"_links":{"self":[{"href":"http:\/\/blog.wenzlaff.de\/index.php?rest_route=\/wp\/v2\/posts\/3371","targetHints":{"allow":["GET"]}}],"collection":[{"href":"http:\/\/blog.wenzlaff.de\/index.php?rest_route=\/wp\/v2\/posts"}],"about":[{"href":"http:\/\/blog.wenzlaff.de\/index.php?rest_route=\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"http:\/\/blog.wenzlaff.de\/index.php?rest_route=\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"http:\/\/blog.wenzlaff.de\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=3371"}],"version-history":[{"count":0,"href":"http:\/\/blog.wenzlaff.de\/index.php?rest_route=\/wp\/v2\/posts\/3371\/revisions"}],"wp:attachment":[{"href":"http:\/\/blog.wenzlaff.de\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=3371"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"http:\/\/blog.wenzlaff.de\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=3371"},{"taxonomy":"post_tag","embeddable":true,"href":"http:\/\/blog.wenzlaff.de\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=3371"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}