2

I'm working on an image map and when I hover on the state part of the image it will have an hover effect. Since this is just a .png file then is there any ways to add hover effect to a certain part of the image?

enter image description here

So when I hover over the star icon then the state color will change so is there any possible way to do this with css or jquery?

UPDATE: What I want to do is to get the location or coordinates of the star icon on the map and add hover effect to it.
NOTE: This image will be responsive.

leonardeveloper
  • 1,813
  • 1
  • 34
  • 58

2 Answers2

1

Try using html <area> tag. And then adding desired effects with javascript and css. Example code:

<area shape="poly" coords="2,5,32,1,33,22,51,36,33,57" title="The Americas">

There are short tutorials on image-maps with clickable/hover areas here and here.

And if you need ready mapping of countries you can find by simple google search. For example I found US map with images and HTML mapping here

candle
  • 1,963
  • 3
  • 15
  • 24
  • there is such question on stackoverflow : http://stackoverflow.com/questions/7844399/responsive-image-map ; hope this will help with responsive – candle Mar 30 '15 at 05:35
0

No need to get the location for the icon just use hover binder expression and get the state associated with it by corelation, so that not all icons and states not impacted by hover code. Let's say ur icon image name is star-icon and specific state map area name is stat-map-object :

     $( ".star-icon" ).hover(
        function() {
            // use co-relation to get the state object from this for current state
            $(this).closest(".map-state").addClass( "white" );
        }, function() {
            $(this).closest(".map-state").removeClass( "white" );
        }
    );
Mohtisham Zubair
  • 84
  • 7