How to use usemap with FadeSlideShow?

Question

I am trying to set the usemap attribute for one of these images that are added to the imagearray file. Below is the FadeSlide code in javascript, but I would like to create some map attributes from one of these 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 can add it using JS code like

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

Answer 2

I would suggest using a different plugin.

The problem is that FadeSlide creates markup for you instead of improving the existing markup in your document. This makes your choice limited if you want to use custom markup for images (e.g. usemap ). He also violates the principle of progressive improvement .

If you use some kind of plugin, for example JQuery Cycle , you can easily add a sitemap:

 <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(); 

This plugin is also very reliable in terms of various parameters.