Question

how can i associate an anchor tag with image maps?

Suppose, I hover over an anchor tag, it should select the mapped region on the image.

Something like this http://myffi.biz/. This is in flash, but can this be done using image maps? You hover over on the links and it should select the mapped region on the image.

Is this possible? I hope i am clear

Answer 1

Yes, it can be done without Flash but you don’t need imagemaps at all. Just have a hover event fadeIn the correct image on the map, that’s easy to do with jQuery. Something like this might work:

<ul class="region">
    <li><a href="#" id="europe">Europe</a></li>
    <li><a href="#" id="asia">Asia</a></li>
    <li><a href="#" id="africa">Africa</a></li>
    <li><a href="#" id="australia">Australia</a></li>
</ul>
<div id="region-map">
    <div id="region-overlay"></div>
</div>

And in CSS, you define the region-map as having a background where no regions selected, and region-overlay has different regions selected.

#region-map, #region-overlay {
    width: 640px;
    height: 320px;
}

#region-map {
    background: url(map-base.jpg) 0 0 no-repeat;
}

#region-overlay.europe {
    background: url(map-europe.jpg) 0 0 no-repeat;
}

#region-overlay.asia {
    background: url(map-asia.jpg) 0 0 no-repeat;
}

#region-overlay.africa {
    background: url(map-africa.jpg) 0 0 no-repeat;
}

#region-overlay.australia {
    background: url(map-australia.jpg) 0 0 no-repeat;
}

And the jQuery code needed:

$(function() {
    $('ul.region a').hover(function() {
        // Get the current region
        var region = $(this).attr('id');
        // Hide the current overlay, change it's map and change it back.
        $('#region-overlay').fadeOut(200, function() {
            $(this).attr('class', region).fadeIn(200);
        });
    }, function() {
        // Hide the overlay
        $('#region-overlay').fadeOut(200);
    });
});

This isn’t perfect but should get you started.

A working example can be found at:

http://www.ulmanen.fi/stuff/hovermap/