2

I'm creating a world map and there are flags in several countries. What I need to do is so that when someone hovers over a flag a DIV with content corresponding to that country slides down and then gets closed by clicking on a close button.

This is my basic HTML:

<map name="imgworldmap" id="imgworldmap">
 <area shape="poly" coords="446,125,445,126" alt="">
 <area shape="poly" coords="447,123,446,445" alt="">
 etc....
</map>

<ul class="flags-container">
 <li class="us">
  <div class="flyout">Country A</div>
 </li>
 <li class="ht">
  <div class="flyout">Country B</div>
 </li>
 <li class="uk">
  <div class="flyout">Country C</div>
 </li>
</ul>

This is my jQuery attempt (of course it doesn't work, it brings ALL flyouts out):

$(function(){
 $('area').hover(function(){
  $('.flyout').toggle();    
 });
});

Closing the flyout DIV, I know how to do that, so I don't need help with that part.

What I need help with is to have an area's corresponding DIV slide down.

Any help would be greatly appreciated.

Thanks!

**EDIT

Another more robust and scalable solution**

In the following link you'll find a solution that offers more functionalities and with better usability:

.mouseleave() with .delay() working together

Community
  • 1
  • 1
Ricardo Zea
  • 10,053
  • 13
  • 76
  • 79

1 Answers1

2

I would attach a data- attribute to each area who's content is the ID of the <li> element containing the correct flyout. That will let you target the correct elements.

Here's an example:

<map name="imgworldmap" id="imgworldmap">
 <area shape="poly" coords="446,125,445,126" alt="" data-code="us">
 <area shape="poly" coords="447,123,446,445" alt="" data-code="ht">
 etc....
</map>

<ul class="flags-container">
 <li id="us">
  <div class="flyout">Country A</div>
 </li>
 <li id="ht">
  <div class="flyout">Country B</div>
 </li>
 <li id="uk">
  <div class="flyout">Country C</div>
 </li>
</ul>

And the javascript:

$(function(){
 $('area').hover(function(){
  // Get the data from the hovered element
  var id = $(this).attr("data-code");

  // Toggle the correct div
  $('#'+id+' div').toggle();    
 });
});
cdeszaq
  • 30,869
  • 25
  • 117
  • 173
  • This worked great, thanks a lot cdeszaq. Question though: What would be the difference in using the data- attribute to simply using and id? – Ricardo Zea May 05 '11 at 14:55
  • @Ricardo - Since you can't have 2 elements on a page with the same ID, using a data attribute lets you attach non-presentational information to the elements in the DOM that javascript can easily access, and also doesn't require any string parsing. – cdeszaq May 05 '11 at 18:44
  • Ok, great for the explanation. – Ricardo Zea May 05 '11 at 20:43