Ultimate Fade In Slideshow v2.0 with 2x hotspots/image maps

[jamieclock]

Hi,
I've used The Ultimate Fade in Slideshow a few times and love it!!

I'm currently trying to do something with it but not sure how and would really appreciate some help.

The idea is to have a selection of 6 images fading through the slideshow but the images have areas on the left hand side saying 'click here for details on blah blah' and on the right hand side is saying 'click here for details on blah blah blah' (message is on the same place on all 6 of the fading images) sending you to 2 different urls.

The images are 920px x 339px and I'd like 2 hotspots/image maps dividing the images (left and right).

I know it's pretty simple to direct you to another url when you 'click' on the slideshow but I need 2 areas on the same slideshow to take you to 2 diferent urls.

Hope this is clear...

Can anyone help???

[XManBG]

Hi,

I can imagine, that I'll place two transparent absolutely positioned divs over the slider with the images, where the first leads on click to the first url, and the second to the second url.

Cheers

[jamieclock]

Thanks Xman, I tried that but doesn't seem to work when it's over the top of the JS slideshow ;o( Any ideas why not?

Thanks

[azoomer]

You need to give the divs a high z-index. Try z-index:1100

here is an example of a way it could be done

[jamieclock]

Thanks azoomer, I had a look at your example and can see what you've done.
I tried to apply the same to mine but as soon as I try to change the coordinated of the boxes, it moves the grey boxes to sit over the slideshow but pushes the text links below...

I've uploaded my text page and supplied a link below if you could possibly spare a few minutes to take a look, I'd be very grateful.

www.clockwork-design.com/CLIENTS/Chatfield

I also have Cufon working on the same page, I hope that's not interfering.

Thanks

J

[jscheuer1]

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js"></script>
<script type="text/javascript" src="fadeslideshow.js">
/***********************************************
* Ultimate Fade In Slideshow v2.0- (c) Dynamic Drive DHTML code library (www.dynamicdrive.com)
* This notice MUST stay intact for legal use
* Visit Dynamic Drive at http://www.dynamicdrive.com/ for this script and 100s more
***********************************************/
</script>
<script type="text/javascript">
var mygallery=new fadeSlideShow({
	wrapperid: "fadeshow1", //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:'auto', pause:2500, 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 set = this.setting, halfwidth = set.dimensions[0]/2, $urllinks;
			set.$wrapperdiv.append('<a style="top: 0; left: 0;"></a><a style="top: 0; left: ' + halfwidth + 'px;"></a>');
			set.$urllinks = set.$wrapperdiv.find('a').last().prev().add(set.$wrapperdiv.find('a').last())
			.css({display: 'block', height: set.dimensions[1], width: halfwidth, position: 'absolute', zIndex: 1001})
			/*@cc_on @*//*@if(@_jscript_version >= 5).css({backgroundImage: 'url(placeboforhover.gif)'})@end @*/
			.eq(0).attr({href: 'http://www.google.com/', title: 'Click for info on Google'}).end()
			.eq(1).attr({href: 'http://www.dynamicdrive.com/', title: 'Click for info on Dynamic Drive'}).end();
		},
	onslide: function(activelayer, curindex){
		//may be used to dynamically update links
		//they'll be known as: this.setting.$urllinks.eq(0) and this.setting.$urllinks.eq(1)
	}
})
</script>

Notes:

This is in place of, not in addition to previous methods. It places the links inside the wrapper and makes them elements of the script that could be updated from existing or additional entries in each imagearray item. Any questions, feel free to ask.

[jamieclock]

That's it John!! it works perfect now! Thank you so much