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来操作，细节就是各种属性。

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

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

html5图像映射坐标怎么看,如何将AxesImage中的坐标映射到已保存图像文件中的坐标？...
这是尝试从matplotlib获取精确像素值的更令人困惑的部分之一. Matplotlib将绘制精确像素值的渲染器与绘制图形和轴的画布分开. 基本上,最初创建(但尚未显示)图形时存在的渲染器不一定与显 ...
matlab 图像读取长宽_计算机视觉学习笔记1 图像读取显示和尺寸变换
第一天,图像的读取,显示和尺寸变换 c++,python,MATLAB各实现一遍,以这个头骨图像为例吧 c++调用OpenCv实现图像显示和尺寸变换 c++用的编译器为clion,因此需要先配置cma ...
小白学习图像处理3——图像旋转原理
文章目录一.图像旋转的原理二.使用matlab实现 1.思路 2.实现代码三.优化 1.思路 2.代码实现 3.使用双线性插值四.matlab函数实现图像旋转 1.imrotate函数 2.i ...
深度学习六、图像风格迁移
所谓图像风格迁移,是指利用算法学习著名画作的风格,然后再把这种风格应用到另外一张图片上的技术. 1 图像风格迁移的原理在学习原始的图像风格迁移之前,可以先回忆一下ImageNet图像识别模型VGGN ...
matlab之创建图像轮廓图函数imcontour
目录一.功能二.语法 1.imcontour(I) 2.imcontour(I,levels) 3.imcontour(I,V) 4.imcontour(x,y,___) 5.imcontour( ...
Python计算机视觉编程学习笔记三图像到图像的映射
图像到图像的映射 (一)单应性变换 1.2 仿射变换 (二)图像扭曲 2.1 图像中的图像 2.2 图像配准 (三)创建全景图 3.1 RANSAC 3.2 拼接图像 (一)单应性变换单应性变换是将 ...
盘点深度学习一年来在文本、语音和视觉等方向的进展，看强化学习如何无往而不利
[AI科技大本营导读]AlphaZero自学成才,机器人Atlas苦练后空翻--2017年,人工智能所取得的新进展真是让人应接不暇.而所有的这些进展,都离不开深度学习一年来在底层研究和技术开发上的新突 ...
OpenCV与图像处理学习一——图像基础知识、读入、显示、保存图像、灰度转化、通道分离与合并
OpenCV与图像处理学习一--图像基础知识.读入.显示.保存图像.灰度转化.通道分离与合并一.图像基础知识 1.1 数字图像的概念 1.2 数字图像的应用 1.3 OpenCV介绍二.图像属性 ...
youcans 的 OpenCV 学习课—5.图像的几何变换
youcans 的 OpenCV 学习课-5.图像的几何变换本系列面向 Python 小白,从零开始实战解说 OpenCV 项目实战. 几何变换是指对图像的位置.大小.形状.投影进行变换,是将图像从 ...

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

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

最新文章

热门文章