{"id":3340,"date":"2014-05-22T21:39:39","date_gmt":"2014-05-22T19:39:39","guid":{"rendered":"http:\/\/blog.wenzlaff.de\/?p=3340"},"modified":"2023-01-30T19:22:15","modified_gmt":"2023-01-30T18:22:15","slug":"klickbare-bpmn-2-0-image-map-als-menue-navigation","status":"publish","type":"post","link":"http:\/\/blog.wenzlaff.de\/?p=3340","title":{"rendered":"Wie werden klickbare BPMN 2.0 Image-Map als Men\u00fc-Navigation erstellt?"},"content":{"rendered":"

Wollte mal eine Image-Map mit einem BPMN 2.0 Prozessmodell erstellen.
\nKlick auf die User-Task<\/strong> f\u00fchrt direkt zu den Zielen.
\n\"\"<\/p>\n\n\"wenzlaff.info\"\n\"kleinhirn.eu\"\n\"Mindmaps\"\n\"Reisen\"\n\"wenzlaff.de\"\n<\/map>\n

\u00c4hnlich zu der klickbaren Mindmap. <\/p>\n

So kann HTML einfach f\u00fcr notwendige BPMN 2.0 Doku. verwendet werden. Ohne kostenpflichtige Tools.<\/p>\n

Gel\u00f6st wird das einfach mit HTML<\/strong>, eine gute Anleitung gibt es auf Selfhtml.org unter dem Punkt „Verweis-sensitive Grafiken<\/em>“ (Image Maps).<\/p>\n

Welche ist besser? Was fehlt?<\/p>\n

Hier der HTML Code f\u00fcr das obige Beispiel und die BPMN 2.0 zum download als ZIP Archive (wenzlaff-de-menue.bpmn<\/a>).<\/p>\n

<img id="menue-tw" src="http:\/\/blog.wenzlaff.de\/wp-content\/uploads\/2014\/05\/wenzlaff-de-menue.png" border="0" width="685" height="425" orgWidth="685" orgHeight="425" usemap="#image-maps-2014-05-22" alt="" \/><\/p>\n

<map name="image-maps-2014-05-22" id="image-maps-2014-05-22">
\n<area id="1" alt="wenzlaff.info" title="wenzlaff.info" href="http:\/\/www.wenzlaff.info" shape="rect" coords="284,36,340,82" style="outline:none;" target="_self" \/>
\n<area id="2" alt="kleinhirn.eu" title="kleinhirn.eu" href="http:\/\/www.kleinhirn.eu" shape="rect" coords="287,89,343,130" style="outline:none;" target="_self" \/>
\n<area id="3" alt="Mindmaps" title="Mindmaps" href="http:\/\/www.wenzlaff.de\/mindmaps.html" shape="rect" coords="281,142,350,181" style="outline:none;" target="_self" \/>
\n<area id="4" alt="Reisen" title="Reisen" href="http:\/\/www.wenzlaff.de\/reise.html" shape="rect" coords="281,190,350,240" style="outline:none;" target="_self" \/>
\n<area id="10" alt="wenzlaff.de" title="wenzlaff.de" href="http:\/\/www.wenzlaff.de" shape="rect" coords="126,126,190,175" style="outline:none;" target="_self" \/>
\n<\/map><\/code><\/p>\n","protected":false},"excerpt":{"rendered":"

Wollte mal eine Image-Map mit einem BPMN 2.0 Prozessmodell erstellen. Klick auf die User-Task f\u00fchrt direkt zu den Zielen. \u00c4hnlich zu der klickbaren Mindmap. So kann HTML einfach f\u00fcr notwendige BPMN 2.0 Doku. verwendet werden. Ohne kostenpflichtige Tools. Gel\u00f6st wird das einfach mit HTML, eine gute Anleitung gibt es auf Selfhtml.org unter dem Punkt „Verweis-sensitive … <\/p>\n

\u201eWie werden klickbare BPMN 2.0 Image-Map als Men\u00fc-Navigation erstellt?\u201c <\/span>weiterlesen<\/a><\/p>\n","protected":false},"author":2,"featured_media":0,"comment_status":"closed","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[1430,217],"tags":[2194,1479,1483,1480,1484,1287,1481,1482],"class_list":["post-3340","post","type-post","status-publish","format-standard","hentry","category-bpmn","category-mind-map","tag-bpmn","tag-bpmn-2-0-image-map","tag-image-map","tag-klickbar","tag-maps","tag-menue","tag-selfhtml","tag-sensitive-grfiken"],"_links":{"self":[{"href":"http:\/\/blog.wenzlaff.de\/index.php?rest_route=\/wp\/v2\/posts\/3340","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=3340"}],"version-history":[{"count":0,"href":"http:\/\/blog.wenzlaff.de\/index.php?rest_route=\/wp\/v2\/posts\/3340\/revisions"}],"wp:attachment":[{"href":"http:\/\/blog.wenzlaff.de\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=3340"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"http:\/\/blog.wenzlaff.de\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=3340"},{"taxonomy":"post_tag","embeddable":true,"href":"http:\/\/blog.wenzlaff.de\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=3340"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}