I’m still loving jQuery.
I have a little job to do at work where we have a document that the client wants to have little hot spots where people can click on and a little window will pop up giving detailed explanations for that section of the document.
For whatever reason, I was told not to use Flash (which would have been my first choice), and so chose DHTML instead.
After a bit of head scratching, it seemed like a very simple solution would do the trick. I have an image of the document using a good old fashioned image map. The hot spots in the image map are primed and ready for clicking on. I highlighted the clickable areas in the actual image so people would know where to click. There didn’t seem to be any sense to using CSS for this. Just placed a block of colour at 20% opacity in the same region the hotspot would be (Fireworks makes this very easy).
Then I added a DIV to the page with an id (”thePopUp”). No point is having separate DIVS for each region since only one will be visible at a time. I styles the DIV with a little CSS so it looked nice, and made it’s positioning absolute so that I could place it anywhere on top of the image.
Then there was just the Javascript left to do. jQuery makes it laughably easy to grab stuff out of the page, so I grabbed all the AREA elements (which correlate to my hotspots), and attached a click event to them. I may improve this later to trigger on focus or something like that to make the page keyboard navigable.
The click event grabs the COORD attribute from the AREA element and runs it through a regex to extract the X andY coordinates of the hot spot, and sets the LEFT and TOP attributes of my DIV with them. It then grabs the text stored in the AREAs LONGDESC attribute and uses it to set the content of the DIV.
Then I use the fade effect in jQurey to make the DIVappear.
So Easy 
I’m amazed at how few lines of Javascript I needed to do this.
Sample code below so you can follow along at home. Of course this is a smaller version, since the real one has a much larger image and many more image map areas. But this is enough to get the idea…
-
-
-
<style type=“text/css” media=“screen”>
-
#thePopUp
-
{
-
background-color:#FFFF00;
-
color:#CC0000;
-
border:3px solid #FF6600;
-
width:300px;
-
font-family:Geneva, Arial, Helvetica, sans-serif;
-
font-size:1.1em;
-
position:absolute;
-
top:0px;
-
left:0px;
-
display:none;
-
padding:0.5em 0.3em 0.8em 0.3em;
-
}
-
#boo
-
{
-
position:absolute;
-
top:0;
-
left:0;
-
}
-
-
#imgContainer
-
{
-
position:absolute;
-
}
-
-
#small
-
{
-
font-size:0.7em;
-
font-style:italic;
-
}
-
-
#small:hover
-
{
-
text-decoration:underline;
-
}
-
</style>
-
-
-
<img name=“boo” src=“boo.jpg” width=“375″ height=“500″ border=“0″ id=“boo” usemap=“#m_boo” alt=“” />
-
<map name=“m_boo” id=“m_boo”>
-
<area shape=“rect” coords=“146,210,224,272″ href=“” alt=“” id=“heart” tabindex=“1″ longdesc=“some text here”/>
-
<area shape=“rect” coords=“91,45,251,153″ href=“” alt=“” id=“smile” tabindex=“2″ longdesc=“some other text here”/>
-
</map>
-
<div id=“thePopUp”>place holder
</div>
-
</div>
-
-
<script type=“text/javascript” src=“jquery-1.2.6.js”></script>
-
-
var speed = 500; // set fade in/out speed
-
re = /(d*),(d*),(d*),(d*)/; // regex for disecting coords
-
-
$(document).ready(function()
-
{
-
$("area").click(showIt);
-
$("#thePopUp").click(function(){$(this).fadeOut(speed)});
-
});
-
-
function showIt()
-
{
-
var co = this.coords;
-
var bits = re.exec(co);
-
$("#thePopUp").css("left", bits[1]+"px");
-
$("#thePopUp").css("top", bits[2]+"px");
-
$("#thePopUp").html(’
<p>‘ + this.attributes[’longdesc’].value + ‘
</p><p id=“small”>Click here to close this little window.
</span></p>‘);
-
$("#thePopUp").fadeIn(speed);
-
return false;
-
}
-
</script>
-
-
</body>
