Image rollover/mouseover

  • 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

Viewing 12 replies - 1 through 12 (of 12 total)

  • Duplicate post

    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]

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

    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

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

    thanks!

    Thread Starter dod1983

    (@dod1983)

    This is what I used in the end.

    https://www.imapbuilder.com/

    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:
    https://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!!!!!

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

    Keigh

    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

    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

    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: [email protected]

    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

Viewing 12 replies - 1 through 12 (of 12 total)
  • The topic ‘Image rollover/mouseover’ is closed to new replies.