一张图片多个链接 锚点

最新推荐文章于 2023-04-10 22:43:12 发布
最新推荐文章于 2023-04-10 22:43:12 发布
阅读量1.7k 收藏 3
点赞数
分类专栏： UI设计
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/hudeyong926/article/details/107175204
版权

img中的usemap属性：usemap里将图像定义为客户器端图像映射。

area将图片分割为不同区域：

area标签的shape属性的值rect为矩形，矩形的coords属性值有四个，分别是选取矩形图片定位的值,前两个表示左上角的定位值，后两个表示右下角的定位置；（多边形可以继续增加坐标)  
area标签的shape属性的值circle为圆形，圆形coords属性值有三个，前两个表示选取圆形图片的中心定位的值，第三个值表示半径 

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>点击图片不同地方跳转不同页面</title>
</head>
<body>
    <img src="planets.gif" width="145" height="126" alt="Planets" usemap="#planetmap">
    <map name="planetmap">
        <area shape="rect" coords="0,0,82,126" alt="Sun" href="http://www.baidu.com">
        <area shape="circle" coords="90,58,3" alt="Mercury" href="http://www.qq.com">
        <area shape="circle" coords="124,58,8" alt="Venus" href="http://www.sina.com">
    </map>
</body>
</html>

画完去github上拉一下代码：https://github.com/stowball/jQuery-rwdImageMaps

这个库非常好用，支持自适应。注意图片的大小设置与画第一点画map的大小保持一致。

方法二：图片用背景图，写几个a标签，变成块级元素，放链接就行了

<!doctype html>
<html>
<head>
    <meta  http-equiv="content-type" content="text/html;charset=utf-8">
    <style>
html,body {
	margin:0;
	width:100%;
	height:100%;
}
.screen {
	width:100%;
	height:100%;
	background-image:url('img/xkbg.png');
	background-size:100% 100%;
	background-repeat:repeat-x;
	background-position:center bottom;
}
.container{
	width: 10%;
	height: 10%;
	float:left;
}
.cell{
	width: 100%;
	height: 100%;
	//background:khaki;//这行色块可以去掉
}
.cell:hover{
    background: #3c22ff;
}
.url{
	display: block;
	width: 100%;
	height: 100%;
}
    </style>
    <title>场景</title>
    </head>
    <body>
		<div class="screen">
		<div class="container">
			<div class="cell"><a class="url" href="http://baidu.com">1这块有链接</a></div>
			<div class="cell">2这块没有链接</div>
			<div class="cell"><a class="url" href="http://baidu.com">3可换透明图片</a></div>
			<div class="cell"><a class="url" href="http://baidu.com">4可换透明图片</a></div>
			<div class="cell"><a class="url" href="http://baidu.com">5这块有链接</a></div>
			<div class="cell"><a class="url" href="http://baidu.com">6这块有链接</a></div>
			<div class="cell">7这块没有链接</div>
			<div class="cell"><a class="url" href="http://baidu.com">8可换透明图片</a></div>
			<div class="cell"><a class="url" href="http://baidu.com">9可换透明图片</a></div>
			<div class="cell"><a class="url" href="http://baidu.com">10这块有链接</a></div>
		</div>
		<div class="container">
			<div class="cell"><a class="url" href="http://baidu.com">1这块有链接</a></div>
			<div class="cell">2这块没有链接</div>
			<div class="cell"><a class="url" href="http://baidu.com">3可换透明图片</a></div>
			<div class="cell"><a class="url" href="http://baidu.com">4可换透明图片</a></div>
			<div class="cell"><a class="url" href="http://baidu.com">5这块有链接</a></div>
			<div class="cell"><a class="url" href="http://baidu.com">6这块有链接</a></div>
			<div class="cell">7这块没有链接</div>
			<div class="cell"><a class="url" href="http://baidu.com">8可换透明图片</a></div>
			<div class="cell"><a class="url" href="http://baidu.com">9可换透明图片</a></div>
			<div class="cell"><a class="url" href="http://baidu.com">10这块有链接</a></div>
		</div>
		<div class="container">
			<div class="cell"><a class="url" href="http://baidu.com">1这块有链接</a></div>
			<div class="cell">2这块没有链接</div>
			<div class="cell"><a class="url" href="http://baidu.com">3可换透明图片</a></div>
			<div class="cell"><a class="url" href="http://baidu.com">4可换透明图片</a></div>
			<div class="cell"><a class="url" href="http://baidu.com">5这块有链接</a></div>
			<div class="cell"><a class="url" href="http://baidu.com">6这块有链接</a></div>
			<div class="cell">7这块没有链接</div>
			<div class="cell"><a class="url" href="http://baidu.com">8可换透明图片</a></div>
			<div class="cell"><a class="url" href="http://baidu.com">9可换透明图片</a></div>
			<div class="cell"><a class="url" href="http://baidu.com">10这块有链接</a></div>
		</div>
		<div class="container">
			<div class="cell"><a class="url" href="http://baidu.com">1这块有链接</a></div>
			<div class="cell">2这块没有链接</div>
			<div class="cell"><a class="url" href="http://baidu.com">3可换透明图片</a></div>
			<div class="cell"><a class="url" href="http://baidu.com">4可换透明图片</a></div>
			<div class="cell"><a class="url" href="http://baidu.com">5这块有链接</a></div>
			<div class="cell"><a class="url" href="http://baidu.com">6这块有链接</a></div>
			<div class="cell">7这块没有链接</div>
			<div class="cell"><a class="url" href="http://baidu.com">8可换透明图片</a></div>
			<div class="cell"><a class="url" href="http://baidu.com">9可换透明图片</a></div>
			<div class="cell"><a class="url" href="http://baidu.com">10这块有链接</a></div>
		</div>
		<div class="container">
			<div class="cell"><a class="url" href="http://baidu.com">1这块有链接</a></div>
			<div class="cell">2这块没有链接</div>
			<div class="cell"><a class="url" href="http://baidu.com">3可换透明图片</a></div>
			<div class="cell"><a class="url" href="http://baidu.com">4可换透明图片</a></div>
			<div class="cell"><a class="url" href="http://baidu.com">5这块有链接</a></div>
			<div class="cell"><a class="url" href="http://baidu.com">6这块有链接</a></div>
			<div class="cell">7这块没有链接</div>
			<div class="cell"><a class="url" href="http://baidu.com">8可换透明图片</a></div>
			<div class="cell"><a class="url" href="http://baidu.com">9可换透明图片</a></div>
			<div class="cell"><a class="url" href="http://baidu.com">10这块有链接</a></div>
		</div>
		<div class="container">
			<div class="cell"><a class="url" href="http://baidu.com">1这块有链接</a></div>
			<div class="cell">2这块没有链接</div>
			<div class="cell"><a class="url" href="http://baidu.com">3可换透明图片</a></div>
			<div class="cell"><a class="url" href="http://baidu.com">4可换透明图片</a></div>
			<div class="cell"><a class="url" href="http://baidu.com">5这块有链接</a></div>
			<div class="cell"><a class="url" href="http://baidu.com">6这块有链接</a></div>
			<div class="cell">7这块没有链接</div>
			<div class="cell"><a class="url" href="http://baidu.com">8可换透明图片</a></div>
			<div class="cell"><a class="url" href="http://baidu.com">9可换透明图片</a></div>
			<div class="cell"><a class="url" href="http://baidu.com">10这块有链接</a></div>
		</div>
		<div class="container">
			<div class="cell"><a class="url" href="http://baidu.com">1这块有链接</a></div>
			<div class="cell">2这块没有链接</div>
			<div class="cell"><a class="url" href="http://baidu.com">3可换透明图片</a></div>
			<div class="cell"><a class="url" href="http://baidu.com">4可换透明图片</a></div>
			<div class="cell"><a class="url" href="http://baidu.com">5这块有链接</a></div>
			<div class="cell"><a class="url" href="http://baidu.com">6这块有链接</a></div>
			<div class="cell">7这块没有链接</div>
			<div class="cell"><a class="url" href="http://baidu.com">8可换透明图片</a></div>
			<div class="cell"><a class="url" href="http://baidu.com">9可换透明图片</a></div>
			<div class="cell"><a class="url" href="http://baidu.com">10这块有链接</a></div>
		</div>
		<div class="container">
			<div class="cell"><a class="url" href="http://baidu.com">1这块有链接</a></div>
			<div class="cell">2这块没有链接</div>
			<div class="cell"><a class="url" href="http://baidu.com">3可换透明图片</a></div>
			<div class="cell"><a class="url" href="http://baidu.com">4可换透明图片</a></div>
			<div class="cell"><a class="url" href="http://baidu.com">5这块有链接</a></div>
			<div class="cell"><a class="url" href="http://baidu.com">6这块有链接</a></div>
			<div class="cell">7这块没有链接</div>
			<div class="cell"><a class="url" href="http://baidu.com">8可换透明图片</a></div>
			<div class="cell"><a class="url" href="http://baidu.com">9可换透明图片</a></div>
			<div class="cell"><a class="url" href="http://baidu.com">10这块有链接</a></div>
		</div>
		<div class="container">
			<div class="cell"><a class="url" href="http://baidu.com">1这块有链接</a></div>
			<div class="cell">2这块没有链接</div>
			<div class="cell"><a class="url" href="http://baidu.com">3可换透明图片</a></div>
			<div class="cell"><a class="url" href="http://baidu.com">4可换透明图片</a></div>
			<div class="cell"><a class="url" href="http://baidu.com">5这块有链接</a></div>
			<div class="cell"><a class="url" href="http://baidu.com">6这块有链接</a></div>
			<div class="cell">7这块没有链接</div>
			<div class="cell"><a class="url" href="http://baidu.com">8可换透明图片</a></div>
			<div class="cell"><a class="url" href="http://baidu.com">9可换透明图片</a></div>
			<div class="cell"><a class="url" href="http://baidu.com">10这块有链接</a></div>
		</div>
		<div class="container">
			<div class="cell"><a class="url" href="http://baidu.com">1这块有链接</a></div>
			<div class="cell">2这块没有链接</div>
			<div class="cell"><a class="url" href="http://baidu.com">3可换透明图片</a></div>
			<div class="cell"><a class="url" href="http://baidu.com">4可换透明图片</a></div>
			<div class="cell"><a class="url" href="http://baidu.com">5这块有链接</a></div>
			<div class="cell"><a class="url" href="http://baidu.com">6这块有链接</a></div>
			<div class="cell">7这块没有链接</div>
			<div class="cell"><a class="url" href="http://baidu.com">8可换透明图片</a></div>
			<div class="cell"><a class="url" href="http://baidu.com">9可换透明图片</a></div>
			<div class="cell"><a class="url" href="http://baidu.com">10这块有链接</a></div>
		</div>
		</div>
    </body>
</html>

 

@航空母舰
关注
专栏目录
jQuery 锚点链接平滑移动切换显示代码.rar
07-09
基于jQuery的锚链接平滑移动效果，点击一个链接，会看到一...延伸一点来说，不知大家是否能联想到多张图片轮流切换的效果没?把每个Div层内旋转一张图片，是不是就轻易实现 了这种效果?再加上你的美化，就慢慢完美了……
一张图片多个链接(影像地图)
Alice_1011的小屋
04-20 621
一张图片多个链接(影像地图)
制作图片锚点链接html,锚点链接怎么做
weixin_39823017的博客
06-04 1682
网页内容过多时我们可以使用锚点链接来进行位置的跳转，通过锚点链接我们不但可以指向文档，还能指向页面里的特定段落，这样就会便于我们来浏览网页中的内容，那么，锚点链接怎么实现呢？本篇文章就来给大家介绍锚点链接的实现方法。方法一：使用id来进行锚点定位我们来看具体的示例代码如下跳转<hello,I'm here!运行效果如下当点击“跳转”时会跳转到“hello,I'm here!”，效果如下会跳转...
html中的图片链接及锚点
张默的博客
12-04 2951
<a href="http://www.baidu.com" name="" target="_blank">百度</a> a:定义锚 href属性：url name：规定定义锚的名称 target:定义文档在什么地方打开，_blank为打开一个新窗口。 跳转到文档：href="文件名" 图片链接： <a href="url"><img ...
html中在图片中绘制指定区域实现相应的事件流程-area标签
JackieDYH的博客
10-26 1274
HTML <area> 标签 示例 <img src ="planets.gif" alt="Planets" usemap ="#planetmap" /> <map name="planetmap"> <area shape="rect" coords="0,0,110,260" href="sun.htm" alt="Sun" /> <area shape="circle" coords="129,161,10" href="mer
html路径+超链接+锚点
m0_49569569的博客
03-07 156
保姆及教学
前端 HTML
a258139的博客
02-08 309
HTML5基础
html5实现的图片滚动效果
08-23
在图片滚动效果中，这些元素可以用来包裹每一张图片，并提供相应的描述或标题。例如： ```html 图片1"> 这是图片1的描述 ``` 其次，CSS3（层叠样式表）在HTML5中发挥了重要作用，特别是在动画和过渡效果方面。...
HTML网页设计基础实验指导书2016.pdf
10-05
5. 锚点链接实践：在网页中设置多个锚点，创建相互间的链接，便于用户在页面内快速跳转。 在进行实验过程中，学生还需要理解URL（统一资源定位符）的概念，以及如何根据需要选择绝对路径和相对路径。同时，实验也...
Web前端开发技术-综合案例（无缝轮播图）.pptx
07-07
无缝轮播图是Web前端开发中常见的动态效果，用于展示多张图片或内容，并以平滑过渡的方式进行循环播放，给用户带来流畅的视觉体验。实现无缝轮播图的基本思路如下： 1. 图片布局：首先，将所有需要轮播的图片按照...
网页设计作业(二)平台答案.doc
12-23
- **鼠标经过图像**：需要准备两张图片，一张是原始图像，一张是鼠标经过时显示的图像，可设置提示文字和链接。 - **插入Flash**：需要两张图片制作鼠标经过效果，并且可以设置提示文字。 这些知识点构成了网页...
HTML基础
benben0729的专栏
05-17 337
html标记不区分大小写       html标记属性可有可无，有的标记没有属性，比如html\head\title等。       双边标记在开始与结束之间，单边标记没有内容       标记之间可以嵌套，但是必须顺序嵌套 &lt;meta http-equiv="content-type"content="text/html;charset=UTF-8" &gt;高速浏览器如何翻译汉字，con...
Android Studio属性学习（一）——shape属性
热门推荐
qq_41890177的博客
05-01 1万+
一、前提 在这里会讲解shape属性的各个元素，以及效果展示及使用 二、目标 shape 三、内容 1、首先创建一个shape.xml文件以及在布局文件中添加一个按钮用来展示添加属性后的样式 <?xml version="1.0" encoding="utf-8"?> <shape xmlns:android="http://schemas.android.com/...
html -- map标签
fupo
12-23 2540
shape 形状 1. 矩形 rect shape=“rect” coords=“x1,y1,x2,y2” 第一个坐标是矩形的一个角的顶点坐标，另一对坐标是对角的顶点坐标。“0,0”是图像左上角的坐标。 <area shape="rect" coords="10,50,30,60" href="up" alt="上"> </area> coords="10,50,30,60" 10,50：顶点（左上角）xy坐标 30,60: 对角（右下角）xy坐标 2. 圆形 circle
shape 填充 圆角矩形 圆形 环形
weixin_33744141的博客
03-24 422
属性使用中可能出现的问题：如果在某些手机中使用 shape 出现黑色填充背景，设置&lt;solid android:color="@color/transparent"/&gt;即可。Android中shape用于设定形状，可以在selector，layout等里面使用最常用属性shape 形状，取值有：rectangle矩形（默认），oval椭圆、圆corners  圆角solid 内部填充s...
Html5---3.插入图片+超链接+锚链接
C221127的博客
04-10 981
插入图片+超链接+锚链接
图像标记（HTML5语言）（超链接+描点链接）
qq_63533962的博客
04-03 626
1.要求： 制作一个花的网页对于其的介绍，可以在点击关键字的同时跳转目标网页，并且转到目标网页的图片并且能回到上一个网页。 2.效果展示： 3.制作过程： 首先在你所保存HTML5内容的文档新建一个images文件夹（在文件夹里下载几张你喜爱的几张花的照片） .建一个介绍花的总体的网页（这里我已经加入了超链接了）： 如下所示： <!DOCTYPE html> <html lang="en"> <head> <meta ...
area标签的使用
qq_41951724的博客
09-09 1158
area和map一起使用 注：一般img标签通过usemap属性使用map 如下例： <img src="planets.jpg" border="0" usemap="#planetmap" alt="Planets" /> <map name="planetmap" id="planetmap"> <area shape="circle" coords="1...
HTML图片热区map area的用法
qq_29902541的博客
04-22 458
2011-01-04 <area>标记主要用于图像地图，通过该标记可以在图像地图中设定作用区域（又称为热点），这样当用户的鼠标移到指定的作用区域点击时，会自动链接到预先设定好的页面。其基本语法结构如下： 1 <area 2 class=type 3 id＝Value 4 href＝url 5 alt＝text 6 shape＝area-shape 7 coods＝val...
g6自定义节点创建多个锚点
最新发布
05-09
在G6中，可以通过定义锚点数组来创建多个锚点。下面是一个示例代码： ```javascript const customNode = { shape: 'rect', label: 'Custom Node', anchorPoints: [ [0, 0.25], // 左侧中间 [0, 0.5], // 左侧居中 [0, 0.75], // 左侧底部 [0.33, 0], // 顶部居中 [0.67, 0], // 顶部居中 [1, 0.25], // 右侧中间 [1, 0.5], // 右侧居中 [1, 0.75], // 右侧底部 ], }; // 将自定义节点注册到 G6 中 G6.registerNode('custom-node', customNode); ``` 在上述代码中，我们定义了一个名为`customNode`的自定义节点，它包含一个`anchorPoints`属性，其中每个元素都是一个包含两个数字的数组，表示锚点在节点的相对位置。在上述示例中，我们定义了8个锚点，分别位于节点的左侧中间、左侧居中、左侧底部、顶部居中、底部居中、右侧中间、右侧居中和右侧底部。 然后，我们可以使用`G6.registerNode`方法将自定义节点`custom-node`注册到G6中，以便在图表中使用它。
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值