Solved

javascript hotspot

Posted on 2011-03-17
8
517 Views
Last Modified: 2012-05-11
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
Comment
Question by:SkyEyez
  • 4
  • 4
8 Comments
 
LVL 19

Expert Comment

by:Bardobrave
ID: 35156418
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
 

Author Comment

by:SkyEyez
ID: 35156537
Great - but how would that be coded?  I have zero javascript experience.
0
 
LVL 19

Expert Comment

by:Bardobrave
ID: 35159145
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
 

Author Comment

by:SkyEyez
ID: 35166032
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
Threat Intelligence Starter Resources

Integrating threat intelligence can be challenging, and not all companies are ready. These resources can help you build awareness and prepare for defense.

 
LVL 19

Expert Comment

by:Bardobrave
ID: 35166629
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
 

Author Comment

by:SkyEyez
ID: 35167126
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
 
LVL 19

Accepted Solution

by:
Bardobrave earned 500 total points
ID: 35171330
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
 

Author Comment

by:SkyEyez
ID: 35183461
Fan-freaking-tastic!  Thanks so much Bardobrave, I'm good to go.
0

Featured Post

Threat Intelligence Starter Resources

Integrating threat intelligence can be challenging, and not all companies are ready. These resources can help you build awareness and prepare for defense.

Join & Write a Comment

This article discusses the difference between strict equality operator and equality operator in JavaScript. The Need: Because JavaScript performs an implicit type conversion when performing comparisons, we have to take this into account when wri…
JavaScript can be used in a browser to change parts of a webpage dynamically. It begins with the following pattern: If condition W is true, do thing X to target Y after event Z. Below are some tips and tricks to help you get started with JavaScript …
The viewer will learn the basics of jQuery, including how to invoke it on a web page. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery.: (CODE)
The viewer will learn the basics of jQuery including how to code hide show and toggles. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery…

746 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question

Need Help in Real-Time?

Connect with top rated Experts

10 Experts available now in Live!

Get 1:1 Help Now