Ultimate Fade In Slideshow v2.0 -

**RobertDesigner** · 05-02-2013, 05:17 PM

I'm using "Ulitmate Fade In Slideshow v2.0" on a "Volusion" platform e-comm site. The slide show works great however, I'd like to define multiple link areas on some of the slide images.

Currently, each slide has basically the following settings:

["/Config_ImagesFolder/slideshow/slide_brands03.jpg", "http://www.runnersmark.com/category_s/1817.htm", "", ""],

How and where do I add the "map" info to the image (in this case "slide_brands03.jpg") so that when someone click on that map, it links to another page?

Thanks in advance,

Robert

**jscheuer1** · 05-02-2013, 07:54 PM

Please post about Dynamic Drive Scripts in the Dynamic Drive Scripts Help section here where I've moved this thread, and:

Warning: Please include a link to the DD script(s) in question in your post. See this post for more information.

I happen to know this script quite well, so in this case I will tell you what I know about using it with an image map. Basically all you have to do is give the image a usemap attribute, and then, somewhere else on the page, make an image map with that name. You might also need to make the mouseenter event of the map(s) be the same as the mouseenter event of the slideshow (for the pause onmouseover and mouseover captions, if any).

Fortunately the slideshow has an oninit event that you can setup for the on page call, where all of that, except adding the map itself to the page can be done.

How many maps did you have in mind? One person I did this with had only one map that they wanted used for all of the images. But a separate map can be made for each, and I believe I've set that up for at least one person as well. Yes, there's a thread on it:

http://www.dynamicdrive.com/forums/s...e-with-slides)

That's for using a different map for each image. If you want a single map for all, or want something else, or have any questions, let me know about it in this thread.

**RobertDesigner** · 05-02-2013, 08:44 PM

Thanks for the quick reply. I'm new to this forum so I apologize for posting in the wrong area.

I'm working on the following site: "http://www.runnersmark.com"

The existing slide show code, which works fine is:

<div id="homepage">
<div id="homeLeft">
<div id="slideshow">


<script type="text/javascript">

var mygallery=new fadeSlideShow({
wrapperid: "fadeshow1", //ID of blank DIV on page to house Slideshow
dimensions: [756, 282], //width/height of gallery in pixels. Should reflect dimensions of largest image
imagearray: [
["/Config_ImagesFolder/slideshow/slide_brands03.jpg", "http://www.runnersmark.com/category_s/1817.htm", "", ""],
["/Config_ImagesFolder/slideshow/slide_price2.jpg", "http://www.runnersmark.com/category_s/1817.htm", "", ""],
["/Config_ImagesFolder/slideshow/slide_shipping2.jpg", "http://www.runnersmark.com/returns.asp", "", ""],
["/Config_ImagesFolder/slideshow/slide_shipnextday2.jpg", "http://www.runnersmark.com/articles.asp?ID=57", "", ""] //<--no trailing comma after very last image element!
],
displaymode: {type:'auto', pause:4500, cycles:0, wraparound:false},
persist: false, //remember last viewed slide and recall within same session?
fadeduration: 500, //transition duration (milliseconds)
descreveal: "ondemand",
togglerid: ""
})

</script>

The slide show has four images, each linking to a different page. That all works correctly however, I'd like to add the following map to only the first image. It's the one with 11 logos.

<map name="1">
<area shape="rect" coords="23,74,172,132" href="http://www.runnersmark.com/SearchResults.asp?mfg=Zoot" alt="Zoot">
<area shape="poly" coords="256,59,233,74,232,98,246,111,205,112,208,135,340,136,355,113,316,108,327,96,328,74,304,59" href="http://www.runnersmark.com/SearchResults.asp?mfg=Vibram+FiveFingers" alt="Vibram FiveFingers">
<area shape="poly" coords="546,75,439,104,425,93,426,73,407,96,407,119,424,128,448,120" href="http://www.runnersmark.com/SearchResults.asp?mfg=Nike" alt="Nike">
<area shape="poly" coords="701,86,593,86,582,119,680,122,699,104,719,107,724,87,733,55,726,53,702,67" href="http://www.runnersmark.com/SearchResults.asp?mfg=Inov%2D8" alt="Inov-8">
<area shape="poly" coords="292,161,146,161,142,176,197,180,223,191,173,203,194,222,259,198,236,181,288,179" href="http://www.runnersmark.com/SearchResults.asp?mfg=Brooks" alt="Brooks">
<area shape="poly" coords="382,185,487,186,494,155,397,157,387,142,364,149,346,182,349,193,366,192" href="http://www.runnersmark.com/SearchResults.asp?mfg=Asics" alt="Asics">
<area shape="poly" coords="654,151,646,142,529,143,528,159,588,161,637,182,666,164,683,162,666,153" href="http://www.runnersmark.com/SearchResults.asp?mfg=Saucony" alt="Saucony">
<area shape="poly" coords="98,178,30,230,34,241,18,247,15,259,22,268,144,269,152,263,153,249,141,245,131,238" href="http://www.runnersmark.com/SearchResults.asp?mfg=Adidas" alt="Adidas">
<area shape="rect" coords="210,233,354,266" href="http://www.runnersmark.com/SearchResults.asp?mfg=Skora" alt="Skora">
<area shape="poly" coords="550,214,495,222,408,254,438,265,540,264,549,244,540,230" href="http://www.runnersmark.com/SearchResults.asp?mfg=Altra" alt="Altra">
<area shape="poly" coords="721,192,652,192,619,248,596,250,598,264,742,263,741,250,693,249" href="http://www.runnersmark.com/SearchResults.asp?mfg=New+Balance" alt="New Balance">
</map>

I looked at the code you mentioned in your initial reply and I wasn't sure how to implement it. I'm not a programmer - only a designer so please be patient.

Thanks for any help,

Rob

**jscheuer1** · 05-02-2013, 09:56 PM

Replace:

Code:

var mygallery=new fadeSlideShow({
 wrapperid: "fadeshow1", //ID of blank DIV on page to house Slideshow
 dimensions: [756, 282], //width/height of gallery in pixels. Should reflect dimensions of largest image
 imagearray: [
 ["/Config_ImagesFolder/slideshow/slide_brands03.jpg", "http://www.runnersmark.com/category_s/1817.htm", "", ""],
 ["/Config_ImagesFolder/slideshow/slide_price2.jpg", "http://www.runnersmark.com/category_s/1817.htm", "", ""],
 ["/Config_ImagesFolder/slideshow/slide_shipping2.jpg", "http://www.runnersmark.com/returns.asp", "", ""],
 ["/Config_ImagesFolder/slideshow/slide_shipnextday2.jpg", "http://www.runnersmark.com/articles.asp?ID=57", "", ""] //<--no trailing comma after very last image element!
 ],
 displaymode: {type:'auto', pause:4500, cycles:0, wraparound:false},
 persist: false, //remember last viewed slide and recall within same session?
 fadeduration: 500, //transition duration (milliseconds)
 descreveal: "ondemand",
 togglerid: ""
 })

with:

Code:

var mygallery=new fadeSlideShow({
 wrapperid: "fadeshow1", //ID of blank DIV on page to house Slideshow
 dimensions: [756, 282], //width/height of gallery in pixels. Should reflect dimensions of largest image
 imagearray: [
 ["/Config_ImagesFolder/slideshow/slide_brands03.jpg", "", "", ""],
 ["/Config_ImagesFolder/slideshow/slide_price2.jpg", "http://www.runnersmark.com/category_s/1817.htm", "", ""],
 ["/Config_ImagesFolder/slideshow/slide_shipping2.jpg", "http://www.runnersmark.com/returns.asp", "", ""],
 ["/Config_ImagesFolder/slideshow/slide_shipnextday2.jpg", "http://www.runnersmark.com/articles.asp?ID=57", "", ""] //<--no trailing comma after very last image element!
 ],
 displaymode: {type:'auto', pause:4500, cycles:0, wraparound:false},
 persist: false, //remember last viewed slide and recall within same session?
 fadeduration: 500, //transition duration (milliseconds)
 descreveal: "ondemand",
 togglerid: "",
	oninit: function(){
		var w = this.setting.$wrapperdiv, $ = jQuery;
		w.find('.gallerylayer').each(function(){
			$(this).find('img').eq(0).attr('usemap', '#1');
		});
		$('map[name="1"]').bind('mouseenter', function(){w.mouseenter();});
	}
})