javascript替代使用地图和区域来映射图像

Question

我知道有两个与之相关的问题，但仍然没有一个有效的答案。 问题是：我想要一个带有可点击区域的图像，第一个解决方案是地图/区域，但如果你想要很多区域，那就太多了。

当我在google“hoteles en cancun”中搜索时：

http://www.google.com.mx/search?sourceid=chrome&ie=UTF-8&q=hoteles+en+cancun#sclient=psy-ab&hl=es&source=hp&q=hoteles+en+cancun&pbx=1&oq=hoteles+en+cancun&aq=f&aqi=&aql=&gs_sm=s&gs_upl=0l0l0l57647343l0l0l0l0l0l0l0l0ll0l0&bav=on.2,or.r_gc.r_pw.r_cp.,cf.osb&fp=f90396ce82f1d2e9&biw=1920&bih=674

他们绘制了一个带有可点击区域的小地图，但是没有usemap属性，也没有map / area标签，所以他们如何做到这一点？我在json格式的所有形状的响应中找到了一个js，但我找不到将它们与地图/区域以外的图像相关联的方法。

我问这个是因为我不想添加数百个区域标签，因为这种技术有点陈旧，我很欣赏推荐或更好的方法来实现这个任务

Answer 1

最好的方法是使用CSS sprites。使用可以使用任意数量的图像，然后利用背景位置将它们放在适当的位置。您甚至可以使用background-size，但仅限HTML5支持的浏览器!!