查看“基于图片的链接”的源代码
←
基于图片的链接
跳转至:
导航
,
搜索
因为以下原因,您没有权限编辑本页:
您所请求的操作仅限于该用户组的用户使用:
用户
您可以查看与复制此页面的源代码。
==基于图片的链接== *除了刚才这种文字链接,图片里面也可以放置链接 *[[文件:w4-11.jpg]] <a href="http://www.sict.edu.cn"><img src="sict5.png" alt="山东商职"></a> *一点击图片,就会进入山东商职的网站 *https://gss3.bdstatic.com/7Po3dSag_xI4khGkpoWK1HF6hhy/baike/w%3D268%3Bg%3D0/sign=91a487fe3887e9504217f46a2803347e/e7cd7b899e510fb32880ffaadb33c895d1430c75.jpg *源代码: <nowiki><html> <head> </head> <body> <a href="http://www.sict.edu.cn"><img src="sict5.png" alt="山东商职"></a> </body> </html></nowiki> 问题:我们发现为页面中的图像加入超链接后,默认情况下都带有一道黑框,有什么方法可以去掉它呢 ? ==图片映射功能的实现== *我们经常会给一张图片绑定一个超链接,以供用户欣赏大图或者跳转页面。HTML有个图像映射的功能,可以在一张图片的不同区域绑定链接,让用户可以有更新奇的体验。 *[[文件:w4-23.png]] ===开启图像映射=== *给<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" *一个例子: *[[文件:w4-23.png]] *将下面的代码贴到[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://www.jd.com" alt = "狗" target = "_blank" /> <area shape = "circle" coords = "685,340,130" href = "http://www.tmall.com" alt = "猫" target = "_blank" /> </map> </body> </html></nowiki> '''参考文档:''' [1]HTML图像映射 http://www.jianshu.com/p/85c2f6e48724
返回至
基于图片的链接
。
导航菜单
个人工具
登录
命名空间
页面
讨论
变种
视图
阅读
查看源代码
查看历史
更多
搜索
导航
首页
最近更改
随机页面
帮助
工具
链入页面
相关更改
特殊页面
页面信息