`
desert3
  • 浏览: 2159466 次
  • 性别: Icon_minigender_1
  • 来自: 合肥
社区版块
存档分类
最新评论

html area useMap 图片热区

    博客分类:
  • Html
阅读更多
图片
<img src="${ctx}/styles/index/images/pic12.jpg" width="248" height="60" usemap="#Map"/>

Map
<map name="Map" id="Map">
  <area shape="rect" coords="0,0,123,58" href="http://www.baidu.com" />
  <area shape="rect" coords="123,0,246,58" href="http://www.google.com" />
</map>


shape是rect 矩形的时候,coords对应图片上的左上和右下的坐标
shape是circ 圆形的时候,coords对应图片上的圆心坐标和半径长度
shape是poly 多边形的时候,coords对应图片上的多变形各个角的坐标
分享到:
评论

相关推荐

    html页面绘制热区工具

    在HTML中,热区通常通过`&lt;map&gt;`和`&lt;area&gt;`标签来实现。`&lt;map&gt;`标签定义了一个图像映射,即关联一个图像和一组定义的热区。`&lt;area&gt;`标签则用于定义热区的具体形状、坐标和行为。以下是创建热区的基本步骤: 1. **...

    Jquery实现html内的图片热区

    在网页设计中,图片热区(Image Map)是一种常见的交互元素,它允许用户通过点击或交互特定区域来触发不同的响应。jQuery 是一个流行的JavaScript库,它简化了DOM操作,事件处理,动画效果等功能,因此使用jQuery...

    js 动态设置图片的热区并获取图片坐标

    在JavaScript中,动态设置图片的热区(hotspots)并获取图片坐标是一项常见的需求,尤其在交互式网页设计中。热区技术允许我们为图片指定特定的交互区域,用户点击或悬停在这些区域上时可以触发特定的事件。本文将...

    jquery设置图片热区并生成图片

    总结起来,通过jQuery设置图片热区并生成图片涉及的关键知识点包括:HTML图片映射(`&lt;map&gt;`和`&lt;area&gt;`标签),jQuery事件处理(`click()`, `mouseover()`, `mouseout()`等),以及可能的Canvas API或图像处理库的...

    CSS自定义图片热区示例

    在传统的HTML图片热区实现中,我们通常会使用`&lt;map&gt;`和`&lt;area&gt;`标签。`&lt;map&gt;`标签定义了一个图像映射,`&lt;area&gt;`标签则用于定义图像上的可点击区域。但是,这些标签默认的样式相当有限,仅能提供基本的几何形状(如...

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

    "Area Map" 是HTML中的一个元素,它是实现图像热区的关键。`&lt;map&gt;`标签配合`&lt;area&gt;`标签一起工作,用来定义图像的可点击区域。下面我们将详细讨论这两个标签的使用和相关知识点: 1. **HTML `&lt;map&gt;` 标签**: - `...

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

    在本场景中,我们讨论的是如何使用JavaScript动态地在图片上生成矩形热区,并在热区上添加蒙版效果。热区(Area)是HTML `&lt;map&gt;` 元素的一部分,允许我们在图像上定义可点击的交互区域。 1. **HTML `&lt;img&gt;` 和 `...

    图片上设置热区,点击图片上的点,执行javascript方法

    在网页设计中,热区(Hotspots)是一种特殊的技术,允许我们为图片的不同区域赋予交互性,使得用户点击这些特定区域时可以触发某些预设的行为,例如执行JavaScript方法。这通常用于实现图像映射,即在一张大图上定义...

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

    在Vue项目中实现图片上画矩形框并获取对角坐标以及设置`&lt;map&gt;`中的`&lt;area&gt;`样式,涉及到的技术主要包括JavaScript、HTML5的绘图API以及图像热区技术。接下来,我们将深入探讨这些知识点。 1. **JavaScript绘图API**...

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

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

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

    &lt;area shape="circle" coords="150,150,50" href="page2.html"&gt; ``` 在这个例子中,`name`属性指定了地图的名称,必须与`&lt;img&gt;`标签中的`usemap`属性值相匹配。 ##### 2.3 `&lt;area&gt;`标签 `&lt;area&gt;`标签用于定义图像...

    定义光标热区

    在HTML中,我们可以使用`&lt;area&gt;`标签配合`&lt;map&gt;`标签来定义图像地图,创建图形或图像上的热区。CSS可以用来调整热区的样式,而JavaScript则用于处理用户交互事件。 例如,以下是一个简单的HTML图像地图的例子: ``...

    html area图片热点的使用介绍附相关属性一览表

    HTML中的`&lt;area&gt;`元素是图像映射(Image Maps)的核心组成部分,用于创建图像上的交互式热点区域。这些热点区域可以被用户点击,触发链接到其他网页或执行其他操作。以下是对`&lt;area&gt;`元素及其相关属性的详细解释: ...

    ImageMapControl_Source.rar

    "图像热区"在Web开发中通常是通过HTML的`&lt;map&gt;`标签和`&lt;area&gt;`标签来实现的。`&lt;map&gt;`定义了一个图像映射,`&lt;area&gt;`则定义了图像上的一个可点击区域及其属性。例如: ```html &lt;img src="image.jpg" usemap="#...

    html网页插入图片、加入地图索引示例讲解

    HTML提供了标签来插入图片,同时可以通过和&lt;area&gt;标签实现图片上的区域热区映射,创建地图索引,让用户点击图片的特定部分可以跳转到其他页面或执行特定操作。接下来将详细介绍如何在HTML中插入图片以及创建地图索引...

    网页设计与制作之超链接.pdf

    首先,你需要使用`&lt;map&gt;`和`&lt;area&gt;`标签定义图片的热区,然后将`&lt;a&gt;`标签应用于`&lt;area&gt;`标签。例如: ```html &lt;img src="alumni.jpg" usemap="#alumnicard"&gt; &lt;area shape="rect" coords="x1, y1, x2, y2" href=...

    jquery.image-maps-master.zip

    在网页设计中,有时我们需要让图片具有交互性,比如点击图片的特定区域跳转到不同的链接,这种技术被称为图像热区映射,即image maps。jQuery Image Maps插件是实现这一功能的强大工具,尤其在`jquery.image-maps-...

    ImageMap(2.0)

    2. **定义热区**: 使用Area子项为ImageMap添加热区,指定形状、坐标和链接。 3. **关联图像**: 通过`ImageUrl`属性将ImageMap与图像关联,并使用`UseMap`属性引用地图的`name`。 4. **处理事件**: 在代码-behind...

    jquery-image-hot-show.zip

    2. HTML结构:创建图片元素,并为每个热点区域添加HTML元素,如`&lt;area&gt;`,定义其形状(通常为矩形或圆形)和坐标。 ```html &lt;img id="hotspot-image" src="your-image.jpg" usemap="#image-map"&gt; &lt;area shape=...

    实验3 客户端脚本编程1

    6. 创建图片热区,可使用HTML的`&lt;map&gt;`和`&lt;area&gt;`标签定义: ```html &lt;img src="image.jpg" usemap="#imageMap"&gt; &lt;area shape="rect" coords="0,0,50,50" href="link1.html"&gt; &lt;!-- 更多区域 --&gt; ``` 接...

Global site tag (gtag.js) - Google Analytics