Improve company productivity with a Business Account.Sign Up

x
  • Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 545
  • Last Modified:

javascript hotspot

We have a world map on our website with individual areas denoted with pins and when someone clicks on a pin, data about the area they clicked on comes up below the map.  This works fine for individual countries, but we would also like to highlight larger areas (such as the entire pantropical region).  I've attached the code we are using for the pins.  How can I make it so that if someone clicks on a pin in the pantropical area, a larger area (perhaps by coordinates) gets highlighted?
<script type="text/javascript">

function add_pin(x, y, id, active) {

$('#map').append('<span class="pin' + (active?' active':'') + '" style="left: ' + (x -10) + 'px; top: ' + (y -14) + 'px;" title="' + id + '"></span>');

	}

add_pin(114, 82, 'info1', true);

add_pin(219, 99, 'info2');

add_pin(424, 234, 'info3');

add_pin(512, 139, 'info4');

add_pin(650, 255, 'info5');

add_pin(329, 208, 'info6');

$('#map .pin').live('click', function() {

$('#map div.info:visible').fadeOut();

$('#' + $(this).attr('title')).stop().fadeIn();

$('#map span.active').removeClass('active');

$(this).addClass('active');

	});
	</script>

Open in new window

0
SkyEyez
Asked:
SkyEyez
  • 4
  • 4
1 Solution
 
BardobraveCommented:
You can add classes to your pins and your regions, and highlight regions depending on the pin clicked.

I mean:

Pins can have classes like: americaHighlight, europeHighlight, asiaHighlight

Then, your different regions (composed by several countries) will have classes for every highlighter.
Japan call have a class asia and a class pacific, so when you click on a pin with asiaHighlight class you highlight all countries with asia class (Japan will get highlighted) and when you click a pin with pacificHighlight you highlight all countries with pacific class (again Japan will get highlighted).
0
 
SkyEyezAuthor Commented:
Great - but how would that be coded?  I have zero javascript experience.
0
 
BardobraveCommented:
Well.... I have absolute no idea about your data structure, your representation or how do you highlight isolated countries. I would need that type of info to start helping you.
0
Free Tool: ZipGrep

ZipGrep is a utility that can list and search zip (.war, .ear, .jar, etc) archives for text patterns, without the need to extract the archive's contents.

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

 
SkyEyezAuthor Commented:
Full page code is below.  As for highlighting large areas such as pantropical, I would imagine either having a bar appear over the area or swapping in an image.  So, we would just stick a pin in Brazil to highlight it, but would need something more expansive for larger multi-continent areas.  Hope this helps, and thanks for your help!
<style type="text/css">
	div#map {
		position: relative;
	}
	div#map span.pin {

		position: absolute;

		cursor: pointer;

		display: block;

		width: 21px;

		height: 21px;

		background: url('pin.png') no-repeat;

	}
	div#map span.pin.active {

		margin: -7px;

		width: 35px;

		height: 35px;

		background-image: url('pin_active.png');
	}
	div#map div.info {

		display: none;

		margin: 0 40px 45px 40px;

		padding: 0;

		position: absolute;

		left: 0;

		bottom: 0;

		width: 650px;

		height: 180px;
	}

	div#map div.info h2 {

		height: auto;

		margin: 0 0 15px 0;

		font-size: 16px;

		color: #308353;

		background: 0;

	}

	div#map div.info img {

		margin: 0 20px 0 0;

	}

	div#map div.info a.button,

	div#map div.info a.button:hover {

		display: inline-block;

		padding: 5px 10px;

		color: #fff;

		background: #204812;

		-moz-border-radius: 3px;

		-webkit-border-radius: 3px;

		border-radius: 3px;

	}

	        </style>  
                                           
     <div id="word_map">

	<div id="map">

		<img src="map.png" width="721" height="566" border="0" usemap="#Map" id="Image1"  />
       
		<div id="info1" class="info" >

			<h2>Lorem ipsum dolor sit amet</h2>

			<img src="pic.png" align="left" />

			<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>

			<p><a href="#" class="button">Read More</a></p>
		</div>
		<div id="info2" class="info" >

			<h2>Lorem ipsum dolor sit amet</h2>

			<img src="pic.png" align="left" />

			<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>

			<p><a href="#" class="button">Read More</a></p>
		</div>
		<div id="info3" class="info" >
			<h2>Group 3 - Title Here</h2>
			<img src="pic.png" align="left" />
			<p>urabitur metus risus, ultrices non pharetra vel, venenatis in augue. Sed sagittis purus eget lectus semper eu fermentum nunc eleifend. Quisque neque augue, fermentum ut pretium sed, pharetra id neque. In porttitor lectus ut turpis ullamcorper id volutpat felis dapibus.</p>
			<p><a href="#" class="button">Read More</a></p>
		</div>
</div>

</div>

<script type="text/javascript">
	function add_pin(x, y, id, active) {

		$('#map').append('<span class="pin' + (active?' active':'') + '" style="left: ' + (x -10) + 'px; top: ' + (y -14) + 'px;" title="' + id + '"></span>');

	}
	add_pin(114, 82, 'info1', true);

	add_pin(219, 99, 'info2');

	add_pin(424, 234, 'info3');

	add_pin(512, 139, 'info4');

	add_pin(650, 255, 'info5');

	add_pin(329, 208, 'info6');
	$('#map .pin').live('click', function() {

		$('#map div.info:visible').fadeOut();

		$('#' + $(this).attr('title')).stop().fadeIn();

		$('#map span.active').removeClass('active');

		$(this).addClass('active');

	});

	</script>

Open in new window

0
 
BardobraveCommented:
Ok... let's see...

You are using a set of css styles to define through different classes the active and inactive pins, and the data notes layers. Also you use a imagemap for the worldmap, so I imagine that the different countries are highlighted through links to different maps where the selected country is highlighted.

You can make a new add_pin_global function, where you load a pin with a slightly different functionality. When those pins are clicked, they will call the image of the map with the highlighted portion.

However I don't see on your code where the image map is define. I see in your image tag that it's attached to #Map, but don't see where it is defined de limits of this map. You will need to create new images with the complete regions highlighted and add them to the map, later we can discuss how to activate those regions through pins or links, or whatever...
0
 
SkyEyezAuthor Commented:
Sorry - Ignore the #map - that was old code from when I was trying to figure this out myself.  We have a map of the world and the pins, no hotspots as of yet. So if I create different image maps for different regions, how do I call them?  i want users to be able to click on a pin, have an area hightlight and the data show up below.
0
 
BardobraveCommented:
There are multiple options for this.

As a first idea, you can load a different image when clicking on the pins. You have already a function that load a pin which shows a data node on click, what you need to do is a function that load a different pin which changes the src of the img tag.

Supose your image tag like this:

<img src="map.png" width="721" height="566" border="0" id="Image1"  />

You can add a new javascript function to your code like this:

function add_regionPin(x, y, id, active) {

            $('#map').append('<span class="pin' + (active?' active':'') + ' regionPin" style="left: ' + (x -10) + 'px; top: ' + (y -14) + 'px;" title="' + id + '" id="' + id + '"></span>');
      }

Then you will be able to add pins for regions, the only difference they have with normal pins is that they have another class named regionPin.

Adding this code you'll be able to make those regionPin elements to change your image.

$(".regionPin").click(function () {
  $("#image1").attr("src",$(this).attr("id") + '.png');
});

This function will change the src attribute of your img tag to a value equal to your clicked regionPin id + .png

This way you'll be able to add regionPins that modifies the whole map upon clicking on them.

0
 
SkyEyezAuthor Commented:
Fan-freaking-tastic!  Thanks so much Bardobrave, I'm good to go.
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: Port Scanner

Check which ports are open to the outside world. Helps make sure that your firewall rules are working as intended.

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.

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