How to use usemap with a FadeSlideShow?

Question

I'm trying to set the usemap attribute to one of these images which are added to the imagearray. The code below is a FadeSlide in javascript, but I'd like to instantiate some map attributes over one of those images. Thanks.

<script type="text/javascript">

var mygallery=new fadeSlideShow({
    wrapperid: "fadeshow1",
    dimensions: [250, 180],
    imagearray: [
        ["http://i26.tinypic.com/11l7ls0.jpg", "", "", "Nothing beats relaxing next to the pool when the weather is hot."],
        ["http://i29.tinypic.com/xp3hns.jpg", "http://en.wikipedia.org/wiki/Cave", "_new", "Some day I'd like to explore these caves!"]
    ],
    displaymode: {type:'auto', pause:2500, cycles:0, wraparound:false},
    persist: false, 
    fadeduration: 500,
    descreveal: "ondemand",
    togglerid: ""
})

Answer 1

You could add it with JS code like

$('#fadeshow1').find('img').each(function() {
    $(this).attr('usemap', '#imgmap');
});

Answer 2

I would suggest to use a different plugin.

The problem is that FadeSlide generates markup for you instead of enhancing existing markup in your document. That makes your choices limited if you want to use some custom markup for the images (e.g. usemap attribute). Also it violates progressive enhancement principle.

If you use some plugin like JQuery Cycle you can incorporate sitemap easily:

<div id="slider">
  <img src="http://img1.jpg" width="200" height="200" usemap="#mymap1" />
  <img src="http://img2.jpg" width="200" height="200" usemap="#mymap2" />
</div>

Then in JavaScript:

$('#slider').cycle();

That plugin is also very robust in terms of different options.