html5 图片热点area，map的用法

今天看了一个html5在图片上面创建热点的标签，所谓图片热点就是给你一张图片然后你可以设置点击图片不同的位置进入不同的链接！如果下面是一张图片的话，里面在长方形、圆形、三角形区域都可以进入其他网页！

下面，我们来实例介绍map，area这些标签的用法！

1，制作矩形热点

(1),shape标签表示热点的形状，有矩形（rectangle），圆形（circle），多边形（polygon）和整个图片（default）

(2),coords是每个形状的坐标，不同形状坐标表示不同！上面矩形的坐标(x1,y1,x2,y2)，其中(x1,y1)是矩形左上角的坐标,(x2,y2)是矩形右下角的坐标

2，制作圆形热点

圆形的坐标(x,y,radius)，其中(x,y)是圆心的坐标，radius是圆的半径

3，制作多边形热点（下面是三角形）

多边形的坐标(x1,y1,x2,y2,x3,y3,...)有多少组(x,y)坐标就有几个角，也就是说，多边形每一个角的坐标都要在coords中！

注意：

1，coords里面的坐标是按照图片大小来的，不是按照浏览器窗口大小来的！所以图片的左上角的坐标是(0,0)，右下角是(图片的长，图片的宽)

2，一般这种确定你想要的区域的坐标，单靠眼睛看是不可能看出来的，所以你需要借助截屏工具来确定区域的坐标！打开截屏工具，从图片的左上角开始拉到你想要的那个点，显示的长和宽就是这个点的坐标！

想要每天及时获取王业楼的个人博客更新的内容吗？赶快添加微信公众号“ly89cn”，或者扫描下方的二维码吧！

本文来源于王业楼的个人博客，本文地址：http://www.ly89.cn/detailB/62.html

欢迎分享本文，转载请注明本文出处和地址

转载于:https://www.cnblogs.com/ly89cn/p/4964004.html

html5 图片热点area，map的用法相关推荐

前端：HTML/07/综合案例：月福首页，开发网站的流程，网站布局结构，排版准备，图片热点，网页多媒体
开发网站的一个流程 1,业务员与客户进行沟通,包括:风格,功能(论坛,留言板,支付,用户登录等) 2,业务员与美工沟通,制作网页效果图(首页,列表页,内容页) 3,制作人员开始切图排版,排成网页形式的 ...
3-综合案例：月福首页-多媒体-图片热点-框架
1.开发网站的一个流程业务员与客户进行沟通,包括:风格的.功能(论坛.留言板.支付.用户登录等) 业务员与美工沟通.制作网页效果图(首页.列表页.内容页) 制作人员开始切图排版,排成网页形式的后台 ...
3月20日html(二) 图片热点，网页划分，表单
1.图片热点: 规划出图片上的一个区域,可以做出超链接,直接点击图片区域就可以完成跳转的效果. <img src="../图片/5109de19b9c5b.jpg" widt ...
html5图片墙，超炫酷。
html5图片墙,可以跟着鼠标滚动. 一个css文件两个JavaScript文件一个html5文件图片可以自己设置,放在images里 css代码 /* hardware accelatator ...
easyui获取图片路径_在线计算图片热点植入位置的方法与流程
本发明涉及一种在线计算图片热点植入位置的方法,属于WEB应用技术领域. 背景技术: 为丰富页面的显示内容或查看更详细的图片信息,WEB页面的图片常常会添加一些热点信息,由于图片有不确定性,图片中热点的 ...
Dreamweaver 中图片热点连接的制作（热点工具）
一.Dreamweaver中的制作方法 DreamWeaver是MacroMedia公司出品的一个所见即所得的网页制作工具,它提供了非常强大的主页制作功能,而且使用起来非常的顺手.方便,目前正日益 ...
php分析图片水印,PHP开发的文字水印，缩略图，图片水印实现类与用法示例
本文实例讲述了PHP开发的文字水印,缩略图,图片水印实现类与用法.分享给大家供大家参考,具体如下: 1.实现类ImageToTest.class.php参考代码 class ImageToTest { ...
html5 图片上传，支持图片预览、压缩、及进度显示，兼容IE6+及标准浏览器
原文:html5 图片上传,支持图片预览.压缩.及进度显示,兼容IE6+及标准浏览器以前写过上传组件,见打造 html5 文件上传组件,实现进度显示及拖拽上传,兼容IE6+及其它标准浏览器,对付一 ...
js数组中foEach和map的用法详解 jq中的$.each和$.map
数组中foEach和map的用法详解相同点: 1.都是循环遍历数组(仅仅是数组)中的每一项. 2.forEach() 和 map() 里面每一次执行匿名函数都支持3个参数:数组中的当前项value, ...

html5 图片热点area，map的用法

html5 图片热点area，map的用法相关推荐

最新文章

热门文章