Lesson01_08 图像地图

1、图像超链接：
格式为：<a href="url"><img src="url"></a>

2、图像地图是什么？
把一个图分成多个区域，每个区域指向不同的URL地址

3、怎样产生图像地图
(1)先要定义出图像的各热点区域的形状、位置坐标、及其指向的url地址信息，这个过程叫做图像热点映射。
这个过程要用<map name=mapname></map>标签对进行说明，其中的name属性为这个热点映射指定了一个名称。
(2)图像热点中映射中的各个区域用<area>标签说明，<area>标签的格式为:
<area shape="形状" coords="坐标" href="URL">HREF部分也可以用nohref表示，表示在这个区域单击无效。 (3)定义好了后，接着就要在<img>图像标签中增加一个名为usemap的属性设置,如下：
<img src="url" usemap="#mapname">

例：代码如下： 

<map name=mymap>

<area shape="rect" coords="0,0,50,50" href="http://www.loncer.cn">

<area shape="rect" coords="0,50,150,50" href="http://www.thinkme.cn">

<area shape="rect" coords="50,0,100,50" href="http://www.sina.cn">

</map>

<img src="http://zsrimg.ikafan.com/upload/200729134227624.gif" usemap="#mymap">
效果如下：

shape属性的设置说明：

  • rect定义一个矩形区域，coords属性设置为矩形的左上角，右下角的坐标，各个坐标值用，号分开；
  • poly定义一个多边形的区域，coords属性设置值为多边形各顶点的坐标值；
  • cicle定义一个圆形区域，coords属性设置值为圆形坐标及半径，前两个为坐标，后一个为半径。
    例：代码如下： 效果如下： 例：代码如下： 效果如下： 例：代码如下： 效果如下： 例：代码如下： 效果如下： 例：代码如下： 效果如下： 例：代码如下： 效果如下： 例：代码如下： 效果如下：

    • 赞 (0)

    相关推荐

    • Lesson01_08 图像地图

      Lesson01_08 图像地图

      1.图像超链接:格式为:<a href="url"><img src="url"></a> 2.图像地图是什么?把一个图分成多个区域,每个区域指向不同的URL地址 3.怎样产生图像地图(1)先要定义出图像的各热点区域的形状.位置坐标.及其指向的url地址信息,这个过程叫做图像热点映射.这个过程要用<map name=mapname></map>标签对进行说明,其中的name属性为这个热点映射指定了一个名称.

    • Google Map API更新实现用户自定义标注坐标

      演示地址:http://www.yaohaixiao.com/effects/google-map.html 复制代码 代码如下: if(typeof GoogleMap === 'undefined'){ var GoogleMap = {}; } (function(){ if (!document.getElementById("fgmap")) { return false; } else { // 是否可创建Google地图控件 var isCompatible = new

    • 关于HTML5的img标签

      目录 HTML5 <img> 标签 如何插入图像: 浏览器支持 标签定义及使用说明 HTML 4.01 与 HTML5之间的差异 HTML 与 XHTML 之间的差异 属性 全局属性 事件属性 尝试一下 - 实例 支持的图像格式 与 CSS 的交互 HTML5 <img> 标签 如何插入图像: 实例 HTML5 <img>标签用于向网页中添加相关图片. <img src="smiley-2.gif" alt="Smiley face&

    • 用Python制作在地图上模拟瘟疫扩散的Gif图

      用Python制作在地图上模拟瘟疫扩散的Gif图

      受杰森的<Almost Looks Like Work>启发,我来展示一些病毒传播模型.需要注意的是这个模型并不反映现实情况,因此不要误以为是西非可怕的传染病.相反,它更应该被看做是某种虚构的僵尸爆发现象.那么,让我们进入主题. 这就是SIR模型,其中字母S.I和R反映的是在僵尸疫情中,个体可能处于的不同状态. S 代表易感群体,即健康个体中潜在的可能转变的数量. I 代表染病群体,即僵尸数量. R 代表移除量,即因死亡而退出游戏的僵尸数量,或者感染后又转回人类的数量.但对与僵尸不存在治愈者,

    • raphael.js绘制中国地图 地图绘制方法

      raphael.js绘制中国地图 地图绘制方法

      最近的数据统计项目中要用到中国地图,也就是在地图上动态的显示某个时间段某个省份地区的统计数据,我们不需要flash,仅仅依靠raphael.js以及SVG图像就可以完成地图的交互操作.在本文中,我给大家分享如何使用js来完成地图交互. 先简单介绍下raphael.js,raphael.js是一个很小的javascript库,它可以在网页中实现绘制各种矢量图.各类图表.以及图像裁剪.旋转.运动动画等等功能.此外raphael.js还跨浏览器兼容,而且还兼容老掉牙的IE6啊.raphael.js的官

    • Google 静态地图API实现代码

      复制代码 代码如下: <!DOCTYPE html> <html> <head> <title>Google 静态地图 API</title> <style type="text/css"> #divStaticMap span { color:Gray; font-size:12px; } #divStaticMap .sel { width:130px; } </style> <script

    • Map.vue基于百度地图组件重构笔记分享

      Map.vue是为iview组件开发的一个基于百度地图的组件,实现了点是否在框内的判断,画多边形覆盖物,添加自定义富文本标记物等功能. 第一步:重构自定义的富文本对象,设置为全局对象. 原代码的富文本对象是声明在addResource这个方法里面的,代码结构非常复杂,在beforeCreate这个钩子函数里面申明为全局的,就可以多次复用,不需要重复声明来了, 否则,每调用一次paintPolygon方法,都要重新声明一次,非常麻烦,效率太低下. 原代码是在父组件中处理好这个富文本对象需要的数据,

    • vue如何集成raphael.js中国地图的方法示例

      vue如何集成raphael.js中国地图的方法示例

      前言 raphael.js是一个很小的javascript库,它可以在网页中实现绘制各种矢量图.各类图表.以及图像裁剪.旋转.运动动画等等功能.此外raphael.js还跨浏览器兼容,而且还兼容老掉牙的IE6啊.raphael.js的官网地址: http://raphaeljs.com/ 因为最近的项目要用到中国地图,我需要的比较轻量级,所以没用echarts,选择的这个地图. 效果图 方法如下: 1.安装 npm install --save raphael 2.直接上代码 <template

    • 点击地图div上的按钮实现对地图数据的入库操作

      点击地图div上的按钮实现对地图数据的入库操作

      在地图div上添加一个按钮,单击按钮后弹出一个弹出层,在弹出层的输入框内输入数据后点击提交按钮将数据提交至数据库. mytest_map.jsp的代码如下: 复制代码 代码如下: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3c.org/TR/1999/REC-html401-19991224/loose.dtd"> <html lang='

    • jsp使用ECharts动态在地图上标识点

      ECharts可以很方便的在网页上绘制地图,图表,并且可以提供下载图像,放大,缩小,拖动等功能,今天主要说一下它的地图类型(type:＇map＇)是如何实现的. 首先在ECharts地图的坐标需要我们存储在一个geoCoord属性里,它是一个JS的字典对象,由键/值对组成,键表示点的名称,值则表达它的坐标,由经纬度组成,它是一个数组,如[136.00,32.00]它就表示了一个坐标． 地图类型的图表需要关注的元素 title:标题,显示这个地图所表示的名称 title: { text: '清大云

    随机推荐