{"id":41,"date":"2007-07-25T00:28:11","date_gmt":"2007-07-25T04:28:11","guid":{"rendered":"http:\/\/prglab.com\/blog\/js-tutorial\/js-imagemaps"},"modified":"2007-07-25T00:46:48","modified_gmt":"2007-07-25T04:46:48","slug":"js-imagemaps","status":"publish","type":"page","link":"https:\/\/www.prglab.com\/blog\/js-tutorial\/js-imagemaps","title":{"rendered":"JavaScript Image Maps"},"content":{"rendered":"

image-map\u662f\u4e00\u5f20\u5e26\u53ef\u70b9\u51fb\u533a\u57df\u7684\u56fe\u7247\u3002
\n————————————————————————–
\nHTML Image Maps<\/p>\n

image-map\u662f\u4e00\u5f20\u5e26\u53ef\u70b9\u51fb\u533a\u57df\u7684\u56fe\u7247\uff0c\u901a\u5e38\u6bcf\u4e00\u4e2a\u533a\u57df\u662f\u4e00\u4e2a\u8d85\u7ea7\u94fe\u63a5\uff0c\u70b9\u51fb\u8fd9\u4e2a\u533a\u57df\u53ef\u4ee5\u8bbf\u95ee\u76f8\u5e94\u7684\u94fe\u63a5\u3002<\/p>\n

\u4f8b\u5b50<\/strong><\/p>\n\n\n
\n
<img src =\"planets.gif\"\r\nwidth =\"145\" height =\"126\"\r\nalt=\"Planets\"\r\nusemap =\"#planetmap\" \/><\/pre>\n
<map id =\"planetmap\"\r\nname=\"planetmap\">\r\n<area shape =\"rect\" coords =\"0,0,82,126\"\r\n  href =\"sun.htm\" target =\"_blank\"\r\n  alt=\"Sun\" \/>\r\n<area shape =\"circle\" coords =\"90,58,3\"\r\n  href =\"mercur.htm\" target =\"_blank\"\r\n  alt=\"Mercury\" \/>\r\n<area shape =\"circle\" coords =\"124,58,8\"\r\n  href =\"venus.htm\" target =\"_blank\"\r\n  alt=\"Venus\" \/>\r\n<\/map><\/pre>\n<\/td>\n<\/tr>\n<\/table>\n
\u6548\u679c\u6f14\u793a<\/strong><\/p>\n
\"Planets\"<\/p>\n\n\"Sun\"\n\"Mercury\"\n\"Venus\" <\/map>\n
\u589e\u52a0\u4e00\u4e9bJavaScript\u4ee3\u7801<\/strong><\/p>\n
\u6211\u4eec\u53ef\u4ee5\u5728image map\u7684
\n\u6807\u7b7e\u4e0a\u589e\u52a0\u4e00\u4e9b\u4e8b\u4ef6\u6765\u8c03\u7528JavaScript\u7684\u51fd\u6570\u3002
\n\u6807\u7b7e\u652f\u6301\u7684\u4e8b\u4ef6\u6709onClick, onDblClick, onMouseDown, onMouseUp, onMouseOver, onMouseMove, onMouseOut, onKeyPress, onKeyDown, onKeyUp, onFocus, \u548conBlur\u3002<\/p>\n
\u4e0b\u9762\u662f\u5728\u4e0a\u9762\u7684\u4f8b\u5b50\u4e2d\u589e\u52a0\u4e86\u4e00\u4e9bJavaScript\uff1a<\/p>\n\n\n
\n
<html>\r\n<head>\r\n<script type=\"text\/javascript\">\r\nfunction writeText(txt)\r\n{\r\ndocument.getElementById(\"desc\").innerHTML=txt\r\n}\r\n<\/script>\r\n<\/head><\/pre>\n
<body>\r\n<img src=\"planets.gif\" width=\"145\" height=\"126\"\r\nalt=\"Planets\" usemap=\"#planetmap\" \/>\r\n\r\n<map id =\"planetmap\" name=\"planetmap\">\r\n<area shape =\"rect\" coords =\"0,0,82,126\"\r\nonMouseOver=\"writeText('The Sun and the gas giant\r\nplanets like Jupiter are by far the largest objects\r\nin our Solar System.')\"\r\nhref =\"sun.htm\" target =\"_blank\" alt=\"Sun\" \/>\r\n\r\n<area shape =\"circle\" coords =\"90,58,3\"\r\nonMouseOver=\"writeText('The planet Mercury is very\r\ndifficult to study from the Earth because it is\r\nalways so close to the Sun.')\"\r\nhref =\"mercur.htm\" target =\"_blank\" alt=\"Mercury\" \/>\r\n\r\n<area shape =\"circle\" coords =\"124,58,8\"\r\nonMouseOver=\"writeText('Until the 1960s, Venus was\r\noften considered a twin sister to the Earth because\r\nVenus is the nearest planet to us, and because the\r\ntwo planets seem to share many characteristics.')\"\r\nhref =\"venus.htm\" target =\"_blank\" alt=\"Venus\" \/>\r\n<\/map> \r\n\r\n<p id=\"desc\"><\/p>\r\n\r\n<\/body>\r\n<\/html><\/pre>\n<\/td>\n<\/tr>\n<\/table>\n
\n
 <\/a>  <\/p>\n\n\"Sun\"\n\"Mercury\"\n\"Venus\" <\/map>\n
 <\/p>\n","protected":false},"excerpt":{"rendered":"
image-map\u662f\u4e00\u5f20\u5e26\u53ef\u70b9\u51fb\u533a\u57df\u7684\u56fe\u7247\u3002 ————————————————————————– HTML Image Maps image-map\u662f\u4e00\u5f20\u5e26\u53ef\u70b9\u51fb\u533a\u57df\u7684\u56fe\u7247\uff0c\u901a\u5e38\u6bcf\u4e00\u4e2a\u533a\u57df\u662f\u4e00\u4e2a\u8d85\u7ea7\u94fe\u63a5\uff0c\u70b9\u51fb\u8fd9\u4e2a\u533a\u57df\u53ef\u4ee5\u8bbf\u95ee\u76f8\u5e94\u7684\u94fe\u63a5\u3002 \u4f8b\u5b50 <img src =”planets.gif” width =”145″ height =”126″ alt=”Planets” usemap =”#planetmap” \/> <map id =”planetmap” name=”planetmap”> <area shape =”rect” coords =”0,0,82,126″ href =”sun.htm” target =”_blank” alt=”Sun” \/> <area shape =”circle” coords =”90,58,3″ href =”mercur.htm” target =”_blank” alt=”Mercury” \/> <area shape =”circle” coords =”124,58,8″ href =”venus.htm” target =”_blank” alt=”Venus” \/> […]<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":3,"menu_order":29,"comment_status":"open","ping_status":"open","template":"","meta":[],"_links":{"self":[{"href":"https:\/\/www.prglab.com\/blog\/wp-json\/wp\/v2\/pages\/41"}],"collection":[{"href":"https:\/\/www.prglab.com\/blog\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/www.prglab.com\/blog\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/www.prglab.com\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.prglab.com\/blog\/wp-json\/wp\/v2\/comments?post=41"}],"version-history":[{"count":0,"href":"https:\/\/www.prglab.com\/blog\/wp-json\/wp\/v2\/pages\/41\/revisions"}],"up":[{"embeddable":true,"href":"https:\/\/www.prglab.com\/blog\/wp-json\/wp\/v2\/pages\/3"}],"wp:attachment":[{"href":"https:\/\/www.prglab.com\/blog\/wp-json\/wp\/v2\/media?parent=41"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}