【html】点击图片内链接进行跳转

博主因为工作中遇到，有些UI图片里有多个链接，要求用户可以点击图片内相关的链接进行跳转。

比如：以下是一张图片（非页面），但是要求点击图片不同位置，跳转到不同网址：

方法：

1.如果仅在PC端展示页面：

可以使用coords属性，具体参考网址：

HTML <a> 标签的 coords 属性

2.如果要求同时在PC端和手机端做展示：

可以对图片进行切割：（就是将一个大的图片拆成多个小图片，然后在有链接的小图片上加上 href链接）

<body><a href="#" class="img-box"><img src="/images/am_01.png" /></a><a href="#" class="img-box"><img src="/images/am_02.png" /></a><a href="#" class="img-box"><img src="/images/am_03.png" /></a><a href="#" class="img-box"><img src="/images/am_04.png" /></a><a href="https://你的链接/" class="img-box"><img src="/images/am_05.png" /></a><a href="#" class="img-box"><img src="/images/am_06.png" /></a><a href="#" class="img-box"><img src="/images/am_07.png" /></a></body>

【html】点击图片内链接进行跳转相关推荐

HTML点击图片实现提交或跳转链接页面
点击图片提交提交后实现跳转,但需要注意的是:鼠标光标放在图片上,显示的还是箭头(没有改变). .css input{width: 400px;height: 400px;border: 3px so ...
FineUI点击图片新链接打开
用的FineUI开原版框架,Image控件没有点击事件,好想要自己写JS,但是我JS一窍不通,看别人是这么写的 1 <script type="text/javascript" ...
VUE 点击图片直接进行页面跳转
<imgsrc="../assets/person.png"@click="docs"style="float: right; padding- ...
点击图片跳转链接php,朱秉桂教你如何给一张图片添加点击跳转链接代码
该楼层疑似违规已被系统折叠隐藏此楼查看此楼现在的PHP开源程序让很多人省的去敲代码,去钻研新功能,这不是,今天桂桂我就遇到了一个客户,想给自己的网站主页换一张图片,图片是换了,可是,点击图片的时候 ...
html图片下载链接怎么弄_html如何给图片加链接
html给图片添加超链接的方法:可以通过标签来设置超链接,通过href设置所要跳转的链接,然后在a标签下设置标签用来添加图片,当点击图片时就会跳转到目标链接中在HTML中使用超链接可以与网络上的另一 ...
Android 点击短信链接打开App
一.背景随着APP产品的迭代,运营的过程中往往会有一些活动希望通知到用户,或者唤起沉睡用户,就我们Android而言,当然有推送,长连接一类的方法,但是,基于国内的推送环境,只能APP自己启动长连接 ...
解密-大象跳转如何实现微信中点击链接直接跳到默认浏览器（不是在微信内置浏览器打开）
很多朋友不知道如何实现微信中点击链接直接跳到默认浏览器的功能是如何实现,经常能在各大论坛看到这样的提问,故特写了这篇文章分享一下之前在网上看到的一个在线使用该功能的平台的操作方法. 大象跳转在线操作步 ...
0005 前端 Html 04 AutoFileName 图片的显示文字链接图片链接页面内链接列表加超链接的列表
以下为学习笔记,用来备忘.交流工具:Sublime Text 3 渲染:谷歌浏览器 AutoFileName工具的安装安装过程参见添加Emmet插件参考我上面安装Emmet插件的过程,基本一样. ...
微信内置浏览器第三方网页分享链接给朋友以及转发到朋友圈无链接图片和链接描述的问题
解决问题:微信内置浏览器第三方网页分享链接给朋友以及转发到朋友圈无链接图片和链接描述的问题记录时间:2018-11-07 分享作者:小鹏谨记:一定要按步骤一步一步来先写一写思路:进入页面需要分享 ...

【html】点击图片内链接进行跳转

比如：以下是一张图片（非页面），但是要求点击图片不同位置，跳转到不同网址：

方法：

1.如果仅在PC端展示页面：

2.如果要求同时在PC端和手机端做展示：

【html】点击图片内链接进行跳转相关推荐

最新文章

热门文章