SVG map onclick background color should active black "#000"

JavaScript
1

Hi,

I am using this SVG India map in my project, on mouse hover colors are changing, but I need if user click on any State then it should redirect to other page and background color should active as Black “#000”.

http://www.acmearchitectural.com/indiamapsvgfiles/map.html#

I am trying below jquery code but no luck:

$(document).ready(function(e){
	$('path[id^="select"]').click(function(){
   $(this).css('background-color',"#ccc")
})

please help me out in this how i can fix this issue.

Regards

2

Hi.
In your map-interact.js on line 204 you will find this mousedown function

obj.mousedown(function(){
			obj.css({'fill':pin_config['points'][id]['downColor']});
		})

Notice that it is setting a 'downColor', now go to map-config.js and you will find the downcolor being set on all the IDs.

That is where you will make your changes to the color you want. It looks like you need to edit all 36 of them.

	'map_1':{
		'hover': 'ANDHRA PRADESH',  //region hover content
		'url':'#', //Goto URL
		'target':'same_window', //open link in new window:new_window, open in current window:same_window, or none for nothing.
		'upColor':'#EBECED', //region color when page loads
		'overColor':'#FFEE88', //region color when mouse hover
		'downColor':'#993366',//region color when mouse clicking
		'enable':true,//true/false to enable/disable this region
	},

There is also a spot there for your url to go

3

Thanks for your input, but I need if user click on any state background color black should active if user click any other state then parent color should be deactive.

Hope you got my point…

4

Sounds like your asking for two things that contradict each other.

If the user clicks on a state they will be on their way to a different page, why are you concerned about background colors at that point?

Regardless, all your background colors are being controlled by JS. This is really not a CSS issue.

5

Moved to the JavaScript forum.

6

Hi,

I am using SVG Map for India, it is working fine, but the issue is parent ID is not deactivating if I am clicking any other state, I need parent Id should deactive with “fill color - Grey” and child color should be active in Green.

http://www.acmearchitectural.com/indiamapsvgfiles/map.html#

attached image for reference, pleas take a look.

I am using below Jquery code for background:

<script>
 $(document).ready(function(e) {
   $('path[id^="map_"]').click(function(){
     $(this).css('fill', "green");
   });
 });
</script>

http://www.acmearchitectural.com/indiamapsvgfiles/map.html#

7

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.