CODEWITHSUNDEEP
javascripthover
messi
messi

Reputation: 43

What language is used for this feature?

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?

Upvotes: 4

Views: 147

Answers (5)

Green Day
Green Day

Reputation: 664

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

Upvotes: 1

Armin
Armin

Reputation: 15938

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.

Upvotes: 9

Nico Burns
Nico Burns

Reputation: 17099

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.

Upvotes: 5

rfmodulator
rfmodulator

Reputation: 3738

It's just javascript manipulating the CSS.

Upvotes: 1

Logan Serman
Logan Serman

Reputation: 29870

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

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

Upvotes: 4

Related Questions