关于如何在图片上加热点链接
来源:互联网 发布:淘宝网靠谱的茶叶店 编辑:程序博客网 时间:2024/03/28 21:02
可能你在项目中会遇到需要在图片上模块区域加个链接,点击以后可以转向一个页面;下面方法可以帮你解决问题。
这种效果的实质是把一幅图片划分为不同的热点区域,再让不同的区域进行超链接。要完成地图区域超链接要用到三种标签:<img><map><area>。
<img src="图片Url地址" usemap="#图的名称">
<map name="图的名称">
<area shape="形状" coords="区域座标列表" href="URL">
<!--可根据需要定义多少个热点区域-->
<area shape="形状" coords="区域座标列表" href="URL">
</map>
1、shape -- 定义热点形状
shape = rect :矩形
shape = circle :圆形
shape = poly : 多边形
2、coords -- 定义区域点的坐标
a.矩形:必须使用四个数字,前两个数字为左上角座标,后两个数字为右下角座标
例:<area shape=rect coords=100,50,200,100 href="URL">
b.圆形:必须使用三个数字,前两个数字为圆心的座标,最后一个数字为半径长度
例:<area shape=circle coords=100,100,50 href="URL">
c.任意图形(多边形):将图形之每一转折点座标依序填入
例:<area shape=poly coords="123,455,653,455,121,..." href="URL">
例子代码:
<img src="chinaMap.jpg" width="200" height="500" border="0" usemap="#chinaMap" /><map name="chinaMap" id="chinaMap"> <area shape="rect" coords="10,50,150,100" href="http://www.baidu.com" onFocus="this.blur()"/> <area shape="rect" coords="10,110,150,160" href="http://www.baidu.com" /> <area shape="rect" coords="10,170,150,220" href="http://www.baidu.com" /> <area shape="rect" coords="10,230,150,280" href="http://www.baidu.com" /> <!--<area shape="rect" coords="10,300,150,480" href="test.html" target="pcs"/> --> <!-- onFocus="this.blur()" 去掉虚线框 --></map>
- 关于如何在图片上加热点链接
- 如何使用dreamweave cc给图片加热点链接?
- 在图片上如何动态加热区 .net如何实现?
- 图片上加热点,可以加多个
- 京东店铺详情页如何做关联销售?如何给图片加热点链接?
- 为视频加热点
- 如何在一张图片上添加多个不同的链接-热点篇
- 在tabbar 上添加图片、红点
- 如何在百度地图上标注宾馆饭店(矢量点标注)并导出为图片
- 在GameDev上关于OO的链接
- 如何在WM上创建接入点
- 加热管发黑如何处理
- 使用html area标签在图片上设置链接
- 在页面上实现链接转化成二维码图片
- 如何在IE上显示tif图片
- 如何在上传的图片上写字
- 如何在上传的图片上写字
- 如何在图片上作滚动字幕
- 技术开发の语录文摘
- POJ 1177
- java List 排序 Collections.sort() 对 List 排序
- 银行卡的交易与结算流程
- The New C++ -- 变量 (2. 变量的赋值和输入)
- 关于如何在图片上加热点链接
- Java基础--static、this、super用法
- 想找个GG一起在互联网创业
- Android 4.0设计规范 优先导读 十大改变 (附全文翻译pdf)
- ubuntu9.04编译android2.3失败
- 银行卡的清分、对帐与清算
- 语音搜索
- 改善 C#程序的建议4:C#中标准Dispose模式的实现
- core文件截断的处理方法