用CSS中的map标签制作单图多区域点击的示例
建站知识 2021-07-03 08:15www.168986.cn长沙网站建设
map标签
定义一个客户端图像映射。图像映射(image-map)指带有可点击区域的一幅图像。
area元素永远嵌套在map元素内部。area元素可定义图像映射中的区域。
img标签中的usemap属性可引用的map标签中的id或name属性(取决于浏览器),所以我们应向map标签添加id和name属性。
示例
例如我们想在狼蚁网站SEO优化一张图实现九个热点区域,不切图,就使用map标签。
用 ps 得到几个坐标
然后代码实现
CSS Code复制内容到剪贴板
- <!DOCTYPE html>
- <html lang="en">
- <head>
- <meta charset="UTF-8">
- <title>Document</title>
- </head>
- <body>
- <img src="cat.jpg" alt="" usemap="#catmap" >
- <map name="catmap">
- <area shape="rect" coords="0,0,148,139" href ="http://.baidu." target ="_blank" alt="">
- <area shape="rect" coords="148,139,295,0" href ="http://.sina." target ="_blank" alt="">
- <area shape="rect" coords="295,0,439,140" href ="http://.qq." target ="_blank" alt="">
- <area shape="rect" coords="148,139,0,340" href ="http://.163." target ="_blank" alt="">
- <area shape="rect" coords="148,139,296,340" href ="http://.soso." target ="_blank" alt="">
- <area shape="rect" coords="296,340,439,140" href ="http://sf.gg" target ="_blank" alt="">
- <area shape="rect" coords="0,340,148,493" href="http://.zhihu." target ="_blank" alt="">
- <area shape="rect" coords="148,493,296,340" href="http://z." target ="_blank" alt="">
- <area shape="rect" coords="296,340,436,490" href="http://jd." target ="_blank" alt="">
- </map>
- </body>
- </html>
就是这样。
关于area
area 可以是圆形(circ),多边形(poly),矩形(rect),不同形状要选取不同的坐标(coords).
圆形shape="circle",coords="x,y,z"
x,y为圆心坐标(x,y),z为圆的半径
多边形shape="polygon",coords="x1,y1,x2,y2,x3,y3,..."
每一对x,y坐标都定义了多边形的一个顶点(0,0) 是图像左上角的坐标)。定义三角形至少需要三组坐标;高纬多边形则需要更多数量的顶点。
矩形shape="rectangle",coords="x1,y1,x2,y2"
第一个坐标是矩形的一个角的顶点坐标,另一对坐标是对角的顶点坐标,"0,0" 是图像左上角的坐标。请注意,定义矩形实际上是定义带有四个顶点的多边形的一种简化方法。(就是说,知道对角的两个点的坐标就行了。)
上一篇:CSS Normalize文件配置示例
下一篇:详解CSS中的规则声明
长沙网站设计
- 如何自己建一个网站 自己想建个网站,怎么建
- 如何制作网站免费建站 创建网站免费注册
- html简单网页代码 html简单网页代码超链接
- dreamweaver网页制作 dreamweaver网页制作模板
- 上海网站建设 上海网站建设制作微信
- 如何制作网站和网页 如何制作一个网页
- html网页制作代码大全 端午节html网页制作代码大
- app开发公司 app开发公司前十名
- html网页制作 html网页制作文字居中
- app制作一个需要多少钱 请人制作一个app多少钱
- 成都网站制作 成都网站制作维护
- 百度建一个网站多少钱 百度做个公司网站要多少
- html+css网页制作成品 web网页制作成品css+javascrip
- html网页制作案例 html网页设计案例
- html+css网页制作成品 web网页制作成品css+javascrip
- 个人网站模板 个人网站模板HTML