Expand Collapse text based on Image Click location

yaknowss · Aug 20, 2013

I have an image that is a map of the USA. [URL unfurl="true"]http://www.tri-ed.com/branchmap.aspx[/url].
I want to have expandable/collapsible text displayed based on which city is clicked from the image Ex. Seattle would display Seattle branch info....Nashville would display Nashville info..And so on. I thought I could use GetElementbyID, but, not sure. Any other suggestions are greatly appreciated.

vacunita · Aug 20, 2013

You can use getElementById to target the correct info box you want to display.

You can also use several approaches to get the coordinates of where the image was clicked so you know what info box to display.

The more touchy point will be placing the info boxes in the correct location for the map. So that when you display them they are in the correct location.

You wouldn't want the Calgary info to open somewhere over Florida.

----------------------------------
Phil AKA Vacunita
----------------------------------
Ignorance is not necessarily Bliss, case in point:
Unknown has caused an Unknown Error on Unknown and must be shutdown to prevent damage to Unknown.

Web & Tech

yaknowss · Aug 20, 2013

I need the info to be displayed underneath the map where users would click on a particular city. Make sense?

yaknowss · Aug 20, 2013

Is there an example on how to use getElementById to target the correct info box to display?

jpadie · Aug 20, 2013

attach an event listener to the click event on the area elements and then use that.

the below uses jquery but you could rewrite to use native jquery. I'm not sure what you actually want, so the below gives you a few different options.

Code:

$(document).ready(function(){
 $('map#locations area').on('click', function(e){
  e.preventDefault();
  var url = $(this).attr('href');
  var bits = url.split('=');
  var id = bits[1];
  var city = $(this).attr('alt');
  alert('location id is ' + id + ' for city: ' + city);
  
  //remote load data
  $.ajax({
     url: url,
     success: function( data ){
       var html = $.parseHTML( data.responseText );
       var text = html.find('#ctl00_ContentPlaceHolder4_ContentBlock1').html();
       alert('retrieved text is ' + text);
     },
     dataType: 'html'
  });
 });
});

vacunita · Aug 20, 2013

I need the info to be displayed underneath the map where users would click on a particular city. Make sense?

Totally, and it will make coding it much easier.

Is there an example on how to use getElementById to target the correct info box to display?

There's probably hundreds if not thousands of examples online of how to use getElementById to target a specific element.
In your case I would probably build something like this:

Code:

<script type="text/javascript" >
function displayInfoBox(e)
{

	//alert(e.clientX + "----" + e.clientY); return;
	var boxes = document.getElementsByName('infobox');
	//alert(boxes.length);
	for(var i=0;i<=boxes.length-1;i++)
	{
		boxes[i].style.display='none';
	}	
	
	if((e.clientX>=423 && e.clientX<=500) && (e.clientY>=220 && e.clientY<=282))
	{
		document.getElementById('calgary').style.display='block';		
	}
	else if((e.clientX>=124 && e.clientX<=154) && (e.clientY>=225 && e.clientY<=241))
	{
		document.getElementById('seattle').style.display='block';	
	}
        ...
}
</script>

<style type="text/css">
#infoboxcontainer
{
	border:1px solid gray;	
}
#infoboxcontainer div.infobox
{
	[b]display:none;[/b]
	width:200px;
	height:60px;
	background-color:#464646;
}

#infoboxcontainer h1
{
	color:#fefefe;
}

</style>

</head>



<body>


<img src="CV/images/bgoffice.jpg" alt="mymap" onclick='displayInfoBox(event);'>
<div id='infoboxcontainer'>
	<div id='calgary' class='infobox' name="infobox">
		<h1>Calgary</h1>
	</div>

	<div id='seattle' class='infobox' name="infobox">
		<h1>Seattle</h1>
	</div>



</div>

</body>
</html>

event or e captures the coordinates being clicked on the Map, and then you can check where the image was clicked and show the appropriate box. Obviously you would need to know where in the image each location is, so you can set the coordinates accordingly.

You can uncomment the alerts in the code to see what each object is outputting.

Also note that I set all infoboxes to have a display of none via the CSS so they don't appear when the page loads. I also reset them all to none each time the function is called so opened infoboxes close before opening a new one.

----------------------------------
Phil AKA Vacunita
----------------------------------
Ignorance is not necessarily Bliss, case in point:
Unknown has caused an Unknown Error on Unknown and must be shutdown to prevent damage to Unknown.

Web & Tech

yaknowss · Aug 20, 2013

@vacunita... I followed your sample. I also included the image coordinates like you mentioned. However...nothing is happening when I click. Am I missing a step? @jpadie thank you for your response too. I am trying out yours as well. Below is my code, I commented out the coordinates to give you an understanding of what I'm using. Hope this helps! Thank you.

Code:

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Untitled Document</title>
<script type="text/javascript" >
function displayInfoBox(e)
{

	alert(e.clientX + "----" + e.clientY); return;
	var boxes = document.getElementsByName('infobox');
	alert(boxes.length);
	for(var i=0;i<=boxes.length-1;i++)
	{
		boxes[i].style.display='none';
	}	
	
	if((e.clientX>=334 && e.clientX<=592) && (e.clientY>=439 && e.clientY<=479))
	{
		document.getElementById('calgary').style.display='block';		
	}
	else if((e.clientX>=124 && e.clientX<=154) && (e.clientY>=225 && e.clientY<=241))
	{
		document.getElementById('seattle').style.display='block';	
	}
}
</script>
<style type="text/css">
#infoboxcontainer
{
	border:1px solid gray;	
}
#infoboxcontainer div.infobox
{
	display:none;
	width:200px;
	height:60px;
	background-color:#464646;
}

#infoboxcontainer h1
{
	color:#fefefe;
}

</style>


</head>

<body>
<img src='[URL unfurl="true"]http://dev.tri-ed.com/wp-content/uploads/2013/08/2013BranchMap.jpg'[/URL] alt='2013BranchMap' class='aligncenter size-medium wp-image-4756' onclick='displayInfoBox(event);' />
<div id='infoboxcontainer'>
	<div id='calgary' class='infobox' name="infobox">
		<h1>Calgary</h1>
	</div>

	<div id='seattle' class='infobox' name="infobox">
		<h1>Seattle</h1>
	</div>



</div>

<!--<div id="map">
  <map name="Map">
    <area shape="rect" coords="41,382,290,407" href="#" alt="Vancouver">
    <area shape="rect" coords="347,340,587,366" href="#" alt="Edmonton">
    <area shape="rect" coords="334,439,592,478" href="#" alt="Calgary">
    <area shape="rect" coords="635,445,889,485" href="#" alt="Winnepeg">
    <area shape="rect" coords="40,490,295,528" href="#" alt="Seattle">
    <area shape="rect" coords="46,597,293,628" href="#" alt="Portland">
    <area shape="rect" coords="45,669,302,701" href="#" alt="Rocklin">
    <area shape="rect" coords="44,708,297,741" href="#" alt="Sacramento">
    <area shape="rect" coords="42,749,300,775" href="#" alt="Union City">
    <area shape="rect" coords="339,628,592,660" href="#" alt="Denver North">
    <area shape="rect" coords="338,665,595,696" href="#" alt="Denver">
    <area shape="rect" coords="341,699,594,732" href="#" alt="Centennial">
    <area shape="rect" coords="338,736,594,770" href="#" alt="Colorado Springs">
    <area shape="rect" coords="342,790,592,825" href="#" alt="Grand Junction">
    <area shape="rect" coords="635,587,886,619" href="#" alt="Minneapolis">
    <area shape="rect" coords="635,770,882,803" href="#" alt="KC">
    <area shape="rect" coords="925,511,1180,540" href="#" alt="Scarsborough">
    <area shape="rect" coords="928,555,1184,586" href="#" alt="Toronto">
    <area shape="rect" coords="929,719,1178,747" href="#" alt="Chicago">
    <area shape="rect" coords="928,785,1176,818" href="#" alt="Detroit">
    <area shape="rect" coords="1223,405,1479,438" href="#" alt="Quebec">
    <area shape="rect" coords="1220,467,1476,497" href="#" alt="Montreal">
    <area shape="rect" coords="1218,512,1474,548" href="#" alt="Ottawa">
    <area shape="rect" coords="1519,502,1760,534" href="#" alt="Halifax">
    <area shape="rect" coords="1222,641,1482,678" href="#" alt="Buffalo">
    <area shape="rect" coords="1514,613,1760,640" href="#" alt="Boston">
    <area shape="rect" coords="1514,651,1772,686" href="#" alt="Milsford">
    <area shape="rect" coords="1515,692,1775,727" href="#" alt="Elmsford">
    <area shape="rect" coords="1515,730,1769,761" href="#" alt="Plainview">
    <area shape="rect" coords="1515,768,1761,802" href="#" alt="Woodbury">
    <area shape="rect" coords="1516,812,1761,847" href="#" alt="Cranbury">
    <area shape="rect" coords="1516,850,1758,883" href="#" alt="Pennsauken">
    <area shape="rect" coords="1524,894,1769,926" href="#" alt="Dc Metro">
    <area shape="rect" coords="1222,868,1467,902" href="#" alt="Pittsburgh">
    <area shape="rect" coords="37,854,296,881" href="#" alt="North Hills">
    <area shape="rect" coords="39,889,290,920" href="#" alt="Burbank">
    <area shape="rect" coords="43,940,289,971" href="#" alt="Riverside">
    <area shape="rect" coords="337,926,576,959" href="#" alt="Las Vegas">
    <area shape="rect" coords="334,964,588,995" href="#" alt="Phoenix">
    <area shape="rect" coords="338,1025,581,1061" href="#" alt="Alburquerque">
    <area shape="rect" coords="632,880,884,910" href="#" alt="Tulsa">
    <area shape="rect" coords="631,918,869,950" href="#" alt="OKC">
    <area shape="rect" coords="632,1024,878,1057" href="#" alt="Dallas">
    <area shape="rect" coords="927,897,1182,925" href="#" alt="Cinncinati">
    <area shape="rect" coords="924,1012,1181,1045" href="#" alt="Nashville">
    <area shape="rect" coords="1219,939,1464,970" href="#" alt="Raleigh">
    <area shape="rect" coords="1222,1027,1462,1058" href="#" alt="Charlotte">
    <area shape="rect" coords="1532,988,1778,1021" href="#" alt="Virginia Beach">
    <area shape="rect" coords="1224,1072,1471,1101" href="#" alt="Atlanta">
    <area shape="rect" coords="926,1064,1179,1094" href="#" alt="Little Rock">
    <area shape="rect" coords="927,1111,1182,1139" href="#" alt="Houston">
    <area shape="rect" coords="928,1158,1185,1190" href="#" alt="New Orleans">
    <area shape="rect" coords="1225,1178,1469,1211" href="#" alt="Orlando">
    <area shape="rect" coords="1222,1220,1468,1256" href="#" alt="Clearwater">
    <area shape="rect" coords="1223,1342,1469,1370" href="#" alt="Miami">
    <area shape="rect" coords="1517,1330,1767,1362" href="#" alt="San Juan">
    <area shape="rect" coords="633,1074,883,1104" href="#" alt="Forth Worth">
    <area shape="rect" coords="626,1161,887,1199" href="#" alt="Austin">
    <area shape="rect" coords="630,1267,891,1300" href="#" alt="San Antonio">
    <area shape="rect" coords="633,1316,900,1354" href="#" alt="McAllen">
    <area shape="rect" coords="41,1057,300,1089" href="#" alt="Garden Grove">
    <area shape="rect" coords="38,1094,299,1129" href="#" alt="Orange">
    <area shape="rect" coords="41,1141,309,1173" href="#" alt="San Diego">
  </map>
</div>-->

  
</body>
</html>

jpadie · Aug 21, 2013

my code will go back to the server to pick up the branch details. currently it only displays them in an alert box but it is the work of moments to have it displayed it a div below the map. Just add a placeholder below in the html

Code:

<div id="branchInformation"></div>

and in lieu of the code above, use this

Code:

$(document).ready(function(){
 $('map#locations area').on('click', function(e){
  e.preventDefault();
  var url = $(this).attr('href');
  $.ajax({
     url: url,
     success: function( data ){
       var text = data.find('#ctl00_ContentPlaceHolder4_ContentBlock1').html();
       $('#branchInformation').html( text ) ;
     },
     dataType: 'html'
  });
 });
});

as per my post, you will need to load jQuery too (or convert to standard javascript). to load jQuery add this to your <head></head> section

Code:

<script type="text/javascript" src="[URL unfurl="true"]http://code.jquery.com/jquery-1.10.2.min.js"></script>[/URL]

Just fyi - following your post above, the code I wrote is based on the page that you originally pointed us towards (i.e. that in which the area tags still have the full href in them). (obviously) the href is required for the branch data lookup unless you build an alternative api

yaknowss · Aug 21, 2013

@jpadie...Do I need to keep the image map active? You'll have to bare with me. I'm new to AJAX and jQuery calls. Here is what I have so far.

Code:

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Untitled Document</title>
<script type="text/javascript" src="[URL unfurl="true"]http://code.jquery.com/jquery-1.10.2.min.js">[/URL]
$(document).ready(function(){
 $('map#locations area').on('click', function(e){
  e.preventDefault();
  var url = $(this).attr('href');
  $.ajax({
     url: url,
     success: function( data ){
       var text = data.find('#ctl00_ContentPlaceHolder4_ContentBlock1').html();
       $('#branchInformation').html( text ) ;
     },
     dataType: 'html'
  });
 });
}); 
</script>
</head>

<body>
<img src='[URL unfurl="true"]http://dev.tri-ed.com/wp-content/uploads/2013/08/2013BranchMap.jpg'[/URL] alt='2013BranchMap' class='aligncenter size-medium wp-image-4756' onclick='displayInfoBox(event);' usemap='#map' width='576' height='465' />
<div id="branchInformation"></div>
    
</body>
</html>

yaknowss · Aug 21, 2013

@japdie, where I would I add the city information? When clicked from the map imaged, each city needs to display a physical address and an image below. Ex. When clicked on Seattle show Seattle info...Chicago show Chicago info, and so on.

jpadie · Aug 21, 2013

nope. you need the image and image map.
something like this should work ...

Code:

<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>Untitled Document</title>
<script type="text/javascript" src="[URL unfurl="true"]http://code.jquery.com/jquery-1.10.2.min.js"></script>[/URL]
<script type="text/javascript">
$(document).ready(function(){
 $("map area").on('click', function(e){
  e.preventDefault();
  var url = $(this).attr('href');
  
  console.log(url);
  $.ajax({
     url: url,
     success: function( data ){
	   var text = data.find('#ctl00_ContentPlaceHolder4_ContentBlock1').html();
       $('#branchInformation').html( text ) ;
     },
     dataType: 'html'
  });
 });
}); 
</script>
</head>

<body>
<map name="locations" id="locations">
  <area shape="rect" coords="389,300,469,312" href="[URL unfurl="true"]http://www.tri-ed.com/BranchLocation.aspx?id=9715"[/URL] alt="Raleigh" />
  <area shape="rect" coords="296,286,380,298" href="[URL unfurl="true"]http://www.tri-ed.com/BranchLocation.aspx?id=9740"[/URL] alt="Cincinatti" />
  <area shape="rect" coords="296,268,380,280" href="[URL unfurl="true"]http://www.tri-ed.com/BranchLocation.aspx?id=9705"[/URL] alt="Detroit" />
  <area shape="rect" coords="199,421,279,435" href="[URL unfurl="true"]http://www.tri-ed.com/BranchLocation.aspx?id=9718"[/URL] alt="McAllen" />
  <area shape="rect" coords="199,404,279,418" href="[URL unfurl="true"]http://www.tri-ed.com/BranchLocation.aspx?id=378"[/URL] alt="San Antonio" />
  <area shape="rect" coords="483,247,566,258" href="[URL unfurl="true"]http://www.tri-ed.com/BranchLocation.aspx?id=546"[/URL] alt="Woodbury" />
  <area shape="rect" coords="200,327,284,341" href="[URL unfurl="true"]http://www.tri-ed.com/BranchLocation.aspx?id=394"[/URL] alt="Dallas" />
  <area shape="rect" coords="200,342,284,356" href="[URL unfurl="true"]http://www.tri-ed.com/BranchLocation.aspx?id=9706"[/URL] alt="Fort Worth" />
  <area shape="rect" coords="105,308,190,321" href="[URL unfurl="true"]http://www.tri-ed.com/BranchLocation.aspx?id=372"[/URL] alt="Phoenix" />
  <area shape="rect" coords="106,328,191,341" href="[URL unfurl="true"]http://www.tri-ed.com/BranchLocation.aspx?id=9704"[/URL] alt="Albuquerque" />
  <area shape="rect" coords="10,365,97,378" href="[URL unfurl="true"]http://www.tri-ed.com/BranchLocation.aspx?id=334"[/URL] alt="San Diego" />
  <area shape="rect" coords="10,285,97,298" href="[URL unfurl="true"]http://www.tri-ed.com/BranchLocation.aspx?id=8594"[/URL] alt="Burbank" />
  <area shape="rect" coords="292,370,380,386" href="[URL unfurl="true"]http://www.tri-ed.com/BranchLocation.aspx?id=496"[/URL] alt="New Orleans" />
  <area shape="rect" coords="387,389,468,403" href="[URL unfurl="true"]http://www.tri-ed.com/BranchLocation.aspx?id=492"[/URL] alt="Clearwater" />
  <area shape="rect" coords="390,375,469,390" href="[URL unfurl="true"]http://www.tri-ed.com/BranchLocation.aspx?id=9399"[/URL] alt="Orlando" />
  <area shape="rect" coords="11,337,96,350" href="[URL unfurl="true"]http://www.tri-ed.com/BranchLocation.aspx?id=330"[/URL] alt="Garden Grove" />
  <area shape="rect" coords="11,350,96,363" href="[URL unfurl="true"]http://www.tri-ed.com/BranchLocation.aspx?id=9720"[/URL] alt="Orange" />
  <area shape="rect" coords="13,301,95,313" href="[URL unfurl="true"]http://www.tri-ed.com/BranchLocation.aspx?id=316"[/URL] alt="Riverside" />
  <area shape="rect" coords="11,272,95,284" href="[URL unfurl="true"]http://www.tri-ed.com/BranchLocation.aspx?id=310"[/URL] alt="North Hills" />
  <area shape="rect" coords="11,240,96,253" href="[URL unfurl="true"]http://www.tri-ed.com/BranchLocation.aspx?id=306"[/URL] alt="Union City" />
  <area shape="rect" coords="104,294,190,308" href="[URL unfurl="true"]http://www.tri-ed.com/BranchLocation.aspx?id=348"[/URL] alt="Las Vegas" />
  <area shape="rect" coords="11,227,97,238" href="[URL unfurl="true"]http://www.tri-ed.com/BranchLocation.aspx?id=302"[/URL] alt="Sacramento" />
  <area shape="rect" coords="10,191,96,203" href="[URL unfurl="true"]http://www.tri-ed.com/BranchLocation.aspx?id=298"[/URL] alt="Portland" />
  <area shape="rect" coords="12,158,95,170" href="[URL unfurl="true"]http://www.tri-ed.com/BranchLocation.aspx?id=294"[/URL] alt="Seattle" />
  <area shape="rect" coords="105,238,190,252" href="[URL unfurl="true"]http://www.tri-ed.com/BranchLocation.aspx?id=340"[/URL] alt="Denver" />
  <area shape="rect" coords="10,121,94,134" href="[URL unfurl="true"]http://www.tri-ed.com/BranchLocation.aspx?id=260"[/URL] alt="Vancouver" />
  <area shape="rect" coords="293,352,380,367" href="[URL unfurl="true"]http://www.tri-ed.com/BranchLocation.aspx?id=7653"[/URL] alt="Houston" />
  <area shape="rect" coords="199,140,286,156" href="[URL unfurl="true"]http://www.tri-ed.com/BranchLocation.aspx?id=264"[/URL] alt="Winnipeg" />
  <area shape="rect" coords="106,106,193,120" href="[URL unfurl="true"]http://www.tri-ed.com/BranchLocation.aspx?id=256"[/URL] alt="Edmonton" />
  <area shape="rect" coords="200,187,285,202" href="[URL unfurl="true"]http://www.tri-ed.com/BranchLocation.aspx?id=338"[/URL] alt="Minneapolis" />
  <area shape="rect" coords="105,140,192,156" href="[URL unfurl="true"]http://www.tri-ed.com/BranchLocation.aspx?id=252"[/URL] alt="Calgary" />
  <area shape="rect" coords="199,246,283,259" href="[URL unfurl="true"]http://www.tri-ed.com/BranchLocation.aspx?id=384"[/URL] alt="Kansas City" />
  <area shape="rect" coords="201,280,285,293" href="[URL unfurl="true"]http://www.tri-ed.com/BranchLocation.aspx?id=9721"[/URL] alt="Tulsa" />
  <area shape="rect" coords="202,294,286,307" href="[URL unfurl="true"]http://www.tri-ed.com/BranchLocation.aspx?id=9719"[/URL] alt="Oklahoma City" />
  <area shape="rect" coords="389,127,475,142" href="[URL unfurl="true"]http://www.tri-ed.com/BranchLocation.aspx?id=284"[/URL] alt="Quebec" />
  <area shape="rect" coords="484,422,564,438" href="[URL unfurl="true"]http://www.tri-ed.com/BranchLocation.aspx?id=482"[/URL] alt="San Juan" />
  <area shape="rect" coords="389,425,468,439" href="[URL unfurl="true"]http://www.tri-ed.com/BranchLocation.aspx?id=472"[/URL] alt="Miami" />
  <area shape="rect" coords="390,148,476,161" href="[URL unfurl="true"]http://www.tri-ed.com/BranchLocation.aspx?id=280"[/URL] alt="Montreal" />
  <area shape="rect" coords="389,163,474,176" href="[URL unfurl="true"]http://www.tri-ed.com/BranchLocation.aspx?id=276"[/URL] alt="Ottawa" />
  <area shape="rect" coords="484,286,566,299" href="[URL unfurl="true"]http://www.tri-ed.com/BranchLocation.aspx?id=5348"[/URL] alt="DC Metro" />
  <area shape="rect" coords="293,221,379,236" href="[URL unfurl="true"]http://www.tri-ed.com/BranchLocation.aspx?id=400"[/URL] alt="Buffalo" />
  <area shape="rect" coords="293,163,379,175" href="[URL unfurl="true"]http://www.tri-ed.com/BranchLocation.aspx?id=272"[/URL] alt="Scarborough" />
  <area shape="rect" coords="296,253,380,265" href="[URL unfurl="true"]http://www.tri-ed.com/BranchLocation.aspx?id=382"[/URL] alt="Chicago" />
  <area shape="rect" coords="486,158,567,174" href="[URL unfurl="true"]http://www.tri-ed.com/BranchLocation.aspx?id=290"[/URL] alt="Halifax" />
  <area shape="rect" coords="485,193,565,207" href="[URL unfurl="true"]http://www.tri-ed.com/BranchLocation.aspx?id=408"[/URL] alt="Boston" />
  <area shape="rect" coords="482,208,565,220" href="[URL unfurl="true"]http://www.tri-ed.com/BranchLocation.aspx?id=444"[/URL] alt="Milford" />
  <area shape="rect" coords="482,313,564,331" href="[URL unfurl="true"]http://www.tri-ed.com/BranchLocation.aspx?id=464"[/URL] alt="Virginia Beach" />
  <area shape="rect" coords="390,328,466,341" href="[URL unfurl="true"]http://www.tri-ed.com/BranchLocation.aspx?id=470"[/URL] alt="Charlotte" />
  <area shape="rect" coords="295,316,380,330" href="[URL unfurl="true"]http://www.tri-ed.com/BranchLocation.aspx?id=8593"[/URL] alt="Atlanta" />
  <area shape="rect" coords="484,233,566,247" href="[URL unfurl="true"]http://www.tri-ed.com/BranchLocation.aspx?id=5346"[/URL] alt="Plainview" />
  <area shape="rect" coords="293,177,379,189" href="[URL unfurl="true"]http://www.tri-ed.com/BranchLocation.aspx?id=268"[/URL] alt="Toronto" />
  <area shape="rect" coords="483,273,566,285" href="[URL unfurl="true"]http://www.tri-ed.com/BranchLocation.aspx?id=458"[/URL] alt="Pennsauken" />
      <!--<area coords="197,304,262,319" href="/BranchLocation.aspx?id=384" alt="Kansas City,  KS Branch">
      <area coords="84,446,130,458" href="/BranchLocation.aspx?id=334" alt="San Diego, CA Branch">
      <area coords="344,381,387,398" href="/BranchLocation.aspx?id=464" alt="Virginia Beach, VA Branch">
      <area coords="328,400,377,415" href="/BranchLocation.aspx?id=470" alt="Charlotte, NC Branch">
      <area coords="2,355,65,368" href="/BranchLocation.aspx?id=306" alt="San Leandro, CA Branch">
      <area coords="41,374,76,393" href="/BranchLocation.aspx?id=310" alt="North Hills, CA Branch">
      <area coords="313,221,359,234" href="/BranchLocation.aspx?id=280" alt="Montreal, QC Branch">
      <area coords="32,399,83,413" href="/BranchLocation.aspx?id=316" alt="Riverside, CA Branch">
      <area coords="60,423,103,438" href="/BranchLocation.aspx?id=330" alt="Garden Grove, CA Branch">
      <area coords="271,257,311,269" href="/BranchLocation.aspx?id=268" alt="Toronto, ON Branch">
      <area coords="420,297,459,310" href="/BranchLocation.aspx?id=290" alt="Halifax, NS Branch">
      <area coords="369,334,404,348" href="/BranchLocation.aspx?id=444" alt="Milford, CT Branch">
      <area coords="360,350,428,366" href="/BranchLocation.aspx?id=458" alt="Philadelphia, PA Branch">
      <area coords="69,179,124,193" href="/BranchLocation.aspx?id=256" alt="Edmonton, AB Branch">
      <area coords="274,310,335,321" href="/BranchLocation.aspx?id=272" alt="Scarborough, ON Branch">
      <area coords="331,439,381,453" href="/BranchLocation.aspx?id=482" alt="San Juan, PR Branch">
      <area coords="2,331,66,345" href="/BranchLocation.aspx?id=302" alt="Sacramento, CA Branch">
      <area coords="21,264,61,279" href="/BranchLocation.aspx?id=294" alt="Seattle, WA Branch">
      <area coords="16,291,59,306" href="/BranchLocation.aspx?id=298" alt="Portland, OR Branch">
      <area coords="0,239,54,252" href="/BranchLocation.aspx?id=260" alt="Vancouver, BC Branch">
      <area coords="150,314,190,331" href="/BranchLocation.aspx?id=340" alt="Denver, CO Branch">
      <area coords="141,351,173,370" href="/BranchLocation.aspx?id=348" alt="Las Vegas, NV Branch">
      <area coords="132,420,175,434" href="/BranchLocation.aspx?id=372" alt="Phoenix, AZ Branch">
      <area coords="205,412,239,429" href="/BranchLocation.aspx?id=394" alt="Dallas, TX Branch">
      <area coords="371,218,412,232" href="/BranchLocation.aspx?id=284" alt="Quebec City, PQ Branch">
      <area coords="296,237,336,249" href="/BranchLocation.aspx?id=276" alt="Ottawa, ON Branch">
      <area coords="167,214,218,230" href="/BranchLocation.aspx?id=264" alt="Winnipeg, MB Branch">
      <area coords="350,291,400,302" href="/BranchLocation.aspx?id=400" alt="Buffalo, NY Branch">
      <area coords="63,202,106,213" href="/BranchLocation.aspx?id=252" alt="Calgary, AB Branch">
      <area coords="233,452,305,469" href="/BranchLocation.aspx?id=496" alt="New Orleans, LA Branch">
      <area coords="160,449,227,467" href="/BranchLocation.aspx?id=378" alt="San Antonio, TX Branch">
      <area coords="323,422,368,437" href="/BranchLocation.aspx?id=472" alt="Miami, FL Branch">
      <area coords="244,273,294,290" href="/BranchLocation.aspx?id=382" alt="Chicago, IL Branch">
      <area coords="72,227,115,239" href="/BranchLocation.aspx?id=252" alt="Calgary, AB Branch">
      <area coords="388,319,430,331" href="/BranchLocation.aspx?id=408" alt="Boston, MA Branch">
      <area coords="197,304,262,319" href="/BranchLocation.aspx?id=384" alt="Kansas City,  KS Branch">
      <area coords="264,482,327,471" href="/BranchLocation.aspx?id=492" alt="Clearwater, FL Branch">
      <area coords="151,277,220,291" href="/BranchLocation.aspx?id=338" alt="Minneapolis, Minnesota">-->
      <area shape="rect" coords="199,371,284,384" href="[URL unfurl="true"]http://www.tri-ed.com/BranchLocation.aspx?id=7654"[/URL] alt="Autin" />
      <area shape="rect" coords="12,214,95,226" href="[URL unfurl="true"]http://www.tri-ed.com/BranchLocation.aspx?id=7650"[/URL] alt="Rocklin" />
      <area shape="rect" coords="485,221,566,232" href="[URL unfurl="true"]http://www.tri-ed.com/BranchLocation.aspx?id=8352"[/URL] alt="Emlsford" />
      <area shape="rect" coords="484,259,566,272" href="[URL unfurl="true"]http://www.tri-ed.com/BranchLocation.aspx?id=7651"[/URL] alt="Cranbury" />
    </map>

<img src="[URL unfurl="true"]http://www.tri-ed.com/images/2013BranchMap.jpg"[/URL] alt="Tri-Ed Territory - All Across North America" border="0" ismap usemap="#locations">
<div id="branchInformation"></div>
    
</body>
</html>

yaknowss · Aug 21, 2013

How do I get the branch info to appear on the same page, below the image map? I need this info to be plain text within a div. Currently the code you provided doesn't do anything for me when I click on image map.

jpadie · Aug 21, 2013

it should do. I cannot test it here as the request is cross-domain (I assume you are testing this on the right server, not on your local machine - it will not work)

to debug, echo the resulting data to the console.

Code:

success: function( data ){
	  console.log('received data', data); 
          var text = $(data).find('#ctl00_ContentPlaceHolder4_ContentBlock1').html();
       $('#branchInformation').html( text ) ;
     },

jpadie · Aug 21, 2013

and if you want to avoid the ajax call to retrieve the site information then you can do this (and this has the advantage that if javascript is turned off, it will degrade gracefully)

Note that the code only works with Austin. You will need to follow the model to provide for other branch locations.

Code:

<!DOCTYPE HTML>
<html>
    <head>
        <meta charset="utf-8">
        <title>Untitled Document</title>
        <script type="text/javascript" src="[URL unfurl="true"]http://code.jquery.com/jquery-1.10.2.min.js">[/URL]
        </script>
        <script type="text/javascript">
            $(document).ready(function(){
                $("map area").on('click', function(e){
                    e.preventDefault();
                    var url = $(this).attr('href');
                    var bits = url.split("=");
					$('#branchInformation div').hide();
					$('#branchInformation').find('#branch_'+ bits[1]).show();
                });
            });
        </script>
    </head>
    <body>
        <map name="locations" id="locations">
            <area shape="rect" coords="389,300,469,312" href="[URL unfurl="true"]http://www.tri-ed.com/BranchLocation.aspx?id=9715"[/URL] alt="Raleigh" /><area shape="rect" coords="296,286,380,298" href="[URL unfurl="true"]http://www.tri-ed.com/BranchLocation.aspx?id=9740"[/URL] alt="Cincinatti" /><area shape="rect" coords="296,268,380,280" href="[URL unfurl="true"]http://www.tri-ed.com/BranchLocation.aspx?id=9705"[/URL] alt="Detroit" /><area shape="rect" coords="199,421,279,435" href="[URL unfurl="true"]http://www.tri-ed.com/BranchLocation.aspx?id=9718"[/URL] alt="McAllen" /><area shape="rect" coords="199,404,279,418" href="[URL unfurl="true"]http://www.tri-ed.com/BranchLocation.aspx?id=378"[/URL] alt="San Antonio" /><area shape="rect" coords="483,247,566,258" href="[URL unfurl="true"]http://www.tri-ed.com/BranchLocation.aspx?id=546"[/URL] alt="Woodbury" /><area shape="rect" coords="200,327,284,341" href="[URL unfurl="true"]http://www.tri-ed.com/BranchLocation.aspx?id=394"[/URL] alt="Dallas" /><area shape="rect" coords="200,342,284,356" href="[URL unfurl="true"]http://www.tri-ed.com/BranchLocation.aspx?id=9706"[/URL] alt="Fort Worth" /><area shape="rect" coords="105,308,190,321" href="[URL unfurl="true"]http://www.tri-ed.com/BranchLocation.aspx?id=372"[/URL] alt="Phoenix" /><area shape="rect" coords="106,328,191,341" href="[URL unfurl="true"]http://www.tri-ed.com/BranchLocation.aspx?id=9704"[/URL] alt="Albuquerque" /><area shape="rect" coords="10,365,97,378" href="[URL unfurl="true"]http://www.tri-ed.com/BranchLocation.aspx?id=334"[/URL] alt="San Diego" /><area shape="rect" coords="10,285,97,298" href="[URL unfurl="true"]http://www.tri-ed.com/BranchLocation.aspx?id=8594"[/URL] alt="Burbank" /><area shape="rect" coords="292,370,380,386" href="[URL unfurl="true"]http://www.tri-ed.com/BranchLocation.aspx?id=496"[/URL] alt="New Orleans" /><area shape="rect" coords="387,389,468,403" href="[URL unfurl="true"]http://www.tri-ed.com/BranchLocation.aspx?id=492"[/URL] alt="Clearwater" /><area shape="rect" coords="390,375,469,390" href="[URL unfurl="true"]http://www.tri-ed.com/BranchLocation.aspx?id=9399"[/URL] alt="Orlando" /><area shape="rect" coords="11,337,96,350" href="[URL unfurl="true"]http://www.tri-ed.com/BranchLocation.aspx?id=330"[/URL] alt="Garden Grove" /><area shape="rect" coords="11,350,96,363" href="[URL unfurl="true"]http://www.tri-ed.com/BranchLocation.aspx?id=9720"[/URL] alt="Orange" /><area shape="rect" coords="13,301,95,313" href="[URL unfurl="true"]http://www.tri-ed.com/BranchLocation.aspx?id=316"[/URL] alt="Riverside" /><area shape="rect" coords="11,272,95,284" href="[URL unfurl="true"]http://www.tri-ed.com/BranchLocation.aspx?id=310"[/URL] alt="North Hills" /><area shape="rect" coords="11,240,96,253" href="[URL unfurl="true"]http://www.tri-ed.com/BranchLocation.aspx?id=306"[/URL] alt="Union City" /><area shape="rect" coords="104,294,190,308" href="[URL unfurl="true"]http://www.tri-ed.com/BranchLocation.aspx?id=348"[/URL] alt="Las Vegas" /><area shape="rect" coords="11,227,97,238" href="[URL unfurl="true"]http://www.tri-ed.com/BranchLocation.aspx?id=302"[/URL] alt="Sacramento" /><area shape="rect" coords="10,191,96,203" href="[URL unfurl="true"]http://www.tri-ed.com/BranchLocation.aspx?id=298"[/URL] alt="Portland" /><area shape="rect" coords="12,158,95,170" href="[URL unfurl="true"]http://www.tri-ed.com/BranchLocation.aspx?id=294"[/URL] alt="Seattle" /><area shape="rect" coords="105,238,190,252" href="[URL unfurl="true"]http://www.tri-ed.com/BranchLocation.aspx?id=340"[/URL] alt="Denver" /><area shape="rect" coords="10,121,94,134" href="[URL unfurl="true"]http://www.tri-ed.com/BranchLocation.aspx?id=260"[/URL] alt="Vancouver" /><area shape="rect" coords="293,352,380,367" href="[URL unfurl="true"]http://www.tri-ed.com/BranchLocation.aspx?id=7653"[/URL] alt="Houston" /><area shape="rect" coords="199,140,286,156" href="[URL unfurl="true"]http://www.tri-ed.com/BranchLocation.aspx?id=264"[/URL] alt="Winnipeg" /><area shape="rect" coords="106,106,193,120" href="[URL unfurl="true"]http://www.tri-ed.com/BranchLocation.aspx?id=256"[/URL] alt="Edmonton" /><area shape="rect" coords="200,187,285,202" href="[URL unfurl="true"]http://www.tri-ed.com/BranchLocation.aspx?id=338"[/URL] alt="Minneapolis" /><area shape="rect" coords="105,140,192,156" href="[URL unfurl="true"]http://www.tri-ed.com/BranchLocation.aspx?id=252"[/URL] alt="Calgary" /><area shape="rect" coords="199,246,283,259" href="[URL unfurl="true"]http://www.tri-ed.com/BranchLocation.aspx?id=384"[/URL] alt="Kansas City" /><area shape="rect" coords="201,280,285,293" href="[URL unfurl="true"]http://www.tri-ed.com/BranchLocation.aspx?id=9721"[/URL] alt="Tulsa" /><area shape="rect" coords="202,294,286,307" href="[URL unfurl="true"]http://www.tri-ed.com/BranchLocation.aspx?id=9719"[/URL] alt="Oklahoma City" /><area shape="rect" coords="389,127,475,142" href="[URL unfurl="true"]http://www.tri-ed.com/BranchLocation.aspx?id=284"[/URL] alt="Quebec" /><area shape="rect" coords="484,422,564,438" href="[URL unfurl="true"]http://www.tri-ed.com/BranchLocation.aspx?id=482"[/URL] alt="San Juan" /><area shape="rect" coords="389,425,468,439" href="[URL unfurl="true"]http://www.tri-ed.com/BranchLocation.aspx?id=472"[/URL] alt="Miami" /><area shape="rect" coords="390,148,476,161" href="[URL unfurl="true"]http://www.tri-ed.com/BranchLocation.aspx?id=280"[/URL] alt="Montreal" /><area shape="rect" coords="389,163,474,176" href="[URL unfurl="true"]http://www.tri-ed.com/BranchLocation.aspx?id=276"[/URL] alt="Ottawa" /><area shape="rect" coords="484,286,566,299" href="[URL unfurl="true"]http://www.tri-ed.com/BranchLocation.aspx?id=5348"[/URL] alt="DC Metro" /><area shape="rect" coords="293,221,379,236" href="[URL unfurl="true"]http://www.tri-ed.com/BranchLocation.aspx?id=400"[/URL] alt="Buffalo" /><area shape="rect" coords="293,163,379,175" href="[URL unfurl="true"]http://www.tri-ed.com/BranchLocation.aspx?id=272"[/URL] alt="Scarborough" /><area shape="rect" coords="296,253,380,265" href="[URL unfurl="true"]http://www.tri-ed.com/BranchLocation.aspx?id=382"[/URL] alt="Chicago" /><area shape="rect" coords="486,158,567,174" href="[URL unfurl="true"]http://www.tri-ed.com/BranchLocation.aspx?id=290"[/URL] alt="Halifax" /><area shape="rect" coords="485,193,565,207" href="[URL unfurl="true"]http://www.tri-ed.com/BranchLocation.aspx?id=408"[/URL] alt="Boston" /><area shape="rect" coords="482,208,565,220" href="[URL unfurl="true"]http://www.tri-ed.com/BranchLocation.aspx?id=444"[/URL] alt="Milford" /><area shape="rect" coords="482,313,564,331" href="[URL unfurl="true"]http://www.tri-ed.com/BranchLocation.aspx?id=464"[/URL] alt="Virginia Beach" /><area shape="rect" coords="390,328,466,341" href="[URL unfurl="true"]http://www.tri-ed.com/BranchLocation.aspx?id=470"[/URL] alt="Charlotte" /><area shape="rect" coords="295,316,380,330" href="[URL unfurl="true"]http://www.tri-ed.com/BranchLocation.aspx?id=8593"[/URL] alt="Atlanta" /><area shape="rect" coords="484,233,566,247" href="[URL unfurl="true"]http://www.tri-ed.com/BranchLocation.aspx?id=5346"[/URL] alt="Plainview" /><area shape="rect" coords="293,177,379,189" href="[URL unfurl="true"]http://www.tri-ed.com/BranchLocation.aspx?id=268"[/URL] alt="Toronto" /><area shape="rect" coords="483,273,566,285" href="[URL unfurl="true"]http://www.tri-ed.com/BranchLocation.aspx?id=458"[/URL] alt="Pennsauken" /><!--<area coords="197,304,262,319" href="/BranchLocation.aspx?id=384" alt="Kansas City,  KS Branch">
            <area coords="84,446,130,458" href="/BranchLocation.aspx?id=334" alt="San Diego, CA Branch">
            <area coords="344,381,387,398" href="/BranchLocation.aspx?id=464" alt="Virginia Beach, VA Branch">
            <area coords="328,400,377,415" href="/BranchLocation.aspx?id=470" alt="Charlotte, NC Branch">
            <area coords="2,355,65,368" href="/BranchLocation.aspx?id=306" alt="San Leandro, CA Branch">
            <area coords="41,374,76,393" href="/BranchLocation.aspx?id=310" alt="North Hills, CA Branch">
            <area coords="313,221,359,234" href="/BranchLocation.aspx?id=280" alt="Montreal, QC Branch">
            <area coords="32,399,83,413" href="/BranchLocation.aspx?id=316" alt="Riverside, CA Branch">
            <area coords="60,423,103,438" href="/BranchLocation.aspx?id=330" alt="Garden Grove, CA Branch">
            <area coords="271,257,311,269" href="/BranchLocation.aspx?id=268" alt="Toronto, ON Branch">
            <area coords="420,297,459,310" href="/BranchLocation.aspx?id=290" alt="Halifax, NS Branch">
            <area coords="369,334,404,348" href="/BranchLocation.aspx?id=444" alt="Milford, CT Branch">
            <area coords="360,350,428,366" href="/BranchLocation.aspx?id=458" alt="Philadelphia, PA Branch">
            <area coords="69,179,124,193" href="/BranchLocation.aspx?id=256" alt="Edmonton, AB Branch">
            <area coords="274,310,335,321" href="/BranchLocation.aspx?id=272" alt="Scarborough, ON Branch">
            <area coords="331,439,381,453" href="/BranchLocation.aspx?id=482" alt="San Juan, PR Branch">
            <area coords="2,331,66,345" href="/BranchLocation.aspx?id=302" alt="Sacramento, CA Branch">
            <area coords="21,264,61,279" href="/BranchLocation.aspx?id=294" alt="Seattle, WA Branch">
            <area coords="16,291,59,306" href="/BranchLocation.aspx?id=298" alt="Portland, OR Branch">
            <area coords="0,239,54,252" href="/BranchLocation.aspx?id=260" alt="Vancouver, BC Branch">
            <area coords="150,314,190,331" href="/BranchLocation.aspx?id=340" alt="Denver, CO Branch">
            <area coords="141,351,173,370" href="/BranchLocation.aspx?id=348" alt="Las Vegas, NV Branch">
            <area coords="132,420,175,434" href="/BranchLocation.aspx?id=372" alt="Phoenix, AZ Branch">
            <area coords="205,412,239,429" href="/BranchLocation.aspx?id=394" alt="Dallas, TX Branch">
            <area coords="371,218,412,232" href="/BranchLocation.aspx?id=284" alt="Quebec City, PQ Branch">
            <area coords="296,237,336,249" href="/BranchLocation.aspx?id=276" alt="Ottawa, ON Branch">
            <area coords="167,214,218,230" href="/BranchLocation.aspx?id=264" alt="Winnipeg, MB Branch">
            <area coords="350,291,400,302" href="/BranchLocation.aspx?id=400" alt="Buffalo, NY Branch">
            <area coords="63,202,106,213" href="/BranchLocation.aspx?id=252" alt="Calgary, AB Branch">
            <area coords="233,452,305,469" href="/BranchLocation.aspx?id=496" alt="New Orleans, LA Branch">
            <area coords="160,449,227,467" href="/BranchLocation.aspx?id=378" alt="San Antonio, TX Branch">
            <area coords="323,422,368,437" href="/BranchLocation.aspx?id=472" alt="Miami, FL Branch">
            <area coords="244,273,294,290" href="/BranchLocation.aspx?id=382" alt="Chicago, IL Branch">
            <area coords="72,227,115,239" href="/BranchLocation.aspx?id=252" alt="Calgary, AB Branch">
            <area coords="388,319,430,331" href="/BranchLocation.aspx?id=408" alt="Boston, MA Branch">
            <area coords="197,304,262,319" href="/BranchLocation.aspx?id=384" alt="Kansas City,  KS Branch">
            <area coords="264,482,327,471" href="/BranchLocation.aspx?id=492" alt="Clearwater, FL Branch">
            <area coords="151,277,220,291" href="/BranchLocation.aspx?id=338" alt="Minneapolis, Minnesota">--><area shape="rect" coords="199,371,284,384" href="[URL unfurl="true"]http://www.tri-ed.com/BranchLocation.aspx?id=7654"[/URL] alt="Autin" /><area shape="rect" coords="12,214,95,226" href="[URL unfurl="true"]http://www.tri-ed.com/BranchLocation.aspx?id=7650"[/URL] alt="Rocklin" /><area shape="rect" coords="485,221,566,232" href="[URL unfurl="true"]http://www.tri-ed.com/BranchLocation.aspx?id=8352"[/URL] alt="Emlsford" /><area shape="rect" coords="484,259,566,272" href="[URL unfurl="true"]http://www.tri-ed.com/BranchLocation.aspx?id=7651"[/URL] alt="Cranbury" />
        </map>
		<img src="[URL unfurl="true"]http://www.tri-ed.com/images/2013BranchMap.jpg"[/URL] alt="Tri-Ed Territory - All Across North America" border="0" ismap usemap="#locations">
        <div id="branchInformation">
        
        <div id="branch_7654">
            <h1>Austin</h1>
            <h2 class="locations"> Austin, 
                TX
                Branch
			</h2>
            <p class="locations">
                <strong> 11100 Metric Blvd., Suite 300<br/>
                    Austin, TX 78758<br/>
                    Tel  - 512 451 7157<br/>
                    Fax 512 453 4886<br/>
                </strong>
            </p>
        </div>
		</div>
    </body>
</html>

jpadie · Aug 21, 2013

and to stop them all showing at once on page load add this

Code:

 $(document).ready(function(){
  $('#branchInformation div').hide();
  /* carry on with the rest of the code */

vacunita · Aug 21, 2013

Lets break it down to its parts. When you click on your image nothing happens you don't even get the alert pop up a dialog box?

alert(e.clientX + "----" + e.clientY); return; it should at least show something.

Also many browsers like firefox include an error console, you can use that to check if you have any errors in the JS. There should not be any though.
In firefox its under Tools->Web Developer

I did notice it would not work in Internet Explorer. Here's the new function that works at least in IE8

Should theoretically work in IE 9 and 10 as well.

Code:

<script type="text/javascript" >
function displayInfoBox(e)
{

	//alert(e.clientX + "----" + e.clientY); return;

	var container = document.getElementById('infoboxcontainer');
	var boxes = container.getElementsByTagName('div');
	//alert(boxes.length);
	for(var i=0;i<=boxes.length-1;i++)
	{
		boxes[i].style.display='none';
	}	
	
	if((e.clientX>=423 && e.clientX<=500) && (e.clientY>=220 && e.clientY<=282))
	{
		document.getElementById('calgary').style.display='block';		
	}
	else if((e.clientX>=124 && e.clientX<=154) && (e.clientY>=225 && e.clientY<=241))
	{
		document.getElementById('seattle').style.display='block';	
	}
}
</script>

Everything else should stay the same.

----------------------------------
Phil AKA Vacunita
----------------------------------
Ignorance is not necessarily Bliss, case in point:
Unknown has caused an Unknown Error on Unknown and must be shutdown to prevent damage to Unknown.

Web & Tech

yaknowss · Aug 21, 2013

@Vacunita, it is working for me! However it is not working in IE 10 for me...It is however working in Firefox. Is there a way I can make his work in IE 10?

jpadie · Aug 22, 2013

@yaknowss
you should find my code easier to manage than the array of coordinates in Phil's code. Using jQuery as a basis also makes it more automatically cross-browser.

If you don't want to use jQuery then the following pseudo code can be easily written in native javascript

Code:

1. attach an event listener to the area tags' click event
2. on click, analyse the href of the area tag.
3. split the href by the '=' sign
4. iterate through all the divs inside the branchInformation div
5. for each div, if the ID is branch_ + the id from 3, change its display to block, otherwise change the display to none;

yaknowss · Aug 22, 2013

Hmm, not sure what this means...I need visual examples. It's difficult to understand how this would work for what I'm trying to accomplish...Eventually, the branch id's you keep referring to will eventually become obselet. As those pages won't exist once the new page is up and running.

jpadie · Aug 22, 2013

for visualisation put the code above in my earlier post into a file and point your browser at it.

if you are not going to use the store id then you will have to use some other method of uniquely identifying each store.

Tek-Tips is the largest IT community on the Internet today!

Members share and learn making Tek-Tips Forums the best source of peer-reviewed technical information on the Internet!

Expand Collapse text based on Image Click location

Programmer

Programmer

Programmer

Programmer

Technical User

Programmer

Programmer

Technical User

Programmer

Programmer

Technical User

Programmer

Technical User

Technical User

Technical User

Programmer

Programmer

Technical User

Programmer

Technical User

Similar threads

Log in

Part and Inventory Search

Sponsor