2011-12-23 73 views
4

我来到这个网站,而冲浪:http://kurdon.com/?lang=en_US 和它的头版它有一个伊拉克地图,你可以在其中悬停,它会突出显示的部分。点击它将链接到一个零件的页面。此功能使用什么语言?

我在想,他用这个功能是什么?是javascript/jquery,或者类似的东西?

+1

看起来像一些脚本的颜色。没有Flash或Silverlight插件的标志 – 2011-12-23 18:58:31

+1

+1这是一篇写得很好的页面,感谢您发布它。 – rfmodulator 2011-12-23 19:02:18

回答

9

他们只使用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; 
} 

本身被实现地图的区图像映射。

+0

准确完整的答案。 +1。做得好。 – 2011-12-23 19:02:44

5

这是一个HTML图像映射,结合附加到onmouseoveronmouseout事件的javascript效果。

图像映射通过坐标定义区域,并且javacript会更改颜色并应用其他效果。

请尝试查看Chrome Web Developer工具或Firebug中的页面源以查看更多信息。

1

只是看起来像JavaScript来我使用地图和设置正确的COORDS为不同的区域,然后改变,当有人做鼠标悬停/鼠标移开