Question

Basically I need this:

http://plugins.jquery.com/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. com/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.

Answer 1

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 combined with CSS Sprites somehow, swapping the background-position of some image during rollover.