Support » Fixing WordPress » Image Map in Twenty Ten

  • Resolved Shane

    (@slb923)


    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. 🙂

Viewing 3 replies - 1 through 3 (of 3 total)
  • Still plugging away…seems one of the issues is that TinyMCE seems to be stripping out my markup whenever I update the page. Could this be part of the problem? Aye, aye, aye, my head hurts. 🙁

    Well there are a few ways to do it but the simplest one would be to:

    Upload the resized photos that you are trying to show to a directory.
    Get rid of the Advanced Fancybox.
    Install thick box content plugin
    paste the image map code into a fresh page (html view)
    Insert the thick-box token where the url of the image goes in your image map code.
    Have a beer.

    Thanks a bunch for your help Shirazdum, I appreciate it. Issue resolved. 🙂

Viewing 3 replies - 1 through 3 (of 3 total)
  • The topic ‘Image Map in Twenty Ten’ is closed to new replies.