Image Map in Twenty Ten

Hi guys. A brief disclaimer here: I’m quite certain the answers are going to be obvious to most of you guys, but I’m relatively new to HTML & CSS so go easy on me. 🙂

My client has asked for an imagemap of their campsites in which an image pops up when the user clicks on a given campsite. Following is the page with the image map:

http://www.hiltonparkcampground.com/?page_id=11

What I’ve done is to create a div for the page content using the following CSS:

#Campsites {
	width: 800px;
	height: 885px;
	margin-bottom: 20px;
	position: relative;
}

My intent was to hide all of the campsite images beneath the image map so that only the image map would show on page load.

I then installed the Advanced Fancybox plugin so that a campsite image will popup when a corresponding campsite is clicked on. This is where I’m running into trouble.

I’ve gotten it to work sometimes, but in other instances when a campsite is clicked on it will link to the image file itself.

Though I’d ideally like to setup a jQuery popup that displays campsite images on mouse-over that’s obviously beyond me at this point.

That said, my question is this: What would be the simplest way for a beginner like myself to achieve the desired effect for this page? Thanks in advance to those willing to offer some constructive criticism & counsel. 🙂