图像热点&图像映射
图像映射
图像映射也称为图像热点。
作用:
让同一张图片上的不同区域,可以实现多个不同的超链接功能。
图示:
<map>图像映射三步走:
图像映射的实现需要三方面配合完成:
1、图像映射容器,就是一个img标签,需使用usemap属性与map标签建立联系
2、图像映射,就是一个map标签,需要使用name属性与map标签建立联系
3、热点区域,需要使用map标签的子标签area来建立热点区域
语法格式:
<img src="1.jpg" usemap="#Map" />
<map name="Map">
<area shape="热点形状" coords="坐标" href="链接" alt="替代文字" />
</map>
属性介绍:
<img />需要使用的属性:
usemap:#map的名称
<map>的属性:
name:设置热点区域的名称
<area>的常用属性:
shape:设置热点区域的形状
rect(矩形)、
circle(圆形)、
polygon(多边形)
coords:热点区域的位置坐标,根据shape的不同而不同。
对于rect,坐标为(x1,y1,x2,y2),(x1,y1)矩形左上角,(x2,y2)右下角
对于circle,坐标为(x,y,r),(x,y)圆心坐标,r为半径
对于polygon,坐为(x1,y1,x2,y2,…xn,yn),(xn,yn)为第n个顶点坐标
举例:
- 矩形
- 圆形
- 不规则多边形
图像热点&图像映射的更多相关文章
- dreamweaver中的 map怎么调用?_制作热点图像区域
我们浏览网页时,经常看到一些图片上会出现特别的超链接,即在一张图片上有多个局部区域和不同的网页链接,比如地图链接. 这就是映射图像(Image Map),它是指一幅根据链接对象不同而被人为划分为若干指 ...
- PHP图像裁剪为任意大小的图像,图像不变形,不留下空白
<?php /** * 说明:函数功能是把一个图像裁剪为任意大小的图像,图像不变形 * 参数说明:输入 需要处理图片的 文件名,生成新图片的保存文件名,生成新图片的宽,生成新图片的高 */ fu ...
- Atitti 图像处理 图像混合 图像叠加 blend 原理与实现
Atitti 图像处理 图像混合 图像叠加 blend 原理与实现 混合模式 编辑 本词条缺少信息栏,补充相关内容使词条更完整,还能快速升级,赶紧来编辑吧! 混合模式是图像处理技术中的一个技术名词,不 ...
- 本图片处理类功能非常之强大可以实现几乎所有WEB开发中对图像的处理功能都集成了,包括有缩放图像、切割图像、图像类型转换、彩色转黑白、文字水印、图片水印等功能
import java.awt.AlphaComposite; import java.awt.Color; import java.awt.Font; import java.awt.Graphic ...
- opencv 3 core组件进阶(2 ROI区域图像叠加&图像混合;分离颜色通道、多通道图像混合;图像对比度,亮度值调整)
ROI区域图像叠加&图像混合 #include <opencv2/core/core.hpp> #include <opencv2/highgui/highgui.hpp&g ...
- RGB-D(深度图像) & 图像深度
RGB-D(深度图像) 深度图像 = 普通的RGB三通道彩色图像 + Depth Map 在3D计算机图形中,Depth Map(深度图)是包含与视点的场景对象的表面的距离有关的信息的图像或图 ...
- 利用flash精确定位asp.net的图像热点区域
Asp.net的热点区域控件非常有用,但是对于热点区域如何精确定位,设定矩形,圆和多边形要素点的位置,用flash能够精确定位,在flash中制作热点区域的部分,可以是矩形,图形或者文字,然后对于这部 ...
- HTML5新特性之Canvas+drag(拖拽图像实现图像反转)
1.什么是canvas 在网页上使用canvas元素时,会创建一块矩形区域,默认矩形区域宽度300px,高度150px.. 页面中加入canvas元素后,可以通过javascript自由控制.可以在其 ...
- CSS 背景图像 重复图像
重复图像 background-repeat 属性可以重复图像,这对于小图片来说是福音. background-repeat 属性有6个值: repeat 背景图像在垂直方向和水平方向都重复 repe ...
随机推荐
- python flask 部署
flask在开发的时候,经常启动本身进行调试(本身可以设置监听的端口,例如 在app.run(port=8088),当然默认不设置端口为5000). 但生产环境经常使用uswgi充当flask的宿主, ...
- Codeforces Gym 100637B B. Lunch 找规律
B. Lunch Time Limit: 20 Sec Memory Limit: 256 MB 题目连接 http://codeforces.com/gym/100637/problem/B Des ...
- IOS使用APNS推送Payload字节数限制导致推送不成功
这2天须要在推送上加上脚本,找到了badge方法能够加脚本.加上后可是怎么推送也不成功.郁闷了好久.在网上查找相关资料. 最终被我找到原因: "Payload--最多256bytes. &q ...
- Online Schema Upgrade in MySQL Galera Cluster using TOI Method
http://severalnines.com/blog/online-schema-upgrade-mysql-galera-cluster-using-toi-method As a fo ...
- 【ZZ】MySql语句大全:创建、授权、查询、修改等
http://blog.csdn.net/evankaka/article/details/45580845
- divide-conquer-combine(4.1 from the introduction to algorithm)
this example is from chapter 4 in <the introduction to algorithm> the main idea is all showed ...
- 分布式文件系统之GPFS
GPFS是IBM公司通过完善和发展其Tiger Shark文件系统发展而来.GPFS通过共享磁盘结构来实现其强大的扩展性.一个GPFS系统由许多集群节点组成,GPFS文件系统和应用程序在上面运行.这些 ...
- iOS利用单例实现不同界面间的数据传输
首先写一个单例类,继承NSObject check.h文件中 @property(strong ,nonatomic) UITable * Table; @property(strong ,nonit ...
- win7关机命令
通过 DOS 命令 “shutdown” 来实现 Windows7 系统下的定时关机功能. 使用at 命令 at 12:00 shutdown -s,取消:at/delete shutdown -s ...
- linux 安装xamp
前一久用上了ubuntu,想折腾下小窝,懒得自己去装Php啊,apache 之类的东西,刚才用上xampp,直接点,等以后要涉及深再弄,暂时先用着xampp.还不错,很好用,这里简单说下安装,(我是新 ...