Need to make a responsive make has somekind of frame when a mousehover on the image

HTML & CSS
1

Hi guys this is my first post in this forum. nice to be part of this forum.

i have a HTML code like this :

<p align=“center”><img alt=“” src=“http://trikarsa.co.id/wp-content/uploads/2013/05/Julabo-page.jpg” usemap=“#MapMap” width=“510” height=“800” border=“0” /></p>
<map name=“MapMap”>
<area coords=“16,174,97,308” shape=“rect” href=“http://trikarsa.co.id/?page_id=336” target=“_blank” />
<area coords=“104,173,236,310” shape=“rect” href=“http://trikarsa.co.id/?page_id=356” target=“_blank” />
</map>

i put this code on my wordpress page. it work great. the map did work. but iwat to add somekind of frame when people hover the mouse on the selected area.

thanks before.

2

Hi, Welcome to Sitepoint:)

If you are looking for a hover effect when you mouse over coordinates on your image map then you will need some js or jquery unless your map is very simple.

http://davidlynch.org/projects/maphilight/docs/demo_usa.html

If your map is very simple with almost square sections you could probably overlay some html elements to popup a message but it all depends on what you are trying to achieve.

3

thank you for the answer. my map is actually simple which using lots of rectangular section sir. i will try it:)