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

[newDev]

Hi - thanks to this thread and John I have image maps working inside the ultimate slide show. I have one issue -- when the user hovers over an image in the slideshow the slideshow pauses (which is perfect) however if the user is on an image and then hovers over the image mapped area - the slideshow starts again.

Any idea on how to resolve that would be greatly appreciated. Thanks.