HTML5 之给图片添加热点

最新推荐文章于 2024-08-06 18:58:51 发布
最新推荐文章于 2024-08-06 18:58:51 发布
阅读量22 收藏
点赞数
文章标签： html5 前端 html
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_27781261/article/details/136014682
版权
这是一个HTML代码示例，展示了如何使用``和``标签创建交互式的图像映射。用户可以点击图像上的特定区域（如星球），链接会跳转到对应的页面或资源，例如访问关于水星和金星的页面，或者播放太阳的视频。
摘要由CSDN通过智能技术生成

一、效果图

 二、代码

<html>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<body>

<p>请点击图像上的星球，把它们放大。</p>

<img src="https://www.w3school.com.cn/i/eg_planets.jpg" border="0" usemap="#planetmap" alt="Planets"/>

<map name="planetmap" id="planetmap">
    <area shape="circle" coords="180,139,14" href="https://www.w3school.com.cn/example/html/venus.html" target="_blank" alt="Venus"/>
    <area shape="circle" coords="129,161,10" href="https://www.w3school.com.cn/example/html/mercur.html" target="_blank" alt="Mercury"/>
    <area shape="rect" coords="0,0,110,260" href="https://img.boyuan.com/videos/4/2021/07/W8083dAFcfq3D1QZQ30Paz0llMA3Lv.mp4" target="_blank"  alt="Sun"/>
</map>

</body>
</html>
样子2018
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
HTML——3D动画 热点图
zx2014567296的博客
04-26 600
利用H5和C3制作热点图。 一、效果 视觉效果上一个点从中心向四周在不断发光。 二、思路 先做一个盒子放置背景图片 设置一个子盒子用于定位 在子盒子里再设置四个盒子，一个设置圆，另外三个设置发散的波纹 波纹用阴影制作会更有美感 波纹放大用width和height设置，不要用scale，会把阴影也撑大，影响美感 三、实践 先设置一个父盒子map，用背景方式放入地图 html <div class="map"></div> CSS .map { position: r
html5中图片热点,HTML5 创建热点图
weixin_39634576的博客
06-04 630
通过HTML5 canvas画布创建简单的热点图，当鼠标划过时产生热点，停留时间越长，热点亮度越高。下面是HTML部分：#heatmap{background-image:url("mapbg.jpg");}Reset接着进行变量声明及初始化：var points = {}; //保存每个点击点的值，用于选取颜色var SCALE = 3; //缩放比例，为使保存在points中的坐标点在一定范围...
html5在图片中创建热点区域,为图片设置热点区域之<map> <area>
weixin_31785421的博客
06-23 2383
在开发的过程中经常会遇到对图片上某区域进行操作，此时 就要上场了。 复制代码中的 usemap 属性可引用 中的 id 或 name 属性(取决于浏览器)，所以我们应同时向 添加 id 和 name 属性。需要在内部使用，用来定义图片中的热点区域。shape属性用来定义热点区域的形状，有下面四个值：default：全部区域圆形：circ 或 circle多边形：poly 或 polygo...
利用H5的Map和crea做热点地图，和点击图片的某个地方跳转某个链接
Michael_Hzs的博客
08-19 740
可以实现点击图片上指定区域，然后跳转指定链接的效果。比如 一张有香蕉，苹果，梨子的图片，你点击香蕉出现香蕉，点击苹果出现苹果，点击梨子出现梨子。原理很简单，但是很难想到，是我们公司一个技术经理想到的。然后我偷摸看源码看到他用了者两个组件。
html5+css3(十一)图片热点(图像地图)
顾小笙的博客
03-27 997
图片热点(图像地图) 图像热点：给一张图片加多个链接，默认情况下，一张图只能加一个链接。 1、标记结构： <img src = “images/01.jpg”usemap = “#Map”/> <map id = “Map”name = “Map”> <area shape = “热区形状”coords= “热区坐标”href = “链接地址”/> <area shape = “热区形状”coords= “热...
HTML给位图片上的指定区域（热点）添加超链接.zip
01-07
这个主题，"HTML给位图片上的指定区域（热点）添加超链接"，就是关于如何利用HTML的`<map>`和`<area>`标签来实现这一功能。 首先，`<img>`标签是我们常见的用于插入图像的HTML元素，但它有一个非常有用的属性叫做`...
htmll5，js热点标注，添加注释
08-16
同时，JavaScript还可以用来添加和编辑注释，这些注释可以是与热点关联的文字信息，用户可以通过点击热点来显示或隐藏这些注释。注释的管理可以通过数据结构（如数组或对象）来实现，每个注释对应一个热点，并存储其...
jquery图片热点定位标注特效
09-15
"jquery图片热点定位标注特效"是一个利用jQuery和CSS3实现的高效解决方案，旨在帮助用户在大图上轻松添加多点标注，以指示关键的产品或内容，并通过点击这些标注来触发弹窗展示详细信息。 首先，jQuery是一个流行的...
如何使用DW工具给图片添加热点
09-22
### 如何使用Dreamweaver工具给图片添加热点 在网页设计与开发中，给图片添加热点是一项非常实用的功能。通过这种方式，用户可以在图片的不同区域点击并跳转至不同的链接或执行不同的操作。本文将详细介绍如何使用...
图片热点技术Demo
11-09
4. **图片资源**：包含要添加热点的原始图片，可能有多种尺寸以适应不同的设备或屏幕分辨率。 5. **示例数据**：可能包含了一些示例的热点数据，用于演示如何定义和管理热点区域，这些数据可能是JSON格式，方便程序...
canvas画不规则多边形_详解HTML5 Canvas绘制不规则图形时的非零环绕原则
weixin_39874379的博客
12-19 383
路径方向与非零环绕原则平时我们画的图形都是规规矩矩的，那么如果我们用线条画了个抽象派作品，就像下面这图一样，童鞋们知道怎么用fill()染色呢？这里就要用到数学上的一个方法——非零环绕原则，来判断哪块区域是里面，哪块区域是外面。接下来，我们具体来看下什么是非零环绕原则。首先，我们得给图形确定一条路径，只要“一笔画”并且“不走重复路线”就可以了。如图，标出的是其中的一种路径方向。我们先假定路径的正方...
HTML图片热点
web开发
12-04 3101
目前在改进内部系统的一个功能，前端给出了效果图，从前段到后端都需要自己来写了，好在自己对前端的技术也略有涉猎。 页面需要实现一个按钮切换的效果，其实切换只是冠冕堂皇的话了，就是点击图片一下，换成另一张图片。效果如下： 这是从效果图上截下来的两张图片，需要的效果就是点击正式版，切换到左边的效果，点击编辑版切换到右边的效果，所以需要正式版和编辑版上触发不同的事件，但是正...
【前端】HTML图片热点功能
而我想……成为一个有趣的妞
06-15 3946
<img src="topperVIdeoBottom.jpg" usemap="#Map" /> <style> /*去掉点击area时所产生的边框*/ area{border:0;outline:none;} </style> <!-- rect：矩形 --> <!-- polygon：多边形 --> <map name=...
html5 图片热点area，map的用法
weixin_34090562的博客
11-14 291
今天看了一个html5在图片上面创建热点的标签，所谓图片热点就是给你一张图片然后你可以设置点击图片不同的位置进入不同的链接！如果下面是一张图片的话，里面在长方形、圆形、三角形区域都可以进入其他网页！ 下面，我们来实例介绍map，area这些标签的用法！ 1，制作矩形热点 (1),shape标签表示热点的形状，有矩形（rectangle...
图片热点链接的设立方法
M13933813216的博客
08-16 2133
图片热点链接的设置方法一、热点的原理图片通过usemap=”#Map”属性将名称为”Map”的热点区域及连接映射到图片上。一般来说，图片的usermap属性对应的是map热点的name的属性值。所以如果页面中如果有多个图片添加热点，那么每一个图片的usemap值跟对应的热点地图的name值一定要一样，且不同的热点区域name值不可以相同，如果相同，那么图片上的热点区域将会以相同名称的第一个热点区域为
H5 图片热点区域
Tokki_的博客
07-02 2455
应用场景 不规则按钮的响应 一张图片设置多个响应域 使用方法 利用usemap属性，构建一个map标签 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>热点区域</title> </head> <body> <!--...
html图片热点
专栏
12-10 2641
 【转载】http://www.cnblogs.com/staven/p/4694175.html 学习HTML的图片热点技术，其实很简单，示例如下                         http://www.baidu.com" />                      usemap="#map" ,
HTML5+CSS3-HTML5入门
最新发布
2302_77230857的博客
08-06 712
,<meta>,<link>,<style>等，都属于头部标签可容纳的子标签。该标签必须在<head>之中，，一个HTML文档只能包含一个<title>标签，<title>开始标签和
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

样子2018

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值