Image Map on Colorway Slider

Discussion in 'ColorWay WordPress Theme' started by seenacs, Aug 15, 2013.

  1. seenacs

    seenacs New Member

    Joined:
    Jan 4, 2013
    Messages:
    12
    Likes Received:
    0
    I want to overlay an image map onto the image slider, preferably one that could change when the slider changes, but that isn't necessary. I am not sure where I would need to insert the necessary coding in order to make this work. I don't think it would work in the styles.css file, nor do I think it would work in the index.php file.

    Any guidance as to where to input that code?
     
  2. Gourav

    Gourav Support Staff

    Joined:
    Oct 19, 2012
    Messages:
    7,728
    Likes Received:
    207
    Hello,

    I cannot get your issue exactly but if you want to add Google map on your slider then follow the process given below
    Just go to https://maps.google.com/ and copy your iframe embed code from there.

    Sending image for reference
    2013-08-16_1507.png


    Now,

    Go to Appearance > Theme Option > Slider Settings > First Slider Image

    and paste your Google map Iframe embed code there.
     
  3. seenacs

    seenacs New Member

    Joined:
    Jan 4, 2013
    Messages:
    12
    Likes Received:
    0
    That coding may be useful, so thank you for providing it. However not what I am trying to do. I want to take the single image that displays in the slider (in my case I'm using a .png) and make certain parts of it clickable, and I want each area that is clickable to take you to a different link.
     
  4. Nitesh

    Nitesh Support Staff

    Joined:
    Oct 19, 2012
    Messages:
    5,165
    Likes Received:
    160
    Hello,

    You can upload .png file through theme options.
    Appearance > Theme options > slider settings.
     
  5. seenacs

    seenacs New Member

    Joined:
    Jan 4, 2013
    Messages:
    12
    Likes Received:
    0
    Thanks. I know that. I already have a png file up there. The problem is then dividing up the sections of the image. Visit the site, http://www.brightworkhome.com/ and view the home page.

    I want the each porthole on the image to be a link to a different place.

    I have tried this in other places on the website avoiding the home page as is, and considering making it a static page and it won't work anywhere.
     
  6. Gourav

    Gourav Support Staff

    Joined:
    Oct 19, 2012
    Messages:
    7,728
    Likes Received:
    207
    Hello,

    To achieve this,

    You can use three column shortcode for your desired page

    Code:
    [col3]
        <a href="Enter your link here"><img src="Enter your image address"/></a>
    [/col3][col3]
        <a href="Enter your link here"><img src="Enter your image address"/></a>
    [/col3][col3_last]
        <a href="Enter your link here"><img src="Enter your image address"/></a>
    [/col3_last]
    
    Also follow the link given below

    http://www.inkthemes.com/how-to-use-shortcodes-in-themes/02/
     

Share This Page