初级前端一枚  下面代码是在图片上创建图像映射  自己整理了下 做个笔记 希望也可以帮助后来学习的朋友!

<map name="planetmap">
<area shape="rect" coords="0,0,82,126" alt="Sun" href="sun.htm">
<area shape="circle" coords="90,58,3" alt="Mercury" href="mercur.htm">
<area shape="poly" coords="23,58,8,59,40,70" alt="Venus" href="venus.htm">
</map> 该段代码中的shape指的是点击区域的形状,coords指的应该是链接区域在图片中的坐标(像素为单位)。 shape
1、rect    矩形
2、circle   圆形      
3、poly    多边形
coords
1、距形:左上角顶点坐标为(x1,y1),右下角顶点坐标为(x2,y2)
2、圆形:(圆心坐标为(X1,y1),半径为r)
3、多边形:(各顶点坐标依次为(x1,y1)、(x2,y2)、(x3,y3) ......)

HTML <img>标签 创建图像映射的更多相关文章

  1. HTML创建图像映射,布局,表单

    来源: 实验楼 创建图像映射 在这之前我们动手试验过将图片作为链接来使用,触发链接的方式就是点击图片的任何地方都可以链接到跳转地址,有时我们需要实现,点击图片的不同地方跳转到不同的地方.意思就是,一张 ...

  2. HTML <area> 标签 带有可点击区域的图像映射(图像映射指的是带有可点击区域的图像)

    例子: <img src="planets.gif" width="145" height="126" alt="Plane ...

  3. HTML <map> 标签-创建带有可点击区域的图像映射

    定义和用法 定义一个客户端图像映射.图像映射(image-map)指带有可点击区域的一幅图像. 所有主流浏览器都支持 <map> 标签. 注释:area 元素永远嵌套在 map 元素内部. ...

  4. 带有可点击区域的图像映射:HTML <map> 标签

    实例 带有可点击区域的图像映射: <img src="planets.jpg" border="0" usemap="#planetmap&qu ...

  5. html 图像映射(一个图像多个连接)

    以前就见过那种导航地图,点击地图的不同省份分别跳到不同的连接,现在用html实现一下,简单的. 图像映射是指一个图像可以建立多个连接,就是在图像上面定义多个区域,每个区域连接到不同的地址. 效果如图: ...

  6. 图像映射map

    <map>标签:带有可点击区域的图像映射 定义一个客户端图像映射.图像映射(image-map)指带有可点击区域的一幅图像. 效果图: 点击相应蓝色标签可进入详情页面浏览. 代码: < ...

  7. 图像热点&图像映射

    图像映射 图像映射也称为图像热点. 作用: 让同一张图片上的不同区域,可以实现多个不同的超链接功能. 图示: <map>图像映射三步走: 图像映射的实现需要三方面配合完成: 1.图像映射容 ...

  8. 使用ZwMapViewOfSection创建内存映射文件总结

    标 题: [原创]使用ZwMapViewOfSection创建内存映射文件总结 作 者: 小覃 时 间: 2012-06-15,02:28:36 链 接: http://bbs.pediy.com/s ...

  9. html 图像映射

    个人先做而一个例子 <body> <img src="图像映射/enterdesk.com-D69055E2B422567CB273963EA05FF7D4.jpg&quo ...

随机推荐

  1. 【Android Developers Training】 94. 创建一个空内容提供器(Content Provider)

    注:本文翻译自Google官方的Android Developers Training文档,译者技术一般,由于喜爱安卓而产生了翻译的念头,纯属个人兴趣爱好. 原文链接:http://developer ...

  2. eclipse在多modules项目结构下避免模块间依赖引用的场景

    这个在单一classLoader时,不会有问题.如果多classloader下会有问题. 假设工程有两个模块,module2 依赖module1 当我们执行mvc eclipse:eclipse后,然 ...

  3. 再谈AbstractQueuedSynchronizer:共享模式与基于Condition的等待/通知机制实现

    共享模式acquire实现流程 上文我们讲解了AbstractQueuedSynchronizer独占模式的acquire实现流程,本文趁热打铁继续看一下AbstractQueuedSynchroni ...

  4. vijos1022题解

    Victoria是一位颇有成就的艺术家,他因油画作品<我爱北京天安门>闻名于世界.现在,他为了报答帮助他的同行们,准备开一个舞会. Victoria准备邀请n个已经确定的人,可是问题来了: ...

  5. IT小天博客APP版本

    今天弄了一个博客的APP版本,感觉还不错,欢迎下载体验. 共 1 张图片 APP名称:[IT小天博客APP] APP版本:1.3 APP上线时间:2017-06-29 下载地址:点击下载

  6. java基础之集合框架(1)

    一.介绍Collection 1.概念:Collection是最基本的集合接口,一个Collection代表一组Object,即Collection的元素(Elements).一些Collection ...

  7. mysql5.6 无法使用64odbc连接

    win10 64位,mysql5.6 无法使用64 连接odbc,处理:装32位odbc, 使用C:\Windows\SysWOW64\odbcad32.exe 配置.

  8. 第一篇:webservice初探

    接触webservice也有一段时间了,为了查缺补漏,把知识点系统化,准备写几篇博文梳理下webservice的知识点,这是第一篇,对webservice进行大致的介绍. 1.什么是webservic ...

  9. 简单的.NET后台定时服务框架

    后台服务只要是有一定经验的开发人员都接触过,其中离不开服务创建,调度逻辑处理,业务逻辑编写等环节.往往我们在新建一个后台服务项目的时候都会去拷贝以前的代码,再写一些线程等方式去完成,然后又去处理服务的 ...

  10. linux和Windows实现文件共享之samba的安装与配置

    背景: 项目需求linux的一个目录,需要在两台windows目录上面进行同时共享. 使用mount时发现,通过mount将同一个linux上面的目录挂载在两台windows机器上时,会出现文件隐藏的 ...