复杂的HTML5图像地图



我有一张客厅的图片,我正在把它变成我正在开发的一个新网站的菜单。这个想法是,你可以点击房间里的某些项目,比如椅子、桌子、沙发等,然后进入所需的页面。我想知道是否有一种聪明的方法可以做到这一点。由于这些项目不是简单的形状,我不想使用标准的图像映射。

谢谢你的帮助!

我之所以回答,是因为谷歌搜索把我带到了这里。。。

因为你要求一个工具:

GIMP有一个非常好的图像地图创建功能。

在GIMP中打开您的图像,然后选择过滤器>Web>ImageMap

从那里,您可以通过在图像上绘制来创建图像地图。保存将生成HTML,然后您可以根据需要进行定制。

此工具看起来是一个立体图像映射器:http://www.image-maps.com/我建议用画布和SVG来做这件事,这会让这件事变得更容易,更专业。

正如Korvin所提到的,在SVG中执行此操作可能是最简单的选项,因为您可以将事件附加到SVG中的对象,而不必手动指定要侦听事件的特定区域。

如果你走这条路,我建议你使用RaphaelJS库,它有很好的语法和在IE预版本9中工作的优势。这里有一个演示,虽然它使用onmouseover而不是onclick,但它可能接近你想要实现的目标:

http://raphaeljs.com/australia.html

相关内容

  • 没有找到相关文章

最新更新