`

热点链接(img map area)

    博客分类:
  • html
阅读更多

 

怎么在一个图片中做多个链接呢?

热点链接可以帮你解决。这种效果的实质是把一幅图片划分为不同的热点区域,再让不同的区域进行超链接。要完成地图区域超链接要用到三种标签:<img><map><area>。

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

     <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">

demo :
   <img src="../menu.gif" width="204" height="510" border="0" usemap="#Map" />
<map name="Map" id="Map">
    <area shape="rect" coords="12,37,181,88" href="http://www.qq.com" onFocus="this.blur()"/>
    <area shape="rect" coords="12,97,182,143" href="http://www.yahoo.com" />
    <area shape="rect" coords="18,155,179,200" href="http://www.sina.com" />
    <area shape="rect" coords="18,211,182,260" href="http://www.baidu.com" />
    <!--<area shape="rect" coords="12,444,182,490" href="sm-textfile.html" target="pcs"/> -->
    <!-- onFocus="this.blur()"   去掉虚线框 -->
</map>

分享到:
评论

相关推荐

    html中map热点area的使用全部代码和效果,兼容所有浏览器

    本篇文章将深入讲解如何使用`&lt;map&gt;`和`&lt;area&gt;`来创建兼容所有浏览器的图像热点。 首先,`&lt;map&gt;`元素定义了一个图像映射,它不直接显示在页面上,但与`&lt;img&gt;`标签配合使用,为图像提供可交互的区域。例如: ```html...

    鼠标移动到地图的热点区域时突出显示热点区域的源码

    在`&lt;body&gt;`部分,我们将创建一个`&lt;div&gt;`元素作为地图容器,并可能包含一个`&lt;img&gt;`元素来显示`map.png`,这是一个静态的地图图像。 `pic_map.js`是关键,它包含了实现地图热点高亮效果的JavaScript代码。通常,我们...

    imgmap_2.2_108

    "imgmap"这个名字来源于"image map",在网页设计中,它允许用户将图片的不同部分链接到不同的URL,或者添加其他交互元素。 ### 图像映射基础 图像映射是HTML的一种特性,通过`&lt;map&gt;`和`&lt;area&gt;`标签实现。`&lt;map&gt;`...

    Jquery ImageMapste Map area

    - 创建一个`&lt;img&gt;`标签,并定义一个`&lt;map&gt;`元素,其中包含多个`&lt;area&gt;`标签,每个`&lt;area&gt;`表示图像的一个区域。 - 使用jQuery选择器选中图片,然后调用`imageMapster()`方法初始化插件。 3. **配置选项** - `...

    为图片根据坐标自动创建热区并点击变颜色

    - `&lt;map&gt;`元素定义了一个图像映射,映射中包含一个或多个由`&lt;area&gt;`元素定义的区域。 - `name`属性是必需的,用于标识图像映射,以便在`&lt;img&gt;`标签中引用它。 - 示例:`&lt;map name="myMap"&gt;...&lt;/map&gt;` 2. **...

    jquery开发的地图热点特效-map标签

    &lt;img src="image.jpg" usemap="#mapName"&gt; &lt;map name="mapName"&gt; &lt;area shape="rect" coords="x1, y1, x2, y2" href="link.html" alt="描述"&gt; &lt;/map&gt; ``` 其中,`usemap`属性的值(`#mapName`)与`&lt;map&gt;`的`...

    vue实现在图片中画矩形框,并得到对角坐标,设置map中area的样式.zip

    - `&lt;area&gt;`标签用于定义图像热区的形状(如矩形`rect`),坐标,以及链接的目标URL。例如: ```html &lt;map name="myMap"&gt; &lt;area shape="rect" coords="x1, y1, x2, y2" href="url" alt="描述"&gt; &lt;/map&gt; ``` - ...

    图像的影像地图超链接(热点区域),map标签浅谈

    本文将详细介绍如何使用`&lt;img&gt;`、`&lt;map&gt;`以及`&lt;area&gt;`标签创建图像的热点区域,并探讨其实际应用。 #### 二、基础知识 ##### 2.1 `&lt;img&gt;`标签 `&lt;img&gt;`标签用于在HTML文档中嵌入图像。当结合`usemap`属性使用时,它...

    图片画热点链接代码事例

    总的来说,通过结合HTML的`&lt;map&gt;`和`&lt;area&gt;`元素以及jQuery的便利功能,我们可以创建出具有交互性和动态性的图片热点链接,提升用户体验。这种技术对于那些需要在图片上提供丰富信息的网站来说尤其有用。

    Mapster-jquery,map,area美化

    Image Maps 是 HTML 中一种特殊的技术,允许我们将一个图像的不同部分定义为可点击的区域,通常通过 `&lt;map&gt;` 和 `&lt;area&gt;` 标签实现。Mapster 提供了一套丰富的功能,使开发者能够创建吸引人的、交互式的图像地图,...

    HTML5创建热点区域案例.pdf

    第一个案例演示了如何使用 `&lt;map&gt;` 标签和 `&lt;area&gt;` 标签创建热点区域。源代码如下: ```html &lt;!doctype html&gt; 创建热点区域 &lt;img src="images/title&gt;01.jpg" width="596" height="275" border="5" usemap=...

    HTML给位图片上的指定区域(热点)添加超链接.zip

    这个主题,"HTML给位图片上的指定区域(热点)添加超链接",就是关于如何利用HTML的`&lt;map&gt;`和`&lt;area&gt;`标签来实现这一功能。 首先,`&lt;img&gt;`标签是我们常见的用于插入图像的HTML元素,但它有一个非常有用的属性叫做`...

    js 动态获取图片矩形热区,并在热区上添加蒙版,鼠标经过,以半透明形式显示该区域

    - `&lt;map&gt;` 元素定义图像映射,内部包含若干个`&lt;area&gt;`元素,每个`&lt;area&gt;`代表一个热区。 2. **JavaScript 动态创建热区**: - 可以使用JavaScript动态创建`&lt;area&gt;`元素,设置其`shape`属性(如`rect`表示矩形),...

    imgmaptool:轻松创建html图像地图的工具

    `&lt;map&gt;`标签定义图像地图的名称,而`&lt;area&gt;`标签则定义图像上各个可点击的区域及其链接。imgmaptool提供了友好的图形用户界面,让用户可以通过鼠标操作来选择和编辑这些区域。 在imgmaptool的工作流程中,首先,...

    HTML的MAP设计

    以下是`&lt;map&gt;`和`&lt;area&gt;`元素的基本结构: ```html &lt;img src="image.jpg" usemap="#mapname" alt="description"&gt; &lt;map name="mapname"&gt; &lt;area shape="shape" coords="coordinates" href="url" alt="alternate text...

    如何使用DW工具给图片添加热点

    &lt;img src="example.jpg" usemap="#example_map" /&gt; &lt;map name="example_map"&gt; &lt;area shape="rect" coords="100,100,200,200" href="http://example.com" target="_blank" /&gt; &lt;area shape="circle" coords="300,300...

    map_area:用html内容照明地图区域并调整其大小

    &lt;img src="map.png" usemap="#map" alt="地图"&gt; &lt;map name="map"&gt; &lt;area shape="rect" coords="0,0,100,100" href="#" alt="区域1"&gt; &lt;area shape="circle" coords="50,50,30" href="#" alt="区域2"&gt; &lt;/map&gt; ``` 在...

    Web-前端html+css从入门到精通 117. map标签与area标签.zip

    本教程聚焦于HTML中的`map`标签和`area`标签,这两个标签是创建图像映射的重要工具,使得图像也能具有交互性,用户可以通过点击图像的不同区域跳转到不同的链接或者执行特定的JavaScript功能。 `&lt;map&gt;`标签是用来...

    map_area

    `&lt;map&gt;`标签用于定义图像映射,而`&lt;area&gt;`标签则用于定义图像上的具体形状或区域。 1. `&lt;map&gt;`标签:这是一个容器元素,不显示任何内容,但它定义了一个与之关联的图像映射。它需要一个`name`属性,这个值是引用该...

    HTML map标签

    这个标签常常与`&lt;area&gt;`元素一起使用,用于定义图像内的热点区域,这些区域可以链接到不同的网页或者执行其他交互操作。在网页设计中,`&lt;map&gt;`标签尤其适用于创建复杂的交互式地图,如城市地图或导航图。 博文链接...

Global site tag (gtag.js) - Google Analytics