WordPress.org

Ready to get started?Download WordPress

Forums

Slider plus image map (6 posts)

  1. enrico512
    Member
    Posted 2 years ago #

    Guys,

    I really need your help. I'd like to put some hotspot/image maps in the images on my slider. Is there a plugin for that? If not please give suggestions how I can do it. Thanks in advance!

  2. DDT
    Member
    Posted 2 years ago #

    sorry no tips.

    just like to know as well.

  3. yours2share
    Member
    Posted 2 years ago #

    I'm also looking for this!

  4. cycas
    Member
    Posted 2 years ago #

    I just spent some time working out how to do this so although this thread is a bit old, I thought I'd add to it and just note how I did it for the benefit of others.

    I used this plugin to do the slider : http://wordpress.org/extend/plugins/wp-cycle/

    That plugin gives you a shortcode, but you need to be able to modify the image code in your slideshow to call the imagemaps, so I didn't use the shortcode, I put the code into my template direct.

    So, in my new template used just for my slider page, I put in


    <div id="rotator">
    <img src="/wp-content/uploads/2012/07/ham.jpg" width="1000" height="460" class="20120710130219" alt="Ham" usemap="#ham" />
    <img src="/wp-content/uploads/2012/07/eggs.jpg" width="1000" height="460" class="20120710130018" alt="Eggs" usemap="#eggs"/>
    </div>

    (the rotator ID is the default one that wp-cycle plugin looks for, but you can rename it in the plugin settings if you want. )

    And then my imagemap:

    <map id="ham" name="ham"><area shape="rect" coords="1,1,1000,460" href="/2013-ham/"></map>
    <map id="eggs" name="eggs">
    <area shape="rect" coords="1,1,300,460" href="/2013-hen/">
    <area shape="rect" coords="300,1,700,460" href="/2013-duck/">
    <area shape="rect" coords="700,1,1000,460" href="/2013-quail/">
    </map>

    Yes, I know name= is deprecated, but you need to specify a name in imagemap if it's going to work in Safari or Chrome.

    This example shows the first slideshow image as one big link, and then the second with three links. You need to set the transition so it's not too long, otherwise it gets confusing when it flips from one imagemap to the next.

    I actually tried doing this with the Wowslider plugin first, but imagemaps don't work with that slider script.

  5. enrico512
    Member
    Posted 2 years ago #

    I could still make use of this. :)

    Thank you Cycas!

  6. cycas
    Member
    Posted 2 years ago #

    I noted that there seem to be a few issues reported by some people in the wp-cycle support thread, but I've just installed that plugin on a new site running the latest WP, and it's working fine, so I'm guessing that the people who are having problems may have a plugin conflict with another plugin I'm not using.

    If you do have problems, http://wordpress.org/extend/plugins/jj-nextgen-jquery-cycle/ may also be worth a try. I didn't test that as I didn't have any particular need to install NextGen gallery: my slideshow is quite simple and there is only one of it, so I was fine just uploading the images and embedding them as shown.

Topic Closed

This topic has been closed to new replies.

About this Topic