谷歌搜索图像地图和切片清楚地表明,它们不再是理想的工具.鉴于此,采用可点击的复杂形状的最佳方法是什么?
我已经完成了一些多个图像的工作,并使用z-index来改变外观,但是对于更复杂的图像(更适合多边形图像映射),是否有一个商定的最佳方法?
解决方法
我并没有真正看到图像地图有任何问题.
It’s still in HTML5.最大的缺点是你需要一个好的图像,这可能并不总是你想要的.
SVG
Using inline SVG似乎是创建复杂可点击元素的唯一替代方法. Browser support is decent,但不是普遍的.
这是一个可点击星形的例子,我用Inkscape创建了这个SVG,将其保存为“普通SVG”,删除了一些元数据,并添加了< a>标签.
<!DOCTYPE html> <body> <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"> </svg> <svg xmlns:dc="http://purl.org/dc/elements/1.1/" xmlns:cc="http://creativecommons.org/ns#" xmlns:rdf="http://www.w3.org/1999/02/22-rdf-Syntax-ns#" xmlns:svg="http://www.w3.org/2000/svg" xmlns="http://www.w3.org/2000/svg" version="1.1" width="744.09448" height="1052.3622" id="svg2"> <defs id="defs4" /> <!-- Added to inkscape file --> <a xlink:href="http://example.com"> <g id="layer1"> <path d="m 214.28571,506.6479 -48.81229,-77.46894 -91.489505,-3.70793 58.593515,-70.36247 -24.74537,-88.1575 85.02508,33.98254 76. +19603,-50.7764 -6.04513,91.36484 71.8371,56.77595 -88.76117,22.48403 z" id="path2985" style="fill:#000000;fill-opacity:1;stroke:#000000;stroke-width:1;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:+4;stroke-opacity:1;stroke-dasharray:none" /> </g> </a> </svg> </body>
You can also do more complex scripting
一个有用的库:svg.js,Raphaël(热门搜索结果,不是认可).
CSS
传统上,CSS对复杂形状的支持非常有限. “复杂的形状”是指任何不是矩形的东西.最近,你可以做更多,虽然它仍然不是很灵活.
>使用较大的边界半径来创建圆形
>(ab)使用边框创建三角形
>使用CSS3 transforms
这实际上可能足以满足某些用途,与SVG相比,它更容易创建这些形状.但是用CSS创建真正复杂的形状几乎是不可能的. CSS从未真正为此设计过.
帆布
为了完成,我还看了< cancas>元素,允许创建复杂的形状,但我还没有找到一种方法只使形状可点击.