Slideshow with image maps (image maps change with slides)

[sonofray]

I'm looking for a slideshow solution (JavaScript, JQuery, whatever) that will allow image maps/hotspots that will be unique to each slide. I've got slideshows, I've got image maps with great sticky tooltips, and I want one SCRIPT TO RULE THEM ALL!

Thanks,

- Michael

[vwphillips]

http://www.vicsjavascripts.org.uk/Ma...pSlideShow.htm

[jscheuer1]

Or you could go with the Ultimate Fade-in Slide Show:

http://www.dynamicdrive.com/dynamici...nslideshow.htm

Use an oninit as highlighted below:

var mygallery2=new fadeSlideShow({
	wrapperid: "fadeshow2", //ID of blank DIV on page to house Slideshow
	dimensions: [250, 180], //width/height of gallery in pixels. Should reflect dimensions of largest image
	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!"],
		["http://i30.tinypic.com/531q3n.jpg"],
		["http://i31.tinypic.com/119w28m.jpg", "", "", "What a beautiful scene with everything changing colors."] //<--no trailing comma after very last image element!
	],
	displaymode: {type:'manual', pause:2500, cycles:0, wraparound:false},
	persist: false, //remember last viewed slide and recall within same session?
	fadeduration: 500, //transition duration (milliseconds)
	descreveal: "always",
	togglerid: "fadeshow2toggler",
	oninit: function(){
		jQuery('#' + this.setting.wrapperid + ' .gallerylayer').each(function(){
			jQuery(this).find('img').each(function(i){
				jQuery(this).attr('usemap', '#' + (i + 1));
			});
		});
	}
})

Don't miss the added comma (red) after the togglerid value.

Then each of the images in the slide show will use respectively maps named:

#1
#2
#3

and so on for however many images are in the slideshow.

[sonofray]

How could I not use something called "Ultimate?"

I'm used to normal maps on a placed image like this:

  <div id="slides"><img src="images/slides1_03.jpg" alt="" width="960" height="420" border="0" usemap="#Map" />
    <map name="Map" id="Map"><area shape="rect" coords="7,393,60,415" href="index.html" target="_self" alt="Slide 1" /><area shape="rect" coords="66,394,121,416" href="slide2.html" target="_self" alt="Slide 2" /><area shape="rect" coords="128,393,180,418" href="slide3.html" target="_self" alt="Slide 3" /><area shape="rect" coords="188,393,240,417" href="slide4.html" target="_self" alt="Slide 4" /><area shape="rect" coords="247,393,300,418" href="slide5.html" target="_self" alt="Slide 5" />
      <area shape="rect" coords="906,122,958,253" href="slide2.html" alt="next page" />
    </map>

So where would they go in your code below?:

var mygallery2=new fadeSlideShow({
	wrapperid: "fadeshow2", //ID of blank DIV on page to house Slideshow
	dimensions: [250, 180], //width/height of gallery in pixels. Should reflect dimensions of largest image
	imagearray: [
		["images/dog.jpg", "", "", "Nothing beats relaxing next to the pool when the weather is hot."],
		["images/fruits.jpg", "http://en.wikipedia.org/wiki/Cave", "_new", "Some day I'd like to explore these caves!"],
		["images/pool.jpg"],
		["images/cave.jpg", "", "", "What a beautiful scene with everything changing colors."] //<--no trailing comma after very last image element!
	],
	displaymode: {type:'manual', pause:2500, cycles:0, wraparound:false},
	persist: false, //remember last viewed slide and recall within same session?
	fadeduration: 500, //transition duration (milliseconds)
	descreveal: "always",
	togglerid: "fadeshow2toggler",
		oninit: function(){
		jQuery('#' + this.setting.wrapperid + ' .gallerylayer').each(function(){
			jQuery(this).find('img').each(function(i){
				jQuery(this).attr('usemap', '#' + (i + 1));
			});
		});
	}
})

</script>

Thanks so much.

- Michael

[jscheuer1]

The slideshow will generate this part (you won't see it, but it will be part of the page):

<img src="images/slides1_03.jpg" alt="" width="960" height="420" border="0" usemap="#Map" />

Only instead of:

usemap="#Map"

it will be:

usemap="#1"

and #2 for the next and #3 for the next and so on for all of the slideshow images in order.

So, elsewhere on your page you can put:

    <map name="1" id="1"><area shape="rect" coords="7,393,60,415" href="index.html" target="_self" alt="Slide 1" /><area shape="rect" coords="66,394,121,416" href="slide2.html" target="_self" alt="Slide 2" /><area shape="rect" coords="128,393,180,418" href="slide3.html" target="_self" alt="Slide 3" /><area shape="rect" coords="188,393,240,417" href="slide4.html" target="_self" alt="Slide 4" /><area shape="rect" coords="247,393,300,418" href="slide5.html" target="_self" alt="Slide 5" />
      <area shape="rect" coords="906,122,958,253" href="slide2.html" alt="next page" />
    </map>

and then another with:

    <map name="2" id="2"><area shape="rect" co . . .

and so on, each time increasing the number until you have one for each of the images in the slideshow.

[sonofray]

YES! I've got the Ultimate Slideshow WITH Image Maps WITH Sticky Tooltips. You've helped me and taught me, and I am eternally grateful jscheuer1. Many forums are not as friendly.

Blessings,

- Michael

[WebSurfer]

Thank you so much jscheuer1,
this was exactly what I was looking for. I didn't dare to implement imagemaps into the slideshow, but when I read your post, I gave it a try. And it works perfect.

[scottmc]

Taking this one step further, how would I now use those image map links to go from slide to slide. So, for example, on the images I am rotating, I have 4 circles, each indicating the position in the slide show, so, it shows 4 bubbles and if you are on the 3rd slide, only the 3rd circle is solid. I have an image map on these circles, and I assume now I just need a function to add in the script above that will navigate the slide show to the corresponding slide? I've been messing with functions within this but haven't been successful yet - please help!

[jscheuer1]

That doesn't sound like an image map to me. That sounds like navigation buttons. See:

http://www.dynamicdrive.com/forums/e...e-in-slideshow