图像的影像地图超链接,<map>标签浅谈

在HTML中还可以把图片划分成多个热点区域,每一个热点域链接到不同网页的资源。这种效果的实质是把一幅图片划分为不同的热点区域,再让不同的区域进行超链接。这就是影像地图。要完成地图区域超链接要用到三种标签:<img><map><area>下面分别介绍这些标签的用法:

影像地图(Image Map)标签的使用格式:

<img src="图形文件名" usemap="#图的名称">

<!-- 插入图片时要在<img>标记中设置参数usemap="#图的名称" ismap,以表示对图像地图(图的名称)的引用;-->

<map name="图的名称">

<!--用<map>标记设定图像地图的作用区域,并用name属性爲图像起一个名字-->

<area shape=形状 coords=区域座标列表 href="URL资源地址">

......可根据需要定义多少个热点区域

<area shape=形状 coords=区域座标列表 href="URL资源地址">

</map>

【1】 shape -- 定义热点形状

         shape=rect: 矩形

         shape=circle:圆形

         shape=poly: 多边形

【2】coords -- 定义区域点的坐标

a.矩形:必须使用四个数字,前两个数字为左上角座标,后两个数字为右下角座标

例:<area shape=rect coords=100,50,200,75 href="URL">

b.圆形:必须使用三个数字,前两个数字为圆心的座标,最后一个数字为半径长度

例:<area shape=circle coords=85,155,30 href="URL">

c.任意图形(多边形):将图形之每一转折点座标依序填入

例:<area shape=poly coords=232,70,285,70,300,90,250,90,200,78 href="URL">

下面是一个例子

<img src="planets.jpg" border="0" usemap="#planetmap" alt="Planets" />

  <map name="planetmap" id="planetmap">
    <area shape="circle" coords="180,139,14" href ="venus.html" alt="Venus" />
    <area shape="circle" coords="129,161,10" href ="mercur.html" alt="Mercury" />
    <area shape="rect" coords="0,0,110,260" href ="sun.html" alt="Sun" />
  </map>

在制作本文介绍的效果时应注意的几点:

   1、在<img>标记不要忘记设置usemap、ismap参数,且usemap的参数值必须与<map>标记中的name参数值相同,也就是说,“图像地图名称”要一致;

   2、同一“图像地图”中的所有热点区域都要在图像地图的范围内,即所有<area>标记均要在<map>与</map>之间;

   3、在<area>标记中的 cords 参数设定的坐标格式要与shape参数设定的作用区域形状配套,避免出现在shape参数设置的矩形作用区域,而在cords 中设置的却是多边形区域顶点坐标的现象出现。

时间: 2024-10-07 23:56:09

图像的影像地图超链接,<map>标签浅谈的相关文章

H5基础标签浅谈(二)

这周学习开始接触CSS样式表了,能制作的网页也开始了各种高大上,各种属性与属性值也纷至沓来,编程的世界确实很精彩. 首先,咱们先来看看样式表的类型.主要分为3种: [1.行内样式表] (1)将CSS样式,与HTML代码完全糅杂在一起,不符合W3C关于"内容与表现分离"的基础规范,不利于后期维护. (2)优先级最高,但是不推荐使用. <div style=""></div> [2.内部样式表] (1)一定程度的将CSS样式与HTML代码进行了分

带有可点击区域的图像映射:HTML &lt;map&gt; 标签

实例 带有可点击区域的图像映射: <img src="planets.jpg" border="0" usemap="#planetmap" alt="Planets" /> <map name="planetmap" id="planetmap"> <area shape="circle" coords="180,139,14

$.each()、$.map()区别浅谈

遍历应该是各种语言中常会用到的操作了,实现的方法也很多,例如使用for.while等循环语句就可以很轻松的做到对数组或对象的遍历,今天想讲的不是它们,而是简单方便的遍历方法. 大致的整理了一下,经常用到的大概有Jquery的$.each.$.map.each().map().get().toArray()以及js原生的forEach()吧,当然肯定还有一些我不知道的,今天就先谈谈$.each()和$.map()区别. $.each() $.each()方法可用于遍历任何对象(包括数组),结构为:

Html中的map标签

图像的影像地图超链接,<map>标签浅谈 在HTML中还可以把图片划分成多个热点区域,每一个热点域链接到不同网页的资源.这种效果的实质是把一幅图片划分为不同的热点区域,再让不同的区域进行超链接.这就是影像地图.要完成地图区域超链接要用到三种标签:<img><map><area>下面分别介绍这些标签的用法: 影像地图(Image Map)标签的使用格式: <img src="图形文件名" usemap="#图的名称"

Html中的map标签(http://www.cnblogs.com/china-chang/archive/2012/03/27/2419734.html)

图像的影像地图超链接,<map>标签浅谈 在HTML中还可以把图片划分成多个热点区域,每一个热点域链接到不同网页的资源.这种效果的实质是把一幅图片划分为不同的热点区域,再让不同的区域进行超链接.这就是影像地图.要完成地图区域超链接要用到三种标签:<img><map><area>下面分别介绍这些标签的用法: 影像地图(Image Map)标签的使用格式: <img src="图形文件名" usemap="#图的名称"

浅谈html标签

浅谈html各常用标签用法 标题标签:<h1>-<h6>来表示,使标题字体变粗. <br />换行标记 <hr />水平分隔符 &nbsp空格符 &copy版权符 <a href>a标签超链接 href可接链接地址 <p>段落标签<blockquote>引用标签及可用做缩进 <table>表格中的<ul>无序列表<ol>有序列表<dl>自定义列表<row

浅谈struts2标签中的2个很常用的标签的用法(radio和select)

1.如图所示我们需要在前台的页面通过radio和select将对应的数据库中的数据显示到选项当中,这也是我们做项目中经常需要做的,动态的显示,而不是静态的显示. 首先我们需要在页面中导入struts2的标签库<%@ taglib prefix="s" uri="/struts-tags"%>,一般的我们不用struts2写一个radio代码如下: <input type="RADIO" name="sex"

HTML &lt;map&gt; 标签-创建带有可点击区域的图像映射

定义和用法 定义一个客户端图像映射.图像映射(image-map)指带有可点击区域的一幅图像. 所有主流浏览器都支持 <map> 标签. 注释:area 元素永远嵌套在 map 元素内部.area 元素可定义图像映射中的区域. <img>中的 usemap 属性可引用 <map> 中的 id 或 name 属性(取决于浏览器),所以我们应同时向 <map> 添加 id 和 name 属性. 实例 带有可点击区域的图像映射: <html> <

浅谈 js 语句块与标签

原文:浅谈 js 语句块与标签 语句块是什么?其实就是用 {} 包裹的一些js代码而已,当然语句块不能独立作用域.可以详细参见这里<MDN block> 也许很多人第一印象 {} 不是对象字面量么?怎么成了语句块了?如果在赋值语句或者表达式里用的时候,确实是对象字面量,如: var a = {}; ({toString:function(){return "hehe"}}) + "..."; 是不是很有意思..但是直接使用如: {toString: fu