Home/ Questions/Q 8214189
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-06-07T11:22:37+00:00

I am creating an interactive map in jQuery, and am using a custom hand-drawn

  • 0

I am creating an interactive map in jQuery, and am using a custom hand-drawn map. I have a series of “trigger points” placed throughout the map, absolutely positioned, relative to the size of the map. WHen a use hovers over these trigger points, a tooltip is displayed with information about the location.

HTML/CSS:

<div id="map" style="position:relative; background: url(images/map.jpg">
    <div class="trigger" data-loc="locationA" style="position:absolute; left:10px; top:3px"><h1 class="tooltip">Location A Title</h1></div>
    <div class="trigger" data-loc="locationB" style="position:absolute; left:0px; top:24px"><h1 class="tooltip">Location B Title</h1></div>
    <div class="trigger" data-loc="locationC" style="position:absolute; left:140px; top:35px"><h1 class="tooltip">Location C Title</h1></div>
    <div class="trigger" data-loc="locationD" style="position:absolute; left:70px; top:103px"><h1 class="tooltip">Location D Title</h1></div>
</div>

JQuery:

$(".trigger").hover(function(){
   $(this).find(".tooltip").fadeIn();
}, function(){
   $(this).find(".tooltip").fadeOut();
});

A few Questions:
1) Is this the best way to go about a basic interactive map with JQuery?

2) I want to have a list of locations off to the right. When a user clicks on the link it should ALSO trigger the tooltip for that pertaining link. As shown above, there is a data-loc attribute in each trigger-point. If I set the same data-points in the anchor links to the right, how would I use jQuery to link them up and trigger the fading in and out of the pertaining tooltip?

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    To my knowledge there isn’t a best way to do this. One slightly more descriptive way is to use the area tag instead of a div.

    <!DOCTYPE >
<html>
<body>
  <img src="image/all balls.jpg" style="width: 450px; height: 450px;" 
       alt="Balls" usemap="#BallMap" />
  <map name="BallMap">
    <area id="whiteArea" class="hoverArea" shape="circle" coords="78,81,76.5" 
          nohref="nohref" alt="white" />
    <area id="blueArea" class="hoverArea" shape="circle" coords="260,81,76.5" 
          nohref="nohref" alt="blue" />
    <area id="redArea" class="hoverArea" shape="circle" coords="84,254,76.5"
          nohref="nohref" alt="red" />
  </map>
</body>
</html>

    Then similarly:

    $(".hoverArea").hover(function(){
   showToolTip($(this));
}, function(){
   hideToolTip($(this));
});

    Probably a little more work to write the custom functions for showing a tooltip. (note: I’ve never used Area myself. )

    Update

    There are a couple of ways to accomplish this.

    A semi-hacky way, since you are already using absolutes is to put another div around the current div’s but have them absolutely positioned way to the right. Hacky but works.

    I wouldn’t do that, cause this would be way better in my opinion:

    <div id="map" style="position:relative; background: url(images/map.jpg">
  <div class="trigger" data-loc="locationA" id="locationA"
       style="position:absolute; left:10px; top:3px">
    <h1 class="tooltip">Location A Title</h1>
  </div>
  <div class="trigger" data-loc="locationB" id="locationB" 
       style="position:absolute; left:0px; top:24px">
    <h1 class="tooltip">Location B Title</h1>
  </div>
  <div class="trigger" data-loc="locationC" id="locationC"
       style="position:absolute; left:140px; top:35px">
    <h1 class="tooltip">Location C Title</h1>
  </div>
  <div class="trigger" data-loc="locationD" id="locationD"
       style="position:absolute; left:70px; top:103px">
    <h1 class="tooltip">Location D Title</h1>
  </div>
</div>

<div class="sidebar">
  <div class="trigger" data-loc="locationA"> Loc A
  </div>
  <div class="trigger" data-loc="locationB"> Loc B
  </div>
  <div class="trigger" data-loc="locationC"> Loc C
  </div>
  <div class="trigger" data-loc="locationD"> Loc D
  </div>
<div>

    Then with jQuery:

    $(".trigger").hover(function(){
   $("#" + $(this).data("loc") + " .tooltip").fadeIn();
}, function(){
   $("#" + $(this).data("loc") + " .tooltip").fadeOut();
});
    • 0