That is exactly what the page I linked to does: you put a plain image
of the map with the image map, then overlay transparent GIFs (with the
states) on top of each other, with the map area on top. Then you show/
hide each one of them depending on the <area> you're hovering. Try
visiting the link I gave, that's exactly how it works.
cheers,
- ricardo
On Dec 4, 3:28 am, "David .Wu" <[EMAIL PROTECTED]> wrote:
> Hi, my question is, there are maybe many area in one map, how to show
> different pictures when mouse over each of them.
>
> On 11月14日, 上午12時42分, livefree75 <[EMAIL PROTECTED]> wrote:
>
> > I couldn't get your link to load, but it sounds like you may need to
> > do something similar to the following. The image you're mapping would
> > need to be either relative or absolutely positioned.
>
> > Note that #map_area is the <map> area you're mousing over.
> > #bg_image is the image the map is on.
>
> > Not sure if this would work - you may need to get the top/left/width/
> > height of the map area some other way.
>
> > $("#map_area").mouseover(function() {
> > var bg_image = $("#bg_image");
> > var hover_img = document.createElement("img");
> > $(hover_img).css({
> > position: 'absolute',
> > top : $(this).css('top'),
> > left : $(this).css('left'),
> > zIndex : (bg_image.css("z-index") + 1)
> > }).
> > width($(this).width()).
> > height($(this).height()).
> > mouseout(function() {
> > $(this).remove();
> > }).
> > insertAfter(bg_image);
>
> > });
>
> > Jamie
