• Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 278
  • Last Modified:

How to pass id so that i don't need mulitiple jquery calls

Using this maphilight script, i am trying to make it so that when a user clicks the spot on a map, it stays active and lit.  I don't want to add a ton of calls for each box that can be lit.  Is there a way to call it once, by passing the id or something else.

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.5.2/jquery.min.js"></script>
	<script type="text/javascript" src="jquery.maphilight.min.js"></script>
	
	<script type="text/javascript">$(function() {
		
		$('.map').maphilight();
		
			
			$('#box1').click(function(e){
				//alert("#box1");
				e.preventDefault();
				var data = $('#box1').mouseout().data('maphilight') ||
				{};
				data.alwaysOn = !data.alwaysOn;
				$('#box1').data('maphilight', data).trigger('alwaysOn.maphilight');
			});
		
		
		$('#box2').click(function(e) {
            e.preventDefault();
            var data = $('#box2').mouseout().data('maphilight') || {};
            data.alwaysOn = !data.alwaysOn;
            $('#box2').data('maphilight', data).trigger('alwaysOn.maphilight');
        });
		$('#box3').click(function(e) {
            e.preventDefault();
            var data = $('#box3').mouseout().data('maphilight') || {};
            data.alwaysOn = !data.alwaysOn;
            $('#box3').data('maphilight', data).trigger('alwaysOn.maphilight');
        });
        
	});
	
	</script>
	
	
	<!---<cfoutput>#mapText#</cfoutput>
	<br><br>--->
	
	<script>
		<cfoutput>#mapText#</cfoutput>
	</script>

We would now like to understand in more detail what specifically, if anything, you particularly like about this information.<br><br>
Please <b>click once</b> on the concept items that you <b>like the most. (By this we mean which ones would motivate you to recommend this product).</b><br><br>
<i><font color=navy>You can click on up to 3 items. You will see <img src=http://www.mdlinx.com/mr_/survey_images/43503_2013/43503_2013_17.JPG> when scrolling over the clickable parts of the concept </font>
<p>
<img class="map" src="http://www.mdlinx.com/mr_/survey_images/43503_2013/43503_2013_9.png" width="950" height="672" border="0" usemap="#Map">
<map name="Map" id="Map">
<area id="box1" shape="rect" coords="609,538,922,597" href="#"  alt="orange box" onclick="addMapClick(this.id); return false;" />
<area id="box2" shape="rect" coords="589,284,948,538" href="#"  alt="graph" onclick="addMapClick(this.id); return false;" />
<area id="box3" shape="rect" coords="65,521,518,619"  href="#"  alt="Usage of Rice hydrolyzates for CMPA" onclick="addMapClick(this.id); return false;" />
<area id="box4" shape="rect" coords="366,396,583,521" href="#"  alt="The clinical tolerance of Aptamil RH" onclick="addMapClick(this.id); return false;" />
<area id="box5" shape="rect" coords="368,309,585,397" href="#"  alt="Therefore Aptamil RH is a perfect" onclick="addMapClick(this.id); return false;" />
<area id="box6" shape="rect" coords="26,419,302,480"  href="#"  alt="It has been clinically proven to" onclick="addMapClick(this.id); return false;" />
<area id="box7" shape="rect" coords="26,374,308,419"  href="#"  alt="Does not contain lactose" onclick="addMapClick(this.id); return false;" />
<area id="box8" shape="rect" coords="26,343,285,374"  href="#"  alt="Is cows milk and soy protein free" onclick="addMapClick(this.id); return false;" />
<area id="box9" shape="rect" coords="26,309,331,343"  href="#"  alt="Aptamil RH, designed by Nutricia" onclick="addMapClick(this.id); return false;" />
<area id="box10" shape="rect" coords="26,198,906,274"  href="#"  alt="Aptamil RH (Rice Hyrolyzate) is a new" onclick="addMapClick(this.id); return false;" />
<area id="box11" shape="rect" coords="26,145,912,198"  href="#"  alt="Many doctors have a positive opinion" onclick="addMapClick(this.id); return false;" />
<area id="box12" shape="rect" coords="26,61,710,145"   href="#"  alt="Treating Cows Milk Protein Allergy" onclick="addMapClick(this.id); return false;" />
<area id="box13" shape="rect" coords="728,29,912,133"  href="#"  alt="logo" onclick="addMapClick(this.id); return false;" />
</map>
<script>

var clickCounter
clickCounter = 0;
function addMapClick(clicktext)
{
var objectToHighlight = clicktext;
//alert(objectToHighlight);

var radioIndex = -1;

switch(clicktext)
{
case 'logo':
radioIndex = 0;
break;
case 'graph':
radioIndex = 1;
break;
case 'orange box':
radioIndex = 2;
break;
case 'Treating Cows Milk Protein Allergy':
radioIndex = 3;
break;
case 'Many doctors have a positive opinion':
radioIndex = 4;
break;
case 'Aptamil RH (Rice Hyrolyzate) is a new':
radioIndex = 5;
break;
case 'Aptamil RH, designed by Nutricia':
radioIndex = 6;
break;
case 'Is cows milk and soy protein free':
radioIndex = 7;
break;
case 'Does not contain lactose':
radioIndex = 8;
break;
case 'It has been clinically proven to':
radioIndex = 9;
break;
case 'Therefore Aptamil RH is a perfect':
radioIndex = 10;
break;
case 'The clinical tolerance of Aptamil RH':
radioIndex =11;
break;
case 'Usage of Rice hydrolyzates for CMPA':
radioIndex =12;
break;

}


if( (radioIndex!=(document.getElementById("cqhiddata4").value)-1) && (radioIndex!=(document.getElementById("cqhiddata5").value)-1) && (radioIndex!=(document.getElementById("cqhiddata6").value)-1) )
{
  clickCounter += 1;
}

if(clickCounter == 1)
{
  if( document.getElementById("cqhiddata4").value=='' )
   {
    document.getElementById("cqhiddata4").value=radioIndex+1;
    }
  else
   {
     document.getElementById("cqhiddata4").value='';
     clickCounter=clickCounter-1;
    }
}

if(clickCounter == 2)
{
  if( document.getElementById("cqhiddata5").value=='' )
   {
    document.getElementById("cqhiddata5").value=radioIndex+1;
     }
  else
   {
     document.getElementById("cqhiddata5").value='';
     clickCounter=clickCounter-1;
    }
}


if(clickCounter == 3)
{

  if( document.getElementById("cqhiddata6").value=='' )
   {
    document.getElementById("cqhiddata6").value=radioIndex+1;
    }
  else
   {
     document.getElementById("cqhiddata6").value='';
     clickCounter=clickCounter-1;
    }

}


}

</script>
<input type="hidden" name="cqhiddata4" id="cqhiddata4">
<input type="hidden" name="cqhiddata5" id="cqhiddata5">
<input type="hidden" name="cqhiddata6" id="cqhiddata6">

Open in new window

0
theideabulb
Asked:
theideabulb
  • 4
  • 4
1 Solution
 
leakim971PluritechnicianCommented:
use : $(this) :

	<script type="text/javascript">$(function() {
		
		$('.map').maphilight();
		
			
			$('#box1,#box2,#box3').click(function(e){ // or use a common class
				e.preventDefault();
				alert( $(this).attr("id") );
				var data = $('#box1').mouseout().data('maphilight') || {};
				data.alwaysOn = !data.alwaysOn;
				$(this).data('maphilight', data).trigger('alwaysOn.maphilight');
			});
        
	});
	
	</script>

Open in new window

0
 
theideabulbAuthor Commented:
when you click to turn off the highlight, it seems to be shutting others off as well.  For example you click box 1,2,3 and then decide to unclick box 3, it's shutting of the others as well.
0
 
leakim971PluritechnicianCommented:
please share a link to see your page
did you fix my mistake line 9 : $(this) instead $('#box1')
0
Free Tool: Site Down Detector

Helpful to verify reports of your own downtime, or to double check a downed website you are trying to access.

One of a set of tools we are providing to everyone as a way of saying thank you for being a part of the community.

 
theideabulbAuthor Commented:
here is a link you can try it.  

http://www.fairhavenpianolessons.com/jquery/test.html
0
 
leakim971PluritechnicianCommented:
don't use $(this).click(..
but : $('#box1,#box2,#box3').click(...
0
 
theideabulbAuthor Commented:
ok, it seems like its working, does everything look right to you?
0
 
leakim971PluritechnicianCommented:
look fine now
0
 
theideabulbAuthor Commented:
Thank you!
0
Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

Join & Write a Comment

Featured Post

Free Tool: Subnet Calculator

The subnet calculator helps you design networks by taking an IP address and network mask and returning information such as network, broadcast address, and host range.

One of a set of tools we're offering as a way of saying thank you for being a part of the community.

  • 4
  • 4
Tackle projects and never again get stuck behind a technical roadblock.
Join Now