Basically I need this:

...but instead of just having the <AREA> tags recieve a border or fill color on rollover, have them recieve a background image. The image needs to be clipped by the shape of the <AREA>s.

Any ideas?

Basically the setup I have is as follows:

<img usemap="#map" />
<map name="map">
  <area coords="foo,bar">
  <area coords="foo,bar">
  <area coords="foo,bar">
</map>

And I want the background image of each AREA tag to change on rollover.

A faux version of what I want is here:

tankedup-imaging. /css_dev/rollover.html

...except that here, notice this is not a "true" image map, the rollover areas are not really bound by AREA tags.

Basically I need this:

http://plugins.jquery./project/maphilight

...but instead of just having the <AREA> tags recieve a border or fill color on rollover, have them recieve a background image. The image needs to be clipped by the shape of the <AREA>s.

Any ideas?

Basically the setup I have is as follows:

<img usemap="#map" />
<map name="map">
  <area coords="foo,bar">
  <area coords="foo,bar">
  <area coords="foo,bar">
</map>

And I want the background image of each AREA tag to change on rollover.

A faux version of what I want is here:

tankedup-imaging. /css_dev/rollover.html

...except that here, notice this is not a "true" image map, the rollover areas are not really bound by AREA tags.

• javascript
• jquery
• html
• css
• xhtml

• I can't get the jQuery plugin page to load. Hopefully, what I put in my answer is close to what you are looking for. – Raleigh Buckner Commented Sep 2, 2009 at 21:53

2 Answers 2

I don't think you can do this with a true image map:

<img usemap="#map" />
<map name="map">
    <area coords="foo,bar">
    <area coords="foo,bar">
    <area coords="foo,bar">
</map>

But, there is a way to do what you are wanting with only HTML and CSS using a variation of the CSS sprites technique. A tutorial of how to do it is here: http://www.noobcube./tutorials/html-css/css-image-maps-a-beginners-guide-/

A short overview of this technique: DEMO Code

First, create your image as you would normally. Then, create your various over states by doubling the canvas size of your image and putting the hover look in the new bottom half of the image. You will end up with something like this:

I hope your image looks better than this. http://demo.raleighbuckner./so/1369820/test.jpg

Next es the HTML and CSS. We will use an unordered list:

<style>
    #fakeMap { 
        list-style: none; margin: 0; padding: 0;  /* removes the default UL styling */
        position: relative;                       /* allows the LIs to be positioned */
        width: 200px;                             /* width of the image */
        height: 100px;                            /* height of the image */
        background: url(test.jpg) no-repeat 0 0; /* shows the image */      
    }
    #fakeMap li {
        position:absolute; /* these will be the "area" elements */
    }
    #fakeMap a {
        display:block;        /* along with the width and height, makes the link */
        width:100%;           /*  clickable for the full size of the LI          */
        height:100%;
        text-indent:-5000px;  /* pushes the text of the link offscreen */
    }

    /* Set up each LI to be the right size and positon. */
    #maplink1 { width:15px; height:15px; top:10px; left:10px; }
    #maplink2 { width:20px; height:20px; top:30px; left:30px; }
    #maplink3 { width:80px; height:30px; top:20px; left:70px; }

    /* Set the image for all of the links. */
    #fakeMap a:hover { background: url(test.jpg) no-repeat; }

    /* Set the position of the bg for each link individually. */
    #fakeMap #maplink1 a:hover { background-position:-10px -110px; }
    #fakeMap #maplink2 a:hover { background-position:-30px -130px; }
    #fakeMap #maplink3 a:hover { background-position:-70px -120px; }
</style>

<ul id="fakeMap">
    <li id="maplink1"><a href="link1.htm">Link 1 Text</a></li>
    <li id="maplink2"><a href="link2.htm">Link 2 Text</a></li>
    <li id="maplink3"><a href="link3.htm">Link 3 Text</a></li>
</ul> 

OK, my solution.

Start with an image map like so:

<img src="nav.jpg" id="main-nav" usemap="#imagemap" />              

<map id="imagemap" name="imagemap">
    <area id="item1" href="item1.shtml" shape="poly" coords="153,52,484,6,492,43,158,74" />
    <area id="item2" href="item2.shtml" shape="poly" coords="95,96,287,84,289,112,95,118,97,118" />
</map>

Then, I use jQuery to swap the SRC attribute of the IMG when the user hovers over each specific AREA, then return the IMG to the off state on mouseout.

$(document).ready(function() {

//set off state 
var nav_off = "/images/nav-off.jpg";

// functions for over and off
function over(image) {
    $("#main-nav").attr("src", image);
}
function off() {
    $("#main-nav").attr("src", nav_off);
}

$("#imagemap area").hover(
    function () {
        var button = $(this).attr("id");
        over("/images/nav-" + button + ".jpg");
    },
    function () {
        off();
    });

});

This could probably be bined with CSS Sprites somehow, swapping the background-position of some image during rollover.