Image Map in Fade In Slideshow???

**McBain** · 03-07-2006, 07:59 PM

Would anybody know how to put an image map into one of the images in the slideshow?

Thanks

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

**jscheuer1** · 03-08-2006, 09:36 AM

OK, this is technically wrong but, works. First off, define your image map in the head of your document, before the main script, ex:

Code:

<head>
<title>Ufade Imap - Demo</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<map name="m_map">
<area shape="rect" coords="10,10,50,50" href="http://www.google.com" target="_blank" alt="">
<area shape="default" nohref>
</map>
<script type="text/javascript">
/***********************************************
* Ultimate Fade-In Slideshow (v1.5): © Dynamic Drive (http://www.dynamicdrive.com)
* This notice MUST stay intact for legal use
* Visit http://www.dynamicdrive.com/ for this script and 100s more.
***********************************************

Here is an example image array with the new image map syntax shown:

Code:

/***********************************************
* Ultimate Fade-In Slideshow (v1.5): © Dynamic Drive (http://www.dynamicdrive.com)
* This notice MUST stay intact for legal use
* Visit http://www.dynamicdrive.com/ for this script and 100s more.
***********************************************/
 
var fadeimages=new Array()
//SET IMAGE PATHS. Extend or contract array as needed
fadeimages[0]=["photo1.jpg", "", ""] //plain image syntax
fadeimages[1]=["photo2.jpg", "http://www.cssdrive.com", ""] //image with link syntax
fadeimages[2]=["photo3.jpg", "http://www.javascriptkit.com", "_new"] //image with link and target syntax
fadeimages[3]=["photo4.jpg", "map", "m_map"] //image map syntax

 
var fadebgcolor="white"

Use the literal word 'map' for the field normally reserved for a link and the name of the image map for the field normally reserved for a link target.

Now, find the "fadeshow.prototype.populateslide=function(picobj, picindex){" function and replace it with this one (additions red):

Code:

fadeshow.prototype.populateslide=function(picobj, picindex){
var slideHTML=""
if (this.theimages[picindex][1]!=""&&this.theimages[picindex][1]!='map') //if associated link exists for image
slideHTML='<a href="'+this.theimages[picindex][1]+'" target="'+this.theimages[picindex][2]+'">'
slideHTML+='<img '+(this.theimages[picindex][1]=='map'?'usemap="#'+this.theimages[picindex][2]+'" ':'')+'src="'+this.postimages[picindex].src+'" border="'+this.imageborder+'px">'
if (this.theimages[picindex][1]!=""&&this.theimages[picindex][1]!='map') //if associated link exists for image
slideHTML+='</a>'
picobj.innerHTML=slideHTML
}

Finally, find the function "fadeshow.prototype.startit=function(){" and replace it with this one (additions red):

Code:

fadeshow.prototype.startit=function(){
var crossobj=iebrowser? iebrowser[this.curcanvas] : document.getElementById(this.curcanvas)
this.populateslide(crossobj, this.curimageindex)
if (this.pausecheck==1){ //IF SLIDESHOW SHOULD PAUSE ONMOUSEOVER
var cacheobj=this
var crossobjcontainer=iebrowser? iebrowser["master"+this.slideshowid] : document.getElementById("master"+this.slideshowid)
crossobjcontainer.onmouseover=function(){cacheobj.mouseovercheck=1}
crossobjcontainer.onmouseout=function(){cacheobj.mouseovercheck=0}
for (var i_tem = 0; i_tem < this.theimages.length; i_tem++)
if (this.theimages[i_tem][1]=='map') {
document.getElementsByName(this.theimages[i_tem][2])[0].onmouseover=function(){cacheobj.mouseovercheck=1}
document.getElementsByName(this.theimages[i_tem][2])[0].onmouseout=function(){cacheobj.mouseovercheck=0}
}
}
this.rotateimage()
}

**jscheuer1** · 03-08-2006, 03:19 PM

Notes that belong with my above solution:

You can use the same or different maps for multiple images in the same array of images for one slide show. If using multiple shows, each with its own array of images (as the original script allows), a different map or set of maps must be used for each slide show's image array. This is due to Mozilla's and possibly others' requirement that mouseover pause (if used) be attached to the map and not simply to the image.

Thread: Image Map in Fade In Slideshow???

Thread Tools

Search Thread

Image Map in Fade In Slideshow???

Bookmarks

Bookmarks

Posting Permissions