SkyEyez
asked on
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>ASKER
Great - but how would that be coded? I have zero javascript experience.
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.
ASKER
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>
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...
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...
ASKER
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.
ASKER CERTIFIED SOLUTION
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
ASKER
Fan-freaking-tastic! Thanks so much Bardobrave, I'm good to go.
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).