html – 所以如果图像映射和切片出来了,那是什么？

谷歌搜索图像地图和切片清楚地表明,它们不再是理想的工具.鉴于此,采用可点击的复杂形状的最佳方法是什么？

我已经完成了一些多个图像的工作,并使用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>元素,允许创建复杂的形状,但我还没有找到一种方法只使形状可点击.

html – 所以如果图像映射和切片出来了,那是什么？

解决方法

相关推荐