How to add hover effect to an image in specific location using css or jquery?

Question

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.

candle · Accepted Answer · 2015-03-28 05:08:23Z

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

edited Mar 28, 2015 at 5:08

answered Mar 28, 2015 at 5:01

candle

2,2333 gold badges18 silver badges24 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

candle Over a year ago

there is such question on stackoverflow : stackoverflow.com/questions/7844399/responsive-image-map ; hope this will help with responsive

Mohtisham Zubair · Accepted Answer · 2015-03-28 06:39:07Z

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

answered Mar 28, 2015 at 6:39

Mohtisham Zubair

948 bronze badges

2 Comments

leonardeveloper Over a year ago

It's only one image tho.

Mohtisham Zubair Over a year ago

then define areas as mentioned by candle

Collectives™ on Stack Overflow

How to add hover effect to an image in specific location using css or jquery?

2 Answers 2

1 Comment

2 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

2 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related