I came by this website, while surfing: /?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?

I came by this website, while surfing: http://kurdon./?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?

• javascript
• hover

• 1 Looks like some scripting. No sign of a Flash or Silverlight plugin – Bas Slagter Commented Dec 23, 2011 at 18:58
• 1 +1 That's a very well written page, thanks for posting it. – rfmodulator Commented Dec 23, 2011 at 19:02

5 Answers 5

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.

It's an HTML image map, bined 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.

You could do this with HTML image maps, although I'm not sure if they have been deprecated.

See: http://en.wikipedia/wiki/Image_map#Definition_in_HTML

It's just javascript manipulating the CSS.

just looks like JavaScript to me using a map and setting the right coords for the different regions and then changing the color when someone does mouseover / mouseout