我来到这个网站,而冲浪:http://kurdon.com/?lang=en_US 和它的头版它有一个伊拉克地图,你可以在其中悬停,它会突出显示的部分。点击它将链接到一个零件的页面。此功能使用什么语言?
我在想,他用这个功能是什么?是javascript/jquery,或者类似的东西?
我来到这个网站,而冲浪:http://kurdon.com/?lang=en_US 和它的头版它有一个伊拉克地图,你可以在其中悬停,它会突出显示的部分。点击它将链接到一个零件的页面。此功能使用什么语言?
我在想,他用这个功能是什么?是javascript/jquery,或者类似的东西?
他们只使用JavaScript的地图。
在地图的右侧是包含此链接:
onmouseover="change_map(1);"
在页面上内联函数定义:
function change_map(region) {
var MapItem = document.getElementById("imageRegions");
var ListItem = document.getElementById("region_" + region);
MapItem.style.backgroundImage = 'url(/images/region_' + region + '.gif)';
MapItem.style.backgroundPosition = '0px 0px';
MapItem.style.backgroundRepeat = 'no-repeat';
ListItem.style.color = "#D0630A";
return true;
}
本身被实现地图的区图像映射。
准确完整的答案。 +1。做得好。 – 2011-12-23 19:02:44
您可以使用HTML图像映射来做到这一点,但我不确定它们是否已被弃用。
请参见:http://en.wikipedia.org/wiki/Image_map#Definition_in_HTML
它只是JavaScript的操纵CSS。
这是一个HTML图像映射,结合附加到onmouseover
和onmouseout
事件的javascript效果。
图像映射通过坐标定义区域,并且javacript会更改颜色并应用其他效果。
请尝试查看Chrome Web Developer工具或Firebug中的页面源以查看更多信息。
只是看起来像JavaScript来我使用地图和设置正确的COORDS为不同的区域,然后改变,当有人做鼠标悬停/鼠标移开
看起来像一些脚本的颜色。没有Flash或Silverlight插件的标志 – 2011-12-23 18:58:31
+1这是一篇写得很好的页面,感谢您发布它。 – rfmodulator 2011-12-23 19:02:18