html 图像映射（一个图像多个连接）

最新推荐文章于 2023-12-08 16:23:35 发布
最新推荐文章于 2023-12-08 16:23:35 发布
阅读量1.6w 收藏 22
点赞数 9
分类专栏： WEB开发 文章标签： html 导航 地图 图像映射
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qiantujava/article/details/18305709
版权

以前就见过那种导航地图，点击地图的不同省份分别跳到不同的连接，现在用html实现一下，简单的。

图像映射是指一个图像可以建立多个连接，就是在图像上面定义多个区域，每个区域连接到不同的地址。

效果如图：(可以直接分别点击四个人物头像试试！)


点击索隆，跳到索隆。


代码如下：

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
<script type="text/javascript">
</script>
</head>
<body>
	<img src="images/haizeiwang.jpg" usemap="#haizeiwang">
	<map name="haizeiwang">
		<!-- 娜美 --><area shape="rect" coords="360,60,500,400" href="http://b.hiphotos.bdimg.com/album/s%3D550%3Bq%3D90%3Bc%3Dxiangce%2C100%2C100/sign=d74caf65b4003af349badc650511b761/d439b6003af33a8708cf4f76c45c10385343b538.jpg?referer=d74e5572bb389b5061e8d462f3d6&x=.jpg" target="_blank">
		<!-- 乔巴 --><area shape="rect" coords="250,330,360,500" href="http://g.hiphotos.bdimg.com/album/s%3D550%3Bq%3D90%3Bc%3Dxiangce%2C100%2C100/sign=24bd57a9e2fe9925cf0c695504932fe2/2cf5e0fe9925bc3142f44ef45cdf8db1cb137034.jpg?referer=d7a90a9339c79f3dd6f6d000b0ea&x=.jpg" target="_blank">
		<!-- 山治 --><area shape="circle" coords="230,230,100" href="http://e.hiphotos.bdimg.com/album/s%3D550%3Bq%3D90%3Bc%3Dxiangce%2C100%2C100/sign=5e8ee94fb27eca80160539e2a118e6e0/9213b07eca806538e048eb7f95dda144ad348238.jpg?referer=4b70b4479f16fdfa817bf2deeed6&x=.jpg" target="_blank">
		<!-- 索隆 --><area shape="poly" coords="130,20,200,50,160,150,60,200,50,100,100,70" href="http://g.hiphotos.bdimg.com/album/s%3D550%3Bq%3D90%3Bc%3Dxiangce%2C100%2C100/sign=af1dc8ebd2a20cf44290feda46323a0b/b3b7d0a20cf431ad3d700c554936acaf2edd9838.jpg?referer=ccb657a9e2fe9925921b5d60d8d6&x=.jpg" target="_blank">
	</map>
	<!-- 
		shape : 有几个选择：rect : 矩形，coords对应的坐标为左上角和右下角。
						   circle:圆，coords对应的是圆心（x，y），和半径r。
						   poly：   多边形，coords对应的是每个点的坐标。
		coords：坐标，根据shape的值去定义。
		href：链接。
	 -->
</body>
</html>


小林望北
关注
  • 9
    点赞
  • 踩
  • 22
    收藏
    觉得还不错? 一键收藏
  • 4
    评论
专栏目录
用html给一张图片做多个热区链接,html 锚点链接 图像热区链接
weixin_35736086的博客
06-03 2592
锚点链接图像热区链接除了对整幅图像设置超链接外，还可以将图像划分为若干区域，这叫做"热区"，每个区域可设置不同的超链接。此时，包含热区的图像可以称为映射图像。要进行热区设置，首先需要在图像文件中设置映射图像名，格式为： 也就是说，此时需要使用标记的usemap属性，定义图像的映射图像名。然后，就要在图像中定义各个热区以及超链接了，主要语法为：……在该语法中又引入了两个标记：和。、标记用于包含多个标...
html一个图片链接四个,HTML图片怎么超链接
weixin_39761822的博客
06-21 1677
0回答2021-05-06浏览：9分类：其他问题1回答2021-05-06浏览：9分类：其他问题回答：2回答2021-05-06浏览：2分类：其他问题回答：超链接的代码是，把#替换成你要的链接就行，做成这样HTML要做好排版1回答2021-05-06浏览：13分类：其他问题回答：如果让本页转向新的页面则用： 如果需要打开一个新的页面进行转向，则用： 注意：上面的按钮加超链接只针对 IE 好用。火狐...
基于边缘最优映射的红外和可见光图像自动配准算法
02-23
针对同一场景的红外和可见光图像间一致特征难以提取和匹配的难题, 提出了一种在多尺度空间中基于边缘最优映 射的自动配准算法. 在由粗至细的尺度空间中, 算法分别采用仿射模型和投影模型作为参考图像和待配准图像间的空间变换 模型. 在每个尺度层上, 首先基于相位一致性方法提取两幅图像的边缘结构, 并在相应的空间变换模型下将在待配准图像中提 取的二值边缘映射到参考图像的边缘强度图上; 接着采用并行遗传算法寻找一组全局最优的模型参数, 使两幅图像间的结构 相似度最大. 在各层的寻优结束之后, 使用Powell 算法对全局寻优后的模型参数进行局部精化. 实验结果表明, 该算法能够充 分利用图像间的视觉相似结构, 有效地实现红外和可见光图像的自动配准.
HTML 图像映射
继续学习......
10-24 1085
<img src="被设置为图像映射的图片" usemap="map标签的name或者id（加上#)" alt="" /> <map name="图像映射名" id="图像映射名"> <area shape="circle" coords="180,139,14" href ="链接1" alt="" /> <area shape="rect" coords="129,161,220,350" href ="链接2" alt="" /> &lt.
python计算机视觉学习第三章——图像到图像的映射
weixin_69154165的博客
05-06 443
函数的第一步操作是检查点对两个数组中点的数目是否相同，如果不相同函数将会给出错误提示，对这些点进行归一化操作，使其均值为，方差为 ，因为算法的稳定性取决于坐标的表示情况和部分数值计算的问题，因此归一化非常重要，之后利用对应点对构造矩阵A，最小二乘解即为矩阵SVD分解后得到矩阵V的最后一行。最后，我们将矩阵的最后两个元素设置为零，以获得仿射变换的矩阵形式。包含尺度变换的二维刚体变换，上式的s向量指定了变换的尺度，R是角度为的旋转矩阵，是一个平移向量，s=1时，该变换甭管保存距离不变，此时变换为刚体变换。
如何通过HTML中的map标签给一个图片添加多个超链接，并且coodr属性跟随屏幕大小自动改变，移动端也同样适用！
孙_常乐的博客
05-18 3137
前两天公司和其他公司合作搞个活动，暂时需要一个页面上放一张海报，并且海报上多处区域要可以点击，当时自己想到的是利用map标签生成区域热点，但是分辨率不同热点区域在不同区域不准确。最后通过简单的几行jq搞定了。代码如下&lt;div style="margin:0 auto"&gt;&lt;img src="__STATIC__/images/concert_hall_02.jpg" width="...
html 图片映射，新手笔记
qq_42381370的博客
09-07 552
图片映射 可在图片指定位置指定区域做出点击的效果
XHTML 和html的笔记
qq_53366282的博客
03-09 146
什么是 XHTML ，HTML 表单......
HTML如何使用图片链接
最新发布
qq_74095822的博客
12-08 1385
总结不易，希望小宝们不要吝啬你们的👍哟(＾Ｕ＾)ノ~ＹＯ！！😀如有问题，欢迎评论区批评指正😁。
（11）html图像映射
mxd
04-17 769
图像映射可以将图像划分为不同的区域，每个区域
详解python-图像处理（映射变换）
12-25
记录下opencv的一些操作（图像映射变换），日后可以方便使用 先上一张效果图 图二和图三是同一种方法，只是变换矩阵不同，都是3点映射变换 图四使用的是4点映射变换 简单介绍下原理 图像都知道是3维（通道）的矩阵...
高动态范围图像色调映射的局部保留边缘多尺度分解
04-02
提出了使用该滤波器进行多尺度分解的方法，以处理具有三个细节层和一个基础层的高动态范围图像。 使用滤波器的多尺度分解可解决三个假设：1）基本层在所有地方均保留局部均值； 2）每个刻度的显着边缘在局部窗口中...
基于具有多个偏移高光谱图像的MAP模型的子像素映射
04-04
子像素映射的准确性可以通过合并辅助数据集（例如同一区域中的多个移位图像）来提供更多的子像素土地覆盖信息。 本文提出了一种基于最大后验（MAP）模型的亚像素映射框架，以利用多幅移位图像的互补信息。 在所提出...
学习多个线性映射以实现高效的单图像超分辨率
04-08
学习多个线性映射以实现高效的单图像超分辨率
ajaxFileUpload 异步上传文件简单使用
热门推荐
冰河世纪第二代
07-18 11万+
<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%> Insert title here $(function(){ //点击打开文件选择器 $("#upload").on('click', function() { $('#fileTo
使用 spring web 时候 web.xml 的配置
冰河世纪第二代
01-11 2万+
<web-app xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xmlns="http://java.sun.com/xml/ns/javaee" xsi:schemaLocation="http://java.sun.com/xml/ns/javaee http://java.sun.com/xml/ns/javaee/web-a
SpringMVC+Spring+Hibernate的小例子
冰河世纪第二代
10-29 2万+
Strusts2+Spring+Hibernate虽然是主流的WEB开发框架，但是SpringMVC有越来越多的人使用了，确实也非常好用，用得爽！ 这里实现了一个SpringMVC+Spring+Hibernate的小例子。注释都在代码里面。 项目各包的结构如下图： 1， 首先是pom.xml <project xmlns="http://maven.apache.org/
spring http invoker 实践
冰河世纪第二代
01-11 1万+
搞了半天，终于把一个 Spring http invoker 的小例子运行起来了。 服务器端： UserServices接口： package spring.services; public interface UserServices { public void printUser(); } UserServicesImpl实现类： package spring.service
写一个基于transformer的图像分类
09-19
### 回答1： 写一个基于 Transformer 的图像分类算法，需要考虑以下步骤： 1. 数据预处理：准备训练数据集和测试数据集，将图像转换为可以输入 Transformer 模型的数据格式，比如将图像转换为特征向量。 2. 模型构建：使用 Transformer 模型，设计网络结构，并初始化模型的参数。 3. 训练：使用训练数据集，训练模型，更新模型参数。 4. 评估：使用测试数据集，评估模型的性能，如准确率、召回率等。 5. 预测：使用训练好的模型，对新的图像进行分类预测。 注意，这只是一个大致的流程，具体实现可能有所不同，根据具体情况进行调整。 ### 回答2： Transformer模型最初是为了语言任务而设计的，但近年来也被用于计算机视觉领域，如图像分类。 基于Transformer的图像分类模型可以分为以下几个步骤： 1. 数据预处理：首先，我们需要将图像转换为数字表示形式。常用的方法是将图像像素值标准化到0-1范围，然后将其调整为固定大小。 2. 特征提取：传统的图像分类模型通常使用卷积神经网络（CNN）来提取图像特征。而基于Transformer的模型将每个像素都视为一个位置编码，并使用多层自注意力机制来捕捉像素之间的关系。这样可以综合考虑整张图像的全局信息。 3. Transformer编码器：在图像分类任务中，我们可以使用多个Transformer编码器层来对图像进行编码。每个编码器层都由多头自注意力机制和前馈神经网络组成。自注意力机制可用于捕获图像中的关键信息，前馈网络则用于对特征进行非线性变换。 4. 分类器：最后，我们可以在Transformer编码器的输出上添加一个全连接层，将图像特征映射到各个类别的概率分布。通常使用交叉熵损失函数进行训练，并使用梯度下降等优化算法进行模型的优化。 基于Transformer的图像分类模型在一些任务上已经取得了不错的效果，例如具有复杂背景或遮挡的图像分类。但因为Transformer模型的计算复杂度较高，所以在实际应用中需要更多的计算资源和训练样本。未来随着技术的发展，基于Transformer的图像分类模型有望在更多领域取得更好的性能。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 4
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值