“基于图片的链接”的版本间的差异
来自CloudWiki
(创建页面,内容为“==基于图片的链接== ==图片映射功能的实现==”) |
|||
第2行: | 第2行: | ||
==图片映射功能的实现== | ==图片映射功能的实现== | ||
+ | *我们经常会给一张图片绑定一个超链接,以供用户欣赏大图或者跳转页面。HTML有个图像映射的功能,可以在一张图片的不同区域绑定链接,让用户可以有更新奇的体验。 | ||
+ | ===开启图像映射=== | ||
+ | *给<img>标签设置usemap属性从而开启一张图片的映射功能。 | ||
+ | <nowiki><img src = "image1.jpg" alt = "图片1" usemap = "#umap" /></nowiki> | ||
+ | *这里的usemap的属性值为<map>标签的id值,下文会提到。 | ||
+ | ===设置映射区域=== | ||
+ | *图片开启了映射后,应该给图片定义若干个'''映射区域'''。我们用<map>标签来包裹这些映射区域。<map>标签的id值必须和图片的usemap属性值对应。 | ||
+ | <map name = "umap" id = "umap"> | ||
+ | <area shape = "rect" coords = "20,20,100,100" href = "image2.jpg" alt = "图片2" /> | ||
+ | <area shape = "circle" coords = "200,200,10" href = "image3.jpg" alt = "图片3" /> | ||
+ | <area shape = "poly" coords = "0,0,110,260" href = "index.html" alt = "主页" /> | ||
+ | </map> | ||
+ | *<area>标签必须嵌套在<map>内部,用来定义映射区域。 | ||
+ | *shape属性定义映射区域的形状 | ||
+ | |||
+ | rect为矩形 | ||
+ | |||
+ | circle为圆形 | ||
+ | |||
+ | poly为多边形 | ||
+ | |||
+ | *coords定义了形状的坐标与半径 | ||
+ | <map name = "umap" id = "umap"> | ||
+ | <area shape = "rect" coords = "x1,y1,x2,y2" /> | ||
+ | //x1,y1,x2,y2为矩形的左上角和右下角坐标。 | ||
+ | <area shape = "circle" coords = "x1,y1,r" /> | ||
+ | //x1,y1,r为圆心的坐标和半径。 | ||
+ | <area shape = "poly" coords = "x1,y1,x2,y2,.....,xn,yn" /> | ||
+ | //x1,y1,x2,y2,..,xn,yn为多边形的n个坐标点,最后一个点的坐标应该与第一个相同,若不同浏览器会自动补全。 | ||
+ | </map> | ||
+ | 坐标和半径都是相对于像素而言,左上角为像素的 0,0 点,你可以用图片编辑工具来确定任一点的像素坐标。 | ||
+ | *href映射到图片或者页面 | ||
+ | href = "index.html" | ||
+ | href = "image.jpg" | ||
+ | *另外<area>标签也可以设置target属性,用来设置在新窗口或者本窗口打开新页面。 | ||
+ | target = "_blank" | ||
+ | target = "_self" | ||
+ | *一个例子:将下面的代码贴到[http://www.w3school.com.cn/tiy/t.asp?f=html_basic W3C编辑器]上实验 | ||
+ | <nowiki><html> | ||
+ | <head> | ||
+ | |||
+ | </head> | ||
+ | <body> | ||
+ | <img src = "http://upload-images.jianshu.io/upload_images/5099997-d59bd279ff414757.jpg?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240" usemap = "#umap" alt = "猫和狗" /> | ||
+ | <map id = "umap" name = "umap"> | ||
+ | <area shape = "rect" coords = "220,180,420,400" href = "http://upload-images.jianshu.io/upload_images/5099997-b7d90c81195aad07.jpg?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240" alt = "狗" target = "_blank" /> | ||
+ | <area shape = "circle" coords = "685,340,130" href = "http://upload-images.jianshu.io/upload_images/5099997-1772a40d0046b6e5.jpg?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240" alt = "猫" target = "_blank" /> | ||
+ | </map> | ||
+ | </body> | ||
+ | </html></nowiki> | ||
+ | |||
+ | |||
+ | |||
+ | |||
+ | |||
+ | '''参考文档:''' | ||
+ | [1]HTML图像映射 http://www.jianshu.com/p/85c2f6e48724 |
2017年11月14日 (二) 01:15的版本
基于图片的链接
图片映射功能的实现
- 我们经常会给一张图片绑定一个超链接,以供用户欣赏大图或者跳转页面。HTML有个图像映射的功能,可以在一张图片的不同区域绑定链接,让用户可以有更新奇的体验。
开启图像映射
- 给<img>标签设置usemap属性从而开启一张图片的映射功能。
<img src = "image1.jpg" alt = "图片1" usemap = "#umap" />
- 这里的usemap的属性值为<map>标签的id值,下文会提到。
设置映射区域
- 图片开启了映射后,应该给图片定义若干个映射区域。我们用<map>标签来包裹这些映射区域。<map>标签的id值必须和图片的usemap属性值对应。
<map name = "umap" id = "umap"> <area shape = "rect" coords = "20,20,100,100" href = "image2.jpg" alt = "图片2" /> <area shape = "circle" coords = "200,200,10" href = "image3.jpg" alt = "图片3" /> <area shape = "poly" coords = "0,0,110,260" href = "index.html" alt = "主页" /> </map>
- <area>标签必须嵌套在<map>内部,用来定义映射区域。
- shape属性定义映射区域的形状
rect为矩形
circle为圆形
poly为多边形
- coords定义了形状的坐标与半径
<map name = "umap" id = "umap"> <area shape = "rect" coords = "x1,y1,x2,y2" /> //x1,y1,x2,y2为矩形的左上角和右下角坐标。 <area shape = "circle" coords = "x1,y1,r" /> //x1,y1,r为圆心的坐标和半径。 <area shape = "poly" coords = "x1,y1,x2,y2,.....,xn,yn" /> //x1,y1,x2,y2,..,xn,yn为多边形的n个坐标点,最后一个点的坐标应该与第一个相同,若不同浏览器会自动补全。 </map> 坐标和半径都是相对于像素而言,左上角为像素的 0,0 点,你可以用图片编辑工具来确定任一点的像素坐标。
- href映射到图片或者页面
href = "index.html" href = "image.jpg"
- 另外<area>标签也可以设置target属性,用来设置在新窗口或者本窗口打开新页面。
target = "_blank" target = "_self"
- 一个例子:将下面的代码贴到W3C编辑器上实验
<html> <head> </head> <body> <img src = "http://upload-images.jianshu.io/upload_images/5099997-d59bd279ff414757.jpg?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240" usemap = "#umap" alt = "猫和狗" /> <map id = "umap" name = "umap"> <area shape = "rect" coords = "220,180,420,400" href = "http://upload-images.jianshu.io/upload_images/5099997-b7d90c81195aad07.jpg?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240" alt = "狗" target = "_blank" /> <area shape = "circle" coords = "685,340,130" href = "http://upload-images.jianshu.io/upload_images/5099997-1772a40d0046b6e5.jpg?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240" alt = "猫" target = "_blank" /> </map> </body> </html>
参考文档: [1]HTML图像映射 http://www.jianshu.com/p/85c2f6e48724