Image Mapping with Mouseover / Rollover (9 posts)

  1. simontrevenna
    Posted 3 years ago #


    Really hoping for some help!

    I'm trying to create an image map of different British regions, and have made all of the graphics necessary.

    I want the different regions to be clickable.... this bit isn't too tricky.

    However, what I really really want, is for a mouseover (rollover / hover) feature, so when you have the mouse over a given region on the national map, it pulls another image which shows that region highlighted in a different colour.

    I have made identically sized overlays (in photoshop) for each individual reagion showing them in a highlighted colour, but struggling to complete the desired mouseover to link through effect.

    Lets say my base image is called 'http://www.example.com/UKmap.png' and on mouseover of Scotland I want 'http://www.example.com/scotland.png' to appear.

    I Tried this in my HTML window and it didn't work..... any ideas?

    <map id="imgmap201210593326" name="imgmap201210593326"> <area title="Scotland" shape="poly" coords="107,125,116,68,124,67,124,60,114,37,128,36,155,
    115,150,103,139" href="www.example.com/scotland-classifieds" alt="Scotland" target="_blank" OnMouseOver="http://www.example.com/scotland.png" OnMouseOut= "http://www.example.com/UKmap.png"/></map>

    Where have i gone wrong?

    Many Thanks


  2. s_ha_dum
    Posted 3 years ago #

    You can't just shove an URL into Javascript like that. You have to put valid Javascript, like here http://www.dynamicdrive.com/dynamicindex5/popinfo2.htm

    You are going to have a problem with this in that popups can be and frequently are blocked. If I remember correctly, Firefox, Chrome, and Safari block them by default. I don't know about IE, but I would guess it probably does. This is because popups almost killed Javascript. If you are old enough to remember the glory days of popups, you will understand why.

    I would suggest you use something like ClueTip instead. It doesn't actually create a popup. It makes a CSS overlay. This is the same principle used by Thickbox, which is used in wp-admin for the media uploader. There are a number of other similar libraries. I mention that one because I've used it, but one of the others may suit you better.

  3. EinKinder
    Posted 3 years ago #

    Have you found a solution? I am trying to do a very similar feature.

  4. s_ha_dum
    Posted 3 years ago #

    I told you what you need to do. You can see something like what you describe at http://www.electoral-vote.com/ using wz_tooltip instead of ClueTip, which I mentioned.

  5. stretchphoto
    Posted 3 years ago #

    Thank you S_Ha for that great post.

    I teach visual journalism a the University of Illinois. My students are working this semester to create a web site that tells the stories of 16 individuals who live in a very poor neighborhood in our community.

    On the splash page of the site, we want to have a stylized map of the neighborhood that also functions as a visual index/overview of the 16 pages of the site. When a user rolls over the location where one of the 16 subjects lives, a photo of that person would pop up with a synopsis of their story. If the user then clicks, she would be taken to that person's page within the site.

    It looks like wz_tooltip, as implemented on electoral-vote.com, is exactly what we need.

    Thanks again!

    ps - I love the WordPress community! :)

  6. wpok
    Posted 2 years ago #

    Hi guys,

    Actually I think that a JavaScript is not needed here.
    The problem is that the OnMouseOver image can't just be an image for the area interested.
    It has to be a replacement of the whole image.

    To make myself clear, in your example:
    - standard image is whole UK
    - OnMouseOver image for the Scotland area will be an image with the whole UK (with Scotland highlighted).

    This way it works, no JS required.


  7. mytex
    Posted 2 years ago #

    Hi all,

    Trying to achieve exactly the same thing I came across this thread but am a bit mystified about your post dabesa! I have already tried as you suggest but it didn't work so feel that javascript or using CSS is needed. Here is the code I am trying for the HTML solution:

    <img name="xxx" class="aligncenter" alt="xxx" src="C:\pic1.jpg" usemap="#tryit" />
    <map name="tryit">
    <area alt="try it out" coords="97,42,246,119,32,119,51,74" shape="poly" href="mailto:person@wow.com" onMouseOver="C:pic2.jpg" onMouseOut="C:\pic1.jpg" />  

    The href works just fine but the mouseover doesn't swap the image for pic2.jpg!

    Any advice much appreciated. Thanks everyone.

  8. esmi
    Forum Moderator
    Posted 2 years ago #

    @mytex: As per the Forum Welcome, please post your own topic. Posting in an existing topic prevents us from being able to track issues by topic. Added to which, your problem - despite any similarity in symptoms - is likely to be completely different.

  9. mytex
    Posted 2 years ago #

    OK esmi. Apologies if I should have done this but my problem is exactly what the original post from Simon was outlining so I thought it would be relevant to this post.

    ....and in case someone else is having the same problem, I found the solution. Add an id to the IMG tag and then use this in the area tag specifying the flip image as follows:

    <area onmouseover="document.getElementById('map-id-here').src='new-picture-ref-here.jpg';"

    This works for me.


Topic Closed

This topic has been closed to new replies.

About this Topic