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

    higirl_21

    (@higirl_21)

    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]

    menzini

    (@menzini)

    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.