What language is used for this feature?

Question

I came by this website, while surfing: http://kurdon.com/?lang=en_US and on the frontpage it has a map of iraq, in which you can hover, and it will highlight the parts. clicking it would, link it to the page of a part.

I was thinking, what did he use for this feature? is it javascript/jquery, or something like that?

Answer 1

They uses just javascript for the map.

At the right side of the map there are links which contains this:

onmouseover="change_map(1);"

And the function defined inline on the page:

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;
}

The areas of the map itself are realized by image maps.

Answer 2

It's an HTML image map, combined with javascript effects attached to the onmouseover and onmouseout events.

The image map defines the area via coordinates, and the javacript changes the color and applies the other effects.

Try viewing the source of the page in Chrome Web Developer tools or firebug to see more.