Maps give your website visitors a great way to quickly get information about a place with many locations, and to select one. Many ways exist to do this, but a potential website client mentioned that they wanted to have a clickable map, so I put together a solution that I’m making public here. This example shows visitors a map of Hawaii, and each island has a small circle, or dot. Hovering over a dot makes a panel of information about that island appear in an empty area of the map. Clicking a dot takes the visitor to a page for that dot’s island, though they just have empty links in this demo.
The amount of Javascript to make the panels and dots fade in and out is very small, and uses the jQuery library to handle the grunt work.
// Set the map's glowing dots and information panels initially invisible, and
// hide the information panels so they don't interfere with each other later.
// They're all absolutely positioned and one on top of the other, so not hiding
// them causes links within lower ones to be unclickable.
$(".dot").fixPNGs().css({opacity: 0});
$(".island-text").css({opacity: 0}).hide();
$(".dot").hover(function () {
// When a dot is hovered over, fade it in, then take its id, strip off the "dot-" prefix
// and add a "text-" prefix to match the corresponding information panel's id.
$(this).stop().animate({opacity: 1}, 100);
var selectedElement = "#text-" + $(this).attr("id").replace("dot-", "");
// Fade out the currently displayed information panel, which we know because it has
// the current-island class on it, and fade in the information for the currently hovered
// dot. But only do this if the currently hovered dot is different from the currently
// displayed information panel.
if (selectedElement !== ("#" + $(".current-island").attr('id'))) {
// After the current panel fades out, hide it to keep it from covering the links of
// the newly revealed panel. Add the current-island class to the newly revealed panel
// so we can keep track of it.
$(".current-island").animate({opacity: 0}, 500, function () { $(this).hide() }).removeClass("current-island");
$(selectedElement).show().animate({opacity: 1}, 500).addClass("current-island");
}
}, function () {
// Once the mouse moves off a dot, fade it out. The information panel stays though
$(this).stop().animate({opacity: 0}, 500);
});
The overall architecture is that the blue uncovered dots are built right into the map’s JPEG file, but the glowing dots that fade in when you hover over them are a separate PNG file with one glowing dot in it. Anchors for each island are absolutely positioned over the blue dots and use the PNG file as a background image, and initially given an opacity of zero. The information panels are a set of DIVs, each of which is hidden at startup.
The main trick with the map’s Javascript function is that the id names of each dot and each information panel are matched up to be the names of each island, but with different prefixes, “dot-” for the dots and “text-” for the information panel. When the Javascript detects that a dot has been hovered over, it grabs the id for that dot, strips the “dot-” prefix from it, prefixes “text-” in front of it, and uses that new id to find the corresponding information panel, fading it in. Of course, it also fades the previous one out if there is one.
I hope this is helpful for your clickable maps. My code is available under Creative Commons for both commercial and noncommercial use with or without attribution to me.
To comment on this article, see its Facebook post. Thank you!