Image Mapping with Mouseover / Rollover

  • Hi,

    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 ‘https://www.example.com/UKmap.png’ and on mouseover of Scotland I want ‘https://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,
33,155,77,207,92,206,115,174,174,155,231,97,212,99,211,
115,150,103,139" href="www.example.com/scotland-classifieds" alt="Scotland" target="_blank" OnMouseOver="https://www.example.com/scotland.png" OnMouseOut= "https://www.example.com/UKmap.png"/></map>

    Where have i gone wrong?

    Many Thanks

    Simon

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

  • You can’t just shove an URL into Javascript like that. You have to put valid Javascript, like here https://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.

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

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

    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! ??

    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.

    Cheers!

    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:

    <html>
<body>

<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:[email protected]" onMouseOver="C:pic2.jpg" onMouseOut="C:\pic1.jpg" />  

 </map>
</body>
</html>

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

    Any advice much appreciated. Thanks everyone.

    @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.

    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.

    Thanks

Viewing 8 replies - 1 through 8 (of 8 total)
  • The topic ‘Image Mapping with Mouseover / Rollover’ is closed to new replies.