CODEWITHSUNDEEP
javascriptjqueryhtmlcssimage
Jasper
Jasper

Reputation: 8705

Highlight Image Area - when a link is clicked

I have a Image (lets say a USA Map) on a web page, and i have various links (lets say State Names) below it (separate from the image).

When i click on a State Name link, that state area in the image (USA Map image) should be highlighted (or change color etc).

All examples i see are about highlighting the image area when you hover over image area itself, but i want to click on a separate link, and as a result highlight the image area.

Please advice with code example or ideas...

My Question is similar to this: Highlight Section of Mapped Image when Mouseover Text on Webpage
but i cannot understand that one...

Upvotes: 3

Views: 4983

Answers (3)

Jasper
Jasper

Reputation: 8705

The map area highlighting on mouseover is already provided by: jquery.maphilight.js. There are many examples of its usage of mouseover highlighting on the image itself.

To highlight image area, from a separate text link, here is what we can do:

Assuming your image map is:

<map name="mymapname">
    <area id="myAreaId" href="#" shape="poly" coords="32,71,116,77,142,81,145,125,34,
    106" alt="Link" title="Default behavior">
...
</map>

Then, you can mimic the mouseover of the image area, from the href link:

<a id="mylink" href="#" onmouseover="$('#myAreaId').trigger('mouseover');" 
onmouseout="$('#myAreaId').trigger('mouseout');">My Link</a>

This is not the neatest solution, but does the job.

Upvotes: 4

GilbertOOl
GilbertOOl

Reputation: 1309

This code must be helpful, i think !!!! is better with our class (example .usaMap) or ID (example #usaMap)

img:hover, img:focus {
opacity:1;
background-color:red;
}
img:not(:hover), img:not(:focus){
opacity:0.5;
background-color:black;
}

Upvotes: 0

Exception
Exception

Reputation: 8379

There are two approaches for this problem,

First is, take a full image and create image map using HTML, else this http://www.image-maps.com/ will make your life easier in creating image maps. On click of the link just apply styles on the part of image map.

Second and best is go with Google Maps API, you can find full documentation in google maps documentation.

But expecting the full source for this requirement does not make sense to me :), try using any of the options above.

Upvotes: -2

Related Questions