html5图像映射坐标怎么看,html学习之创建图像映射

作为一名才接触html一个礼拜的人来说，我确实是一只初级菜鸟，不过，我相信在我不断的积累下，365天后，我会有所突破，成功在于积累、沉淀，让我们为了明天，努力，加油！

今天在通过前几天的积累后，终于接触到了一个相对而言有点小难度的组合了，源代码分享在下面：

我只是一个初级菜鸟，那么我写出来只是想分享自己的几点看法，以及做个留档，请勿喷。

首先，看到这个源码的时候，我的脑袋快炸开了，因为我一直是在网上边学边练的，没有找过高人指点，也没有发问过高人，全是在自己琢磨里面的规律，所以，一分钟的头脑空白后，我开始慢慢梳理这段代码。

其次，接下来，我们一起来梳理一下，这段代码的构成：

1、它由最大的主干html与body组成，这是不可或缺的，写代码都要写的；

2、中间的p是作者的注释，让我们能够更好的理解这段代码；

3、img是一个图片元素，src是图片的地址，border是图片的边框，usemap是什么？百度一下，可以推荐有道查询，会更快，得出“属性USEMAP(使用图像)接受段块式的超级链接，因此可以在同一HTML文件中存储映像定义信息。”也就是说，usemap的意思就是告诉电脑，我要使用这张图了，哪张图？=号后面的“#planetmap”这张图。接着往下，alt是避免如果图片不能显示，则告诉你这张图片大致内容的。

4、元素，后面紧跟了两个属性name＆id，这不是一样的吗？对，是一样的，不过针对不同浏览器可能会有所不同，所以保险起见，两个都写，这里最好两个都写，花不了多少时间。

5、area接下来接触核心了，这个是我完全没学的，怎么办？我又得百度或者有道了，area是“标签定义图像映射中的区域(注:图像映射指得是带有可点击区域的图像)。

area

元素总是嵌套在map标签中”，这下子我就明白很多了，area就是定义这块区域会有几个不同的地方可供应用，而且总是嵌套在map元素中使用，两个关键点我都掌握了，不错。再看它的属性词，shape形状，形状是circle圆形，coords坐标，坐标是“180,139,14”这里着实让我搞了半天，一看我们就大致知道这是一个二维图，前面两个词是XY轴坐标值，第三个肯定是直径或者半径，这个时候用截图软件的时刻到了，通过各种琢磨，得出了:

①起点都在左上角

②数字都是正数

③是先横后竖

④最后一个值是半径。href是地址链接，target是目标打开方式。很显然，中间的这个重要部分已经分割出来了，我们都知道了。

最后，就是整体的来看待他们，在一个大的html里面包含了一个body，body中包含了p、img、map，map中又包含了area。img中的属性有src、border、usemap、alt，map中的属性有name、id，area中的属性有shape、coords、href、target、alt。我们可以得出结论，描述语句通过p来实现，图片展示通过img展现，图片的使用通过map实施，具体步骤通过map中的area来操作，细节就是各种属性。

今天就写到这里，一上午时间过去了，该吃午饭了。