Image maps are pictures that have places on them where you can click your mouse and you will go to a specific web page. \u00a0They are sometimes used for navigation bars on websites.<\/p>\n
The clickable areas of an image map are either circles, rectangles or polygons. \u00a0The coordinates of the shapes are described in the HTML code.<\/p>\n
<\/a><\/p>\nThe code you need looks like this:<\/p>\n<img src=”planets.gif” width=”145″ height=”126″ alt=”Planets” usemap=”#planetmap”><\/p>\n<map name=”planetmap”><\/p>\n<area shape=”rect” coords=”0,0,82,126″ href=”sun.htm” alt=”Sun”><\/p>\n<area shape=”circle” coords=”90,58,3″ href=”mercur.htm” alt=”Mercury”><\/p>\n<area shape=”circle” coords=”124,58,8″ href=”venus.htm” alt=”Venus”><\/p>\n<\/map><\/p>\nImage maps are another trick that is far easier to do in web development software or some image editing software packages. \u00a0It is possible to do in HTML though and\u00a0Mobile Fish<\/a> have a nice online image map generator tool<\/a> that is easy to use.<\/p>\nThe map is available as a\u00a0Peppa Pig Map<\/a><\/p>\n<\/p>\n\n<\/p>\n\n<\n\n\n\n<\/p>\n\n<\/p>\n\n<\/p>\n\n\n<\/map>\n","protected":false},"excerpt":{"rendered":"Image maps are pictures that have places on them where you can click your mouse and you will go to a specific web page. \u00a0They are sometimes used for navigation bars on websites. The clickable areas of an image map are either circles, rectangles or polygons. \u00a0The coordinates of the shapes are described in the […]<\/p>\n","protected":false},"author":1,"featured_media":371,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[49,43,46,44],"tags":[],"class_list":["post-364","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-html","category-ms-farrells-blog","category-s5-6dmc","category-web-design"],"_links":{"self":[{"href":"https:\/\/digitalmediacomputing.org.uk\/index.php?rest_route=\/wp\/v2\/posts\/364","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/digitalmediacomputing.org.uk\/index.php?rest_route=\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/digitalmediacomputing.org.uk\/index.php?rest_route=\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/digitalmediacomputing.org.uk\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/digitalmediacomputing.org.uk\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=364"}],"version-history":[{"count":10,"href":"https:\/\/digitalmediacomputing.org.uk\/index.php?rest_route=\/wp\/v2\/posts\/364\/revisions"}],"predecessor-version":[{"id":398,"href":"https:\/\/digitalmediacomputing.org.uk\/index.php?rest_route=\/wp\/v2\/posts\/364\/revisions\/398"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/digitalmediacomputing.org.uk\/index.php?rest_route=\/wp\/v2\/media\/371"}],"wp:attachment":[{"href":"https:\/\/digitalmediacomputing.org.uk\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=364"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/digitalmediacomputing.org.uk\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=364"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/digitalmediacomputing.org.uk\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=364"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}
The code you need looks like this:<\/p>\n
<img src=”planets.gif” width=”145″ height=”126″ alt=”Planets” usemap=”#planetmap”><\/p>\n
<map name=”planetmap”><\/p>\n
<area shape=”rect” coords=”0,0,82,126″ href=”sun.htm” alt=”Sun”><\/p>\n
<area shape=”circle” coords=”90,58,3″ href=”mercur.htm” alt=”Mercury”><\/p>\n
<area shape=”circle” coords=”124,58,8″ href=”venus.htm” alt=”Venus”><\/p>\n
<\/map><\/p>\n
Image maps are another trick that is far easier to do in web development software or some image editing software packages. \u00a0It is possible to do in HTML though and\u00a0Mobile Fish<\/a> have a nice online image map generator tool<\/a> that is easy to use.<\/p>\nThe map is available as a\u00a0Peppa Pig Map<\/a><\/p>\n<\/p>\n\n<\/p>\n\n<\n\n\n\n<\/p>\n\n<\/p>\n\n<\/p>\n\n\n<\/map>\n","protected":false},"excerpt":{"rendered":"Image maps are pictures that have places on them where you can click your mouse and you will go to a specific web page. \u00a0They are sometimes used for navigation bars on websites. The clickable areas of an image map are either circles, rectangles or polygons. \u00a0The coordinates of the shapes are described in the […]<\/p>\n","protected":false},"author":1,"featured_media":371,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[49,43,46,44],"tags":[],"class_list":["post-364","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-html","category-ms-farrells-blog","category-s5-6dmc","category-web-design"],"_links":{"self":[{"href":"https:\/\/digitalmediacomputing.org.uk\/index.php?rest_route=\/wp\/v2\/posts\/364","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/digitalmediacomputing.org.uk\/index.php?rest_route=\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/digitalmediacomputing.org.uk\/index.php?rest_route=\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/digitalmediacomputing.org.uk\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/digitalmediacomputing.org.uk\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=364"}],"version-history":[{"count":10,"href":"https:\/\/digitalmediacomputing.org.uk\/index.php?rest_route=\/wp\/v2\/posts\/364\/revisions"}],"predecessor-version":[{"id":398,"href":"https:\/\/digitalmediacomputing.org.uk\/index.php?rest_route=\/wp\/v2\/posts\/364\/revisions\/398"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/digitalmediacomputing.org.uk\/index.php?rest_route=\/wp\/v2\/media\/371"}],"wp:attachment":[{"href":"https:\/\/digitalmediacomputing.org.uk\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=364"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/digitalmediacomputing.org.uk\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=364"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/digitalmediacomputing.org.uk\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=364"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}
The map is available as a\u00a0Peppa Pig Map<\/a><\/p>\n<\/p>\n\n<\/p>\n\n<\n\n\n\n<\/p>\n\n<\/p>\n\n<\/p>\n\n\n<\/map>\n","protected":false},"excerpt":{"rendered":"Image maps are pictures that have places on them where you can click your mouse and you will go to a specific web page. \u00a0They are sometimes used for navigation bars on websites. The clickable areas of an image map are either circles, rectangles or polygons. \u00a0The coordinates of the shapes are described in the […]<\/p>\n","protected":false},"author":1,"featured_media":371,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[49,43,46,44],"tags":[],"class_list":["post-364","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-html","category-ms-farrells-blog","category-s5-6dmc","category-web-design"],"_links":{"self":[{"href":"https:\/\/digitalmediacomputing.org.uk\/index.php?rest_route=\/wp\/v2\/posts\/364","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/digitalmediacomputing.org.uk\/index.php?rest_route=\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/digitalmediacomputing.org.uk\/index.php?rest_route=\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/digitalmediacomputing.org.uk\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/digitalmediacomputing.org.uk\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=364"}],"version-history":[{"count":10,"href":"https:\/\/digitalmediacomputing.org.uk\/index.php?rest_route=\/wp\/v2\/posts\/364\/revisions"}],"predecessor-version":[{"id":398,"href":"https:\/\/digitalmediacomputing.org.uk\/index.php?rest_route=\/wp\/v2\/posts\/364\/revisions\/398"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/digitalmediacomputing.org.uk\/index.php?rest_route=\/wp\/v2\/media\/371"}],"wp:attachment":[{"href":"https:\/\/digitalmediacomputing.org.uk\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=364"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/digitalmediacomputing.org.uk\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=364"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/digitalmediacomputing.org.uk\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=364"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}
<\/p>\n\n<\/p>\n\n<\n\n\n\n<\/p>\n\n<\/p>\n\n<\/p>\n\n\n<\/map>\n","protected":false},"excerpt":{"rendered":"Image maps are pictures that have places on them where you can click your mouse and you will go to a specific web page. \u00a0They are sometimes used for navigation bars on websites. The clickable areas of an image map are either circles, rectangles or polygons. \u00a0The coordinates of the shapes are described in the […]<\/p>\n","protected":false},"author":1,"featured_media":371,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[49,43,46,44],"tags":[],"class_list":["post-364","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-html","category-ms-farrells-blog","category-s5-6dmc","category-web-design"],"_links":{"self":[{"href":"https:\/\/digitalmediacomputing.org.uk\/index.php?rest_route=\/wp\/v2\/posts\/364","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/digitalmediacomputing.org.uk\/index.php?rest_route=\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/digitalmediacomputing.org.uk\/index.php?rest_route=\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/digitalmediacomputing.org.uk\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/digitalmediacomputing.org.uk\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=364"}],"version-history":[{"count":10,"href":"https:\/\/digitalmediacomputing.org.uk\/index.php?rest_route=\/wp\/v2\/posts\/364\/revisions"}],"predecessor-version":[{"id":398,"href":"https:\/\/digitalmediacomputing.org.uk\/index.php?rest_route=\/wp\/v2\/posts\/364\/revisions\/398"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/digitalmediacomputing.org.uk\/index.php?rest_route=\/wp\/v2\/media\/371"}],"wp:attachment":[{"href":"https:\/\/digitalmediacomputing.org.uk\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=364"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/digitalmediacomputing.org.uk\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=364"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/digitalmediacomputing.org.uk\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=364"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}
<\n\n\n\n
<\/p>\n\n
<\/p>\n\n\n<\/map>\n","protected":false},"excerpt":{"rendered":"
Image maps are pictures that have places on them where you can click your mouse and you will go to a specific web page. \u00a0They are sometimes used for navigation bars on websites. The clickable areas of an image map are either circles, rectangles or polygons. \u00a0The coordinates of the shapes are described in the […]<\/p>\n","protected":false},"author":1,"featured_media":371,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[49,43,46,44],"tags":[],"class_list":["post-364","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-html","category-ms-farrells-blog","category-s5-6dmc","category-web-design"],"_links":{"self":[{"href":"https:\/\/digitalmediacomputing.org.uk\/index.php?rest_route=\/wp\/v2\/posts\/364","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/digitalmediacomputing.org.uk\/index.php?rest_route=\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/digitalmediacomputing.org.uk\/index.php?rest_route=\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/digitalmediacomputing.org.uk\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/digitalmediacomputing.org.uk\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=364"}],"version-history":[{"count":10,"href":"https:\/\/digitalmediacomputing.org.uk\/index.php?rest_route=\/wp\/v2\/posts\/364\/revisions"}],"predecessor-version":[{"id":398,"href":"https:\/\/digitalmediacomputing.org.uk\/index.php?rest_route=\/wp\/v2\/posts\/364\/revisions\/398"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/digitalmediacomputing.org.uk\/index.php?rest_route=\/wp\/v2\/media\/371"}],"wp:attachment":[{"href":"https:\/\/digitalmediacomputing.org.uk\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=364"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/digitalmediacomputing.org.uk\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=364"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/digitalmediacomputing.org.uk\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=364"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}
![\"Image](\"https:\/\/digitalmediacomputing.org.uk\/wp-content\/uploads\/2012\/11\/2010ImageMapCoords.png\" "\\"Image")
<\/a><\/p>\n