Forums

WordPress › Support » Themes and Templates

Image rollover/mouseover (13 posts)

  1. dod1983
    Member
    Posted 1 year ago #

    Hi,
    I'm building a site were there will be a map on the homepage. I want to put in hotspots on the map (different towns) so that when a user hovers over it a more detailed image appears which the user can click on and then having it appear in the sidebar with some information written below it. Any ideas. I am a novice at programming but have experience using dreamweaver.
    I will be using Artisteer to build the site.
    Any plugins that could do this or something similar. Thanks

  2. Root
    Member
    Posted 1 year ago #

    Duplicate post

  3. keigh
    Member
    Posted 1 year ago #

    I am trying to do something very similar. The links work (currently they are just placeholder #) but the image swap doesn't work. The image swap/restore works perfectly when uploaded as a regular html page, it breaks down inside WordPress however. Does anyone know how to get multiple hot spot image maps with links attached and image swap/restore? I have seven hostspots/image-swap/links in this image.

    Thanks. See code below:
    [Moderator note: snipped code block, please use the pastebin as per the Forum Guidelines]

  4. keigh
    Member
    Posted 1 year ago #

    STOP THE PRESSES!!!!! I GOT THIS TO WORK!!!!

  5. tedinoz
    Member
    Posted 1 year ago #

    FWIW, I was looking for the same things a few months ago.

    I found a very good solution at dougv.com.

    Here's the example for the rollover.

    Regards

    Ted

  6. windstyles
    Member
    Posted 1 year ago #

    keigh, can you tell us how you got this to work, please?

    thanks!

  7. dod1983
    Member
    Posted 1 year ago #

    This is what I used in the end.

    http://www.imapbuilder.com/

  8. keigh
    Member
    Posted 1 year ago #

    windstyles - I created the image maps with rollovers in Dreamweaver and then copied the code and pasted into the HTML editor on WordPress. I then copied the javascript code (in the header of the Dreamweaver Page (and created by the program) into the TEMPLATE for the page I was using.

    The page you can see it on is:
    http://global-zen.com/

    Each circle has a rollover graphic - there are seven hotspot/rollovers in the image in total.

    HTML CODE:
    [Moderator note: snipped code block, please use the pastebin as per the Forum Guidelines]

    JAVASCRIPT for PAGE TEMPLATE:
    [Moderator note: snipped code block, please use the pastebin as per the Forum Guidelines]

    I hope this helps!!!!!

  9. keigh
    Member
    Posted 1 year ago #

    Note: I replaced the code: href=# with the actual WP page link inside WordPress. Forgot to mention that.

    Keigh

  10. williamv2010
    Member
    Posted 8 months ago #

    Hello guys,

    i seem to be hitting the same problems you faced. can you let me know how you moved the working dreamweaver file to work in wordpress? i have created an external file... added the functions from the <head> of the dreamweaver file into its own file called rollover.js and i included a line in the header.php to point to that file.
    then i just took the <body> code containing all the hotspot info and pointers to the images with the function calls and stuck them on a page.. the image bacground works, as do the hotspots... just not seeing the images changing on mouse-over events?

    can anyone help me pleeese... pretty please.....?
    thanks

    William

  11. keigh
    Member
    Posted 7 months ago #

    Hello Williamv2010,
    I didn't move the dreamweaver file over, per say. Instead I took the Dreamweaver generated javascript and added it the php template for the page layout I was using in WordPress. Then I took the code inside the body where the image maps and swap/restore are located and pasted them into the WordPress html (as opposed to visual) editor on the Page.

    Hope this helps.

    Keigh

  12. higirl_21
    Member
    Posted 6 months ago #

    hello keigh,
    im also want to know in detail the hover that u did..in ur message here(forum). i can't understand. pls help me coz i have a target on my website to be launched. pls email me the detail i f u dont mind..i need it badly. pls help me
    email add: higirl_21@yahoo.com

  13. menzini
    Member
    Posted 6 months ago #

    Hello,
    I have a similar problem. I want a scrollbar with small images on the right side. When I hover over these images they should appear in a container on the left side next to the small images in bigger scale.
    When I click on the small images on the side they should link to a different page.

    Any help would be really appreciated!!!!

    Thank's in advance

    Jan

Topic Closed

This topic has been closed to new replies.

About this Topic

Tags