Tutorial :jquery how to color area dynamically



Question:

I have image map like this

<map name="imgmap">  <area shape="poly" coords="63,10,64,38,89,37,91,10" href="#" id="x1"></map>  

and how can I color that area dynamically with jquery like

("#x1").color('red')  

?


Solution:1

you can try using the maphilight plugin of jquery. it does what you want to achieve - http://davidlynch.org/blog/2008/03/maphilight-image-map-mouseover-highlighting/


Solution:2

Originally I thought that this might work:

$("#x1").css("background-color", 'red')  

However, upon further investigation it become quite clear that there is no easy way to do what you want.
Perhaps, your aim could be achieved by absolute positioning of the special images under your main image and poping them up on $("#x1").hover().


Solution:3

use this code .... hopw it will help you...

<script>   $(function()    {        $('.map').maphilight({        fillColor: '008800'   });   var data = $('#id').data('maphilight') || {};     data.alwaysOn = !data.alwaysOn;   $('#id').data('maphilight', data).trigger('alwaysOn.maphilight');   });  


Note:If u also have question or solution just comment us below or mail us on toontricks1994@gmail.com
Previous
Next Post »