Image Map with Hover Transitions

**asdfjklmichael** · 11-29-2014, 01:04 AM

Does anyone know of a way to add CSS transition affects when hovering over image maps with polygon-shaped areas? At present, I can hover over my image map and change the image on hovering, but I can't seem to add a fade hover effect so that the images fade into each other when I hover. Any help would be greatly appreciated.

**vwphillips** · 11-29-2014, 10:45 AM

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">

<head>
  <title></title>
</head>

<body>
<input type="button" name="" value="Next" onclick="zxcFadeSlideShowII.Next('img1',1);" />
<input type="button" name="" value="Back" onclick="zxcFadeSlideShowII.Next('img1',-1);" />
<input type="button" name="" value="GoTo 1" onclick="zxcFadeSlideShowII.GoTo('img1',0);" />
<input type="button" name="" value="GoTo 2" onclick="zxcFadeSlideShowII.GoTo('img1',1);" />
<input type="button" name="" value="GoTo 3" onclick="zxcFadeSlideShowII.GoTo('img1',2);" />
<input type="button" name="" value="GoTo 4" onclick="zxcFadeSlideShowII.GoTo('img1',3);" />

<br />
<a href="url1.htm" ><img id="img1" src="http://www.vicsjavascripts.org/StdImages/Egypt5.jpg" border="0" usemap="#ImageMap1" ismap="ismap" /></a>

 <map name="ImageMap1" id="map1" >
  <area shape="rect" alt="" coords="0,0,100,100"  onmouseover="zxcFadeSlideShowII.GoTo('img1',1);" onmouseout="zxcFadeSlideShowII.GoTo('img1',0);" />
 </map>


<script type="text/javascript">
/*<![CDATA[*/
// Fade Slide Show II (07-11-2014)
// by Vic Phillips - http://www.vicsjavascripts.org/


var zxcFadeSlideShowII={

 GoTo:function(id,n){
  var o=this['zxc'+id];
  if (o){
   this.Pause(id);
   o.a[n]&&n!=o.n?this.rotate(o,n):null;
  }
 },

 Next:function(id,ud){
  var o=this['zxc'+id],ud=typeof(ud)=='number'&&ud<0?-1:1;
  if (o){
   o.ud=ud;
   this.rotate(o,o.n+ud);
  }
 },

 Auto:function(id,ms){
  var o=this['zxc'+id];
  if (o){
   o.to=setTimeout(function(){ o.oop.rotate(o,true); },ms||200);
  }
 },

 Pause:function(id){
  var o=this['zxc'+id];
  if (o){
   clearTimeout(o.to);
   o.auto=false;
  }
 },

 Init:function(o){
  var id=o.ImageID,a=o.ImageArray,fo=o.FadeOut,fi=o.FadeIn,h=o.AutoHold,s=o.AutoStart,i=document.getElementById(id),src,z0=0;
  if (i&&a instanceof Array){
   for (;z0<a.length;z0++){  // p[reload the images
    src=a[z0][0];
    a[z0][0]=new Image();
    a[z0][0].src=src;
   }
   o.id=id;
   o.i=i;
   o.lk=i.parentNode;
   i=i.cloneNode(false);   // create a clone to overlay the image when the SRC is changes
   i.style.position='absolute';
   i.style.zIndex='101';
   i.style.left=i.style.top='-3000px';
   document.body.appendChild(i);
   o.ci=[i,0];
   o.a=a;
   o.fi=typeof(fi)=='number'&&fi>0?fi:1000;
   o.h=typeof(h)=='number'&&h>0?h:o.fi*4;
   o.l=a.length-1;
   o.oop=this;
   o.n=0;
   o.ud=1;
   this['zxc'+id]=o;
   typeof(s)=='number'&&s>0?this.Auto(id,s):null;
  }
 },

 rotate:function(o,a){
  this.Pause(o.id);
  var p=this.pos(o.i),n=o.n;
  o.auto=a===true;
  n=o.auto?n+o.ud:a;    // establish the index bumber of the next image
  n=n>o.l?0:n<0?o.l:n;  // ensure the image array index is >= 0  and < the ayyay length
  if (o.a[n][0].width>40){             // if the preloaded image has loaded
   o.lk.removeAttribute('href');       // remove the image href
   o.ci[0].src=o.a[n][0].src;          // cnange the scc of the clobe image
   o.ci[0].style.width=o.i.width+'px';
   o.ci[0].style.height=o.i.height+'px';
   this.animate(o,o.ci,o.ci[1],100,new Date(),o.fi);  // fade the clone image in
   o.ci[0].style.left=p[0]+'px';                      // position the clone image ober the featered image
   o.ci[0].style.top=p[1]+'px';
   o.n=n;
  }
  else {
   o.a.splice(n,1);
   o.l--;
   o.auto?o.to=this.Auto(o.id,200):null;
  }
 },

 pos:function(obj){
  var rtn=[0,0];
  while(obj){
   rtn[0]+=obj.offsetLeft;
   rtn[1]+=obj.offsetTop;
   obj=obj.offsetParent;
  }
  return rtn;
 },

 animate:function(o,a,f,t,srt,mS){
  clearTimeout(a[2]);
  var oop=this,ms=new Date()-srt,n=(t-f)/mS*ms+f;
  if (isFinite(n)){
   a[1]=n;
   oop.opc(a[0],n);
  }
  if (ms<mS){
   a[2]=setTimeout(function(){ oop.animate(o,a,f,t,srt,mS); },10);
  }
  else {
   o.i.src=a[0].src;  // change the SRC of the featured image
   o.a[o.n][1]?o.lk.href=o.a[o.n][1]:null; // change the HHREF of the featured image link
   a[0].style.left=a[0].style.top='-3000px';  // hide the clone image
   a[1]=0;
   if (o.auto){
    oop.Auto(o.id,o.h);
   }
  }
 },

 opc:function(o,n){
  o.style.filter='alpha(opacity='+n+')';
  o.style.opacity=o.style.MozOpacity=o.style.WebkitOpacity=o.style.KhtmlOpacity=n/100-.001;
 }

}

zxcFadeSlideShowII.Init({
 ImageID:'img1', // the unique ID name of the image. (string)
 ImageArray:[    // an array defining the image SRCs and link HREFs. (array)
  ['http://www.vicsjavascripts.org/StdImages/Egypt5.jpg','url1.htm'],
  ['http://www.vicsjavascripts.org/StdImages/Egypt6.jpg','url2.htm'],
  ['http://www.vicsjavascripts.org/StdImages/Egypt7.jpg','url3.htm'],
  ['http://www.vicsjavascripts.org/StdImages/Egypt8.jpg','url4.htm']
 ],
 FadeIn:1000,    //(optional) the fade in duration in millseconds.         (number, default = 100)
 AutoHold:2000,  //(optional) the auto rotate delay in millseconds.        (number, default = FadeIn*4)
 AutoStart:null  //(optional) the auto rotate start delay in millseconds.  (number, default = no auto start)
});
/*]]>*/
</script>
</body>

</html>

**asdfjklmichael** · 11-29-2014, 05:14 PM

Sorry, I forgot to mention that I have the image map code which I will provide now:

Code:

<img id="clanhomecore" src="https://38.media.tumblr.com/e9d35fa9dbd8fb23adfec3d393a53186/tumblr_nfil89xC1u1u0l17ko3_1280.png" border="0" width="800" height="600" orgWidth="800" orgHeight="600" usemap="#clanhomecoremap" alt="" />
<map name="clanhomecoremap" id="ImageMapsCom-clanhomecoremap">
<area shape="rect" coords="798,598,800,600" alt="" style="outline:none;" title="" href="http://www.image-maps.com/index.php?aff=mapped_users_0" />
<area  alt="" title="by butter" href="http://clanhome.tumblr.com/kouver" shape="poly" coords="52,243,46,224,28,189,30,169,75,149,83,159,86,204,75,234,115,248,132,263,178,282,185,294,147,327,146,349,186,340,219,340,227,327,252,321,267,328,284,358,278,373,278,393,276,415,261,430,272,430,266,448,275,452,270,471,287,486,288,502,259,532,290,526,304,535,266,547,251,528,273,494,250,489,242,519,245,536,201,572,205,539,228,508,242,480,208,483,208,502,170,545,164,576,124,587,154,540,174,493,153,466,148,486,105,490,103,501,123,523,127,553,88,519,72,523,46,482,44,449,55,439,55,411,53,317,28,392,42,408,25,426,6,417,7,395,19,360,30,307,25,278" style="outline:none;" target="_self"  onmouseover="if(document.images) document.getElementById('clanhomecore').src= 'https://38.media.tumblr.com/a8c580385a9b7f2403bcb856b4adff88/tumblr_nfil89xC1u1u0l17ko5_1280.png'; " onmouseout="if(document.images) document.getElementById('clanhomecore').src= 'https://38.media.tumblr.com/e9d35fa9dbd8fb23adfec3d393a53186/tumblr_nfil89xC1u1u0l17ko3_1280.png';"  />
<area  alt="" title="by snairmair" href="http://clanhome.tumblr.com/kari" shape="poly" coords="239,83,223,71,223,38,251,30,277,40,298,42,304,57,297,71,309,81,320,98,332,116,343,127,361,121,348,140,329,143,311,131,305,144,312,171,313,182,360,175,364,194,354,198,346,223,355,244,345,263,323,276,301,283,328,310,350,319,351,341,374,316,352,374,335,376,335,351,322,328,263,287,262,281,255,281,250,317,225,323,226,305,234,276,196,260,157,219,170,213,149,187,149,140,171,109,186,108,208,127,238,162,239,132,226,109,230,94" style="outline:none;" target="_self"  onmouseover="if(document.images) document.getElementById('clanhomecore').src= 'https://33.media.tumblr.com/aa895259e81560b0a9b1acaea5b5fb6f/tumblr_nfilq199Bd1u0l17ko2_1280.png';" onmouseout="if(document.images) document.getElementById('clanhomecore').src= 'https://38.media.tumblr.com/e9d35fa9dbd8fb23adfec3d393a53186/tumblr_nfil89xC1u1u0l17ko3_1280.png';"  />
<area  alt="" title="by Improbability" href="http://clanhome.tumblr.com/ambrose" shape="poly" coords="398,352,394,310,393,279,405,247,384,244,364,235,356,220,362,199,380,192,395,200,408,201,413,177,392,154,391,123,404,93,451,93,462,105,467,130,485,134,465,151,480,167,503,169,491,197,487,228,517,241,559,219,552,246,510,256,478,252,502,273,557,273,571,273,598,226,618,224,659,261,648,338,641,394,654,435,668,448,677,448,680,485,644,486,620,486,653,507,588,516,584,504,602,481,593,418,560,392,560,415,588,481,531,491,551,459,540,397,504,377,461,381,452,404,452,467,470,491,426,502,388,529,391,465,414,410,425,379" style="outline:none;" target="_self"  onmouseover="if(document.images) document.getElementById('clanhomecore').src= 'https://38.media.tumblr.com/9743619f933679ce61bf8c7b573e8a67/tumblr_nfilq199Bd1u0l17ko1_1280.png';" onmouseout="if(document.images) document.getElementById('clanhomecore').src= 'https://38.media.tumblr.com/e9d35fa9dbd8fb23adfec3d393a53186/tumblr_nfil89xC1u1u0l17ko3_1280.png';"  />
<area  alt="" title="by Khoshekh" href="http://clanhome.tumblr.com/dragon" shape="poly" coords="627,207,639,162,661,123,688,109,715,121,724,133,716,162,713,180,722,192,754,207,762,269,768,366,748,387,763,523,763,556,729,559,720,449,708,543,703,553,645,548,680,525,682,496,668,351,674,306,672,270,656,226,634,230" style="outline:none;" target="_self"  onmouseover="if(document.images) document.getElementById('clanhomecore').src= 'https://38.media.tumblr.com/e23d28e7b2a2b9c0b6d00b28315eb93f/tumblr_nfil89xC1u1u0l17ko2_1280.png';" onmouseout="if(document.images) document.getElementById('clanhomecore').src= 'https://38.media.tumblr.com/e9d35fa9dbd8fb23adfec3d393a53186/tumblr_nfil89xC1u1u0l17ko3_1280.png';"  />
</map>

I'm not sure how to use what you gave me. How would you recommend I use the code you provided with the image map I already have? Or is there another way to accomplish hover transitions by adding something to the code I already have?

**vwphillips** · 11-30-2014, 12:39 PM

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">

<head>
  <title></title>
</head>

<body>
<input type="button" name="" value="Next" onclick="zxcFadeSlideShowII.Next('clanhomecore',1);" />
<input type="button" name="" value="Back" onclick="zxcFadeSlideShowII.Next('clanhomecore',-1);" />
<input type="button" name="" value="GoTo 1" onclick="zxcFadeSlideShowII.GoTo('clanhomecore',0);" />
<input type="button" name="" value="GoTo 2" onclick="zxcFadeSlideShowII.GoTo('clanhomecore',1);" />
<input type="button" name="" value="GoTo 3" onclick="zxcFadeSlideShowII.GoTo('clanhomecore',2);" />
<input type="button" name="" value="GoTo 4" onclick="zxcFadeSlideShowII.GoTo('clanhomecore',3);" />
<br />
<img id="clanhomecore" src="https://38.media.tumblr.com/e9d35fa9dbd8fb23adfec3d393a53186/tumblr_nfil89xC1u1u0l17ko3_1280.png" border="0" width="800" height="600" orgWidth="800" orgHeight="600" usemap="#clanhomecoremap" alt="" />
<map name="clanhomecoremap" id="ImageMapsCom-clanhomecoremap">
<area shape="rect" coords="798,598,800,600" onmouseover="zxcFadeSlideShowII.GoTo('clanhomecore',0);" alt="" style="outline:none;" title="" href="http://www.image-maps.com/index.php?aff=mapped_users_0" />
<area  alt="" title="by butter" onmouseover="zxcFadeSlideShowII.GoTo('clanhomecore',1);" href="http://clanhome.tumblr.com/kouver" shape="poly" coords="52,243,46,224,28,189,30,169,75,149,83,159,86,204,75,234,115,248,132,263,178,282,185,294,147,327,146,349,186,340,219,340,227,327,252,321,267,328,284,358,278,373,278,393,276,415,261,430,272,430,266,448,275,452,270,471,287,486,288,502,259,532,290,526,304,535,266,547,251,528,273,494,250,489,242,519,245,536,201,572,205,539,228,508,242,480,208,483,208,502,170,545,164,576,124,587,154,540,174,493,153,466,148,486,105,490,103,501,123,523,127,553,88,519,72,523,46,482,44,449,55,439,55,411,53,317,28,392,42,408,25,426,6,417,7,395,19,360,30,307,25,278" style="outline:none;" target="_self"  onmouseover="if(document.images) document.getElementById('clanhomecore').src= 'https://38.media.tumblr.com/a8c580385a9b7f2403bcb856b4adff88/tumblr_nfil89xC1u1u0l17ko5_1280.png'; " onmouseout="if(document.images) document.getElementById('clanhomecore').src= 'https://38.media.tumblr.com/e9d35fa9dbd8fb23adfec3d393a53186/tumblr_nfil89xC1u1u0l17ko3_1280.png';"  />
<area  alt="" title="by snairmair" onmouseover="zxcFadeSlideShowII.GoTo('clanhomecore',2);" href="http://clanhome.tumblr.com/kari" shape="poly" coords="239,83,223,71,223,38,251,30,277,40,298,42,304,57,297,71,309,81,320,98,332,116,343,127,361,121,348,140,329,143,311,131,305,144,312,171,313,182,360,175,364,194,354,198,346,223,355,244,345,263,323,276,301,283,328,310,350,319,351,341,374,316,352,374,335,376,335,351,322,328,263,287,262,281,255,281,250,317,225,323,226,305,234,276,196,260,157,219,170,213,149,187,149,140,171,109,186,108,208,127,238,162,239,132,226,109,230,94" style="outline:none;" target="_self"  onmouseover="if(document.images) document.getElementById('clanhomecore').src= 'https://33.media.tumblr.com/aa895259e81560b0a9b1acaea5b5fb6f/tumblr_nfilq199Bd1u0l17ko2_1280.png';" onmouseout="if(document.images) document.getElementById('clanhomecore').src= 'https://38.media.tumblr.com/e9d35fa9dbd8fb23adfec3d393a53186/tumblr_nfil89xC1u1u0l17ko3_1280.png';"  />
<area  alt="" title="by Improbability" onmouseover="zxcFadeSlideShowII.GoTo('clanhomecore',3);" href="http://clanhome.tumblr.com/ambrose" shape="poly" coords="398,352,394,310,393,279,405,247,384,244,364,235,356,220,362,199,380,192,395,200,408,201,413,177,392,154,391,123,404,93,451,93,462,105,467,130,485,134,465,151,480,167,503,169,491,197,487,228,517,241,559,219,552,246,510,256,478,252,502,273,557,273,571,273,598,226,618,224,659,261,648,338,641,394,654,435,668,448,677,448,680,485,644,486,620,486,653,507,588,516,584,504,602,481,593,418,560,392,560,415,588,481,531,491,551,459,540,397,504,377,461,381,452,404,452,467,470,491,426,502,388,529,391,465,414,410,425,379" style="outline:none;" target="_self"  onmouseover="if(document.images) document.getElementById('clanhomecore').src= 'https://38.media.tumblr.com/9743619f933679ce61bf8c7b573e8a67/tumblr_nfilq199Bd1u0l17ko1_1280.png';" onmouseout="if(document.images) document.getElementById('clanhomecore').src= 'https://38.media.tumblr.com/e9d35fa9dbd8fb23adfec3d393a53186/tumblr_nfil89xC1u1u0l17ko3_1280.png';"  />
<area  alt="" title="by Khoshekh" onmouseover="zxcFadeSlideShowII.GoTo('clanhomecore',4);" href="http://clanhome.tumblr.com/dragon" shape="poly" coords="627,207,639,162,661,123,688,109,715,121,724,133,716,162,713,180,722,192,754,207,762,269,768,366,748,387,763,523,763,556,729,559,720,449,708,543,703,553,645,548,680,525,682,496,668,351,674,306,672,270,656,226,634,230" style="outline:none;" target="_self"  onmouseover="if(document.images) document.getElementById('clanhomecore').src= 'https://38.media.tumblr.com/e23d28e7b2a2b9c0b6d00b28315eb93f/tumblr_nfil89xC1u1u0l17ko2_1280.png';" onmouseout="if(document.images) document.getElementById('clanhomecore').src= 'https://38.media.tumblr.com/e9d35fa9dbd8fb23adfec3d393a53186/tumblr_nfil89xC1u1u0l17ko3_1280.png';"  />
</map>

<script type="text/javascript">
/*<![CDATA[*/
// Fade Slide Show II (07-11-2014)
// by Vic Phillips - http://www.vicsjavascripts.org/


var zxcFadeSlideShowII={

 GoTo:function(id,n){
  var o=this['zxc'+id];
  if (o){
   this.Pause(id);
   o.a[n]&&n!=o.n?this.rotate(o,n):null;
  }
 },

 Next:function(id,ud){
  var o=this['zxc'+id],ud=typeof(ud)=='number'&&ud<0?-1:1;
  if (o){
   o.ud=ud;
   this.rotate(o,o.n+ud);
  }
 },

 Auto:function(id,ms){
  var o=this['zxc'+id];
  if (o){
   o.to=setTimeout(function(){ o.oop.rotate(o,true); },ms||200);
  }
 },

 Pause:function(id){
  var o=this['zxc'+id];
  if (o){
   clearTimeout(o.to);
   o.auto=false;
  }
 },

 Init:function(o){
  var id=o.ImageID,a=o.ImageArray,fo=o.FadeOut,fi=o.FadeIn,h=o.AutoHold,s=o.AutoStart,i=document.getElementById(id),src,z0=0;
  if (i&&a instanceof Array){
   for (;z0<a.length;z0++){  // p[reload the images
    src=a[z0][0];
    a[z0][0]=new Image();
    a[z0][0].src=src;
   }
   o.id=id;
   o.i=i;
   o.lk=i.parentNode;
   i=i.cloneNode(false);   // create a clone to overlay the image when the SRC is changes
   i.style.position='absolute';
   i.style.zIndex='101';
   i.style.left=i.style.top='-3000px';
   document.body.appendChild(i);
   o.ci=[i,0];
   o.a=a;
   o.fi=typeof(fi)=='number'&&fi>0?fi:1000;
   o.h=typeof(h)=='number'&&h>0?h:o.fi*4;
   o.l=a.length-1;
   o.oop=this;
   o.n=0;
   o.ud=1;
   this['zxc'+id]=o;
   typeof(s)=='number'&&s>0?this.Auto(id,s):null;
  }
 },

 rotate:function(o,a){
  this.Pause(o.id);
  var p=this.pos(o.i),n=o.n;
  o.auto=a===true;
  n=o.auto?n+o.ud:a;    // establish the index bumber of the next image
  n=n>o.l?0:n<0?o.l:n;  // ensure the image array index is >= 0  and < the ayyay length
  if (o.a[n][0].width>40){             // if the preloaded image has loaded
   o.lk.removeAttribute('href');       // remove the image href
   o.ci[0].src=o.a[n][0].src;          // cnange the scc of the clobe image
   o.ci[0].style.width=o.i.width+'px';
   o.ci[0].style.height=o.i.height+'px';
   this.animate(o,o.ci,o.ci[1],100,new Date(),o.fi);  // fade the clone image in
   o.ci[0].style.left=p[0]+'px';                      // position the clone image ober the featered image
   o.ci[0].style.top=p[1]+'px';
   o.n=n;
  }
  else {
   o.a.splice(n,1);
   o.l--;
   o.auto?o.to=this.Auto(o.id,200):null;
  }
 },

 pos:function(obj){
  var rtn=[0,0];
  while(obj){
   rtn[0]+=obj.offsetLeft;
   rtn[1]+=obj.offsetTop;
   obj=obj.offsetParent;
  }
  return rtn;
 },

 animate:function(o,a,f,t,srt,mS){
  clearTimeout(a[2]);
  var oop=this,ms=new Date()-srt,n=(t-f)/mS*ms+f;
  if (isFinite(n)){
   a[1]=n;
   oop.opc(a[0],n);
  }
  if (ms<mS){
   a[2]=setTimeout(function(){ oop.animate(o,a,f,t,srt,mS); },10);
  }
  else {
   o.i.src=a[0].src;  // change the SRC of the featured image
   o.a[o.n][1]?o.lk.href=o.a[o.n][1]:null; // change the HHREF of the featured image link
   a[0].style.left=a[0].style.top='-3000px';  // hide the clone image
   a[1]=0;
   if (o.auto){
    oop.Auto(o.id,o.h);
   }
  }
 },

 opc:function(o,n){
  o.style.filter='alpha(opacity='+n+')';
  o.style.opacity=o.style.MozOpacity=o.style.WebkitOpacity=o.style.KhtmlOpacity=n/100-.001;
 }

}

zxcFadeSlideShowII.Init({
 ImageID:'clanhomecore', // the unique ID name of the image. (string)
 ImageArray:[    // an array defining the image SRCs and link HREFs. (array)
  ['http://www.vicsjavascripts.org/StdImages/Egypt5.jpg'],
  ['http://www.vicsjavascripts.org/StdImages/Egypt6.jpg'],
  ['http://www.vicsjavascripts.org/StdImages/Egypt7.jpg'],
  ['http://www.vicsjavascripts.org/StdImages/Egypt8.jpg'],
  ['http://www.vicsjavascripts.org/StdImages/Egypt9.jpg']
 ],
 FadeIn:1000,    //(optional) the fade in duration in millseconds.         (number, default = 100)
 AutoHold:2000,  //(optional) the auto rotate delay in millseconds.        (number, default = FadeIn*4)
 AutoStart:null  //(optional) the auto rotate start delay in millseconds.  (number, default = no auto start)
});
/*]]>*/
</script>
</body>

</html>

**asdfjklmichael** · 11-30-2014, 07:37 PM

Thanks that solved it!

I have another question about this script. If I'm running multiple image maps on one page (each in their own panel in a carousel slider, and each with their own ID), how would I incorporate that into the script? Posting a second copy of the script into the document causes the first one not to work. So how do I go about getting both (or multiple) to work on one document/page?

**asdfjklmichael** · 11-30-2014, 08:00 PM

Thanks! That works great. I actually have multiple image maps on one page/document, and was trying to figure out how to get all of them to work using the one script.

I mean it works on my page, so when I duplicate this portion of the code and replace the image ID and image URLS, it seems to work. If this is the correct way to do it, then great. If not, please let me know if there is a more accurate/reliable way!

Code:

zxcFadeSlideShowII.Init({
 ImageID:'clanhomecore', // the unique ID name of the image. (string)
 ImageArray:[    // an array defining the image SRCs and link HREFs. (array)
  ['http://www.vicsjavascripts.org/StdImages/Egypt5.jpg'],
  ['http://www.vicsjavascripts.org/StdImages/Egypt6.jpg'],
  ['http://www.vicsjavascripts.org/StdImages/Egypt7.jpg'],
  ['http://www.vicsjavascripts.org/StdImages/Egypt8.jpg'],
  ['http://www.vicsjavascripts.org/StdImages/Egypt9.jpg']
 ],
 FadeIn:1000,    //(optional) the fade in duration in millseconds.         (number, default = 100)
 AutoHold:2000,  //(optional) the auto rotate delay in millseconds.        (number, default = FadeIn*4)
 AutoStart:null  //(optional) the auto rotate start delay in millseconds.  (number, default = no auto start)
});