WordPress.org

Ready to get started?Download WordPress

Forums

[resolved] Image Map in Twenty Ten (4 posts)

  1. Shane
    Member
    Posted 3 years ago #

    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. :)

  2. Shane
    Member
    Posted 3 years ago #

    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. :(

  3. shirazdrum
    Member
    Posted 3 years ago #

    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.

  4. Shane
    Member
    Posted 3 years ago #

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

Topic Closed

This topic has been closed to new replies.

About this Topic

Tags