Trying to use swap Images with two separate Images

•

What is DaniWeb IT Discussion Community?

You're currently browsing the JavaScript / DHTML / AJAX section within the Web Development category of DaniWeb, a massive community of 397,839 software developers, web developers, Internet marketers, and tech gurus who are all enthusiastic about making contacts, networking, and learning from each other. In fact, there are 2,578 IT professionals currently interacting right now! Registration is free, only takes a minute and lets you enjoy all of the interactive features of the site.

Join our community!

Please support our JavaScript / DHTML / AJAX advertiser: Lunarpages Web Hosting

Thread Tools Display Modes

Views: 553 | Replies: 1

•

Join Date: Apr 2008

Posts: 1

Reputation: frantara is an unknown quantity at this point

Rep Power: 0

Solved Threads: 0

frantara

Offline

Newbie Poster

Trying to use swap Images with two separate Images

Apr 28th, 2008

I am trying to use swap imagesto swap two separate images on the same page but I can't get it to work. Here is the code for one image, rotator. I also have a second image,rotatorB that I want to swap different images with. I think I need two separate codes but do not know how to do it.

Help with Code Tags

(Toggle Plain Text)

<script type="text/javascript">
<!--
function MM_reloadPage(init) {  //reloads the window if Nav4 resized
  if (init==true) with (navigator) {if ((appName=="Netscape")&&(parseInt(appVersion)==4)) {
    document.MM_pgW=innerWidth; document.MM_pgH=innerHeight; onresize=MM_reloadPage; }}
  else if (innerWidth!=document.MM_pgW || innerHeight!=document.MM_pgH) location.reload();
}
MM_reloadPage(true);

function MM_preloadImages() { //v3.0
  var d=document; if(d.images){ if(!d.MM_p) d.MM_p=new Array();
    var i,j=d.MM_p.length,a=MM_preloadImages.arguments; for(i=0; i<a.length; i++)
    if (a[i].indexOf("#")!=0){ d.MM_p[j]=new Image; d.MM_p[j++].src=a[i];}}
}

function MM_swapImgRestore() { //v3.0
  var i,x,a=document.MM_sr; for(i=0;a&&i<a.length&&(x=a[i])&&x.oSrc;i++) x.src=x.oSrc;
}

function MM_findObj(n, d) { //v4.01
  var p,i,x;  if(!d) d=document; if((p=n.indexOf("?"))>0&&parent.frames.length) {
    d=parent.frames[n.substring(p+1)].document; n=n.substring(0,p);}
  if(!(x=d[n])&&d.all) x=d.all[n]; for (i=0;!x&&i<d.forms.length;i++) x=d.forms[i][n];
  for(i=0;!x&&d.layers&&i<d.layers.length;i++) x=MM_findObj(n,d.layers[i].document);
  if(!x && d.getElementById) x=d.getElementById(n); return x;
}

function MM_swapImage() { //v3.0
  var i,j=0,x,a=MM_swapImage.arguments; document.MM_sr=new Array; for(i=0;i<(a.length-2);i+=3)
   if ((x=MM_findObj(a[i]))!=null){document.MM_sr[j++]=x; if(!x.oSrc) x.oSrc=x.src; x.src=a[i+2];}
}
// Comma separated list of images to rotate 
var imgs = new Array('product_images/conversion_images/1.jpg','product_images/conversion_images/2.jpg','product_images/conversion_images/3.jpg','product_images/conversion_images/4.jpg','product_images/conversion_images/5.jpg','product_images/conversion_images/6.jpg','product_images/conversion_images/7.jpg','product_images/conversion_images/8.jpg','product_images/conversion_images/9.jpg','product_images/conversion_images/10.jpg','product_images/conversion_images/11.jpg', 'product_images/conversion_images/12.jpg','product_images/conversion_images/13.jpg','product_images/conversion_images/14.jpg','product_images/conversion_images/15.jpg','product_images/conversion_images/16.jpg','product_images/conversion_images/17.jpg','product_images/conversion_images/18.jpg','product_images/conversion_images/19.jpg','product_images/conversion_images/20.jpg', 'product_images/conversion_images/21.jpg','product_images/conversion_images/22.jpg','product_images/conversion_images/23.jpg','product_images/conversion_images/24.jpg','product_images/conversion_images/25.jpg');
// delay in milliseconds between image swaps 1000 = 1 second 
var delay = 2000;
var counter = 0;

function preloadImgs(){
  for(var i=0;i<imgs.length;i++){
    MM_preloadImages(imgs[i]);
  }

//-->
</script>
</head>
<body onload="preloadImgs();randomImages();">

<table width="812" border="0" cellpadding="0" cellspacing="0">
  <!--DWLayoutTable-->
  <tr>
    <td height="167" colspan="11" valign="top"><table width="100%" border="0" cellpadding="0" cellspacing="0">
      <!--DWLayoutTable-->
      <tr>
        <td width="802" height="167" valign="top"><img src="product_images/homepage_08/header_08and_redLine_toolba.jpg" alt="Pearl Technologies, Inc." width="802" height="165" id="Image1" /></td>
        </tr>
      
    </table></td>
  <td width="4">&nbsp;</td>
  <td width="6">&nbsp;</td>
  </tr>
  <tr>
    <td width="73" height="37">&nbsp;</td>
    <td width="89">&nbsp;</td>
    <td width="111">&nbsp;</td>
    <td width="49">&nbsp;</td>
    <td width="45">&nbsp;</td>
    <td width="95">&nbsp;</td>
    <td width="60">&nbsp;</td>
    <td width="50">&nbsp;</td>
    <td width="88">&nbsp;</td>
    <td width="112">&nbsp;</td>
    <td width="30">&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
  </tr>
  
  
  <tr>
    <td height="179">&nbsp;</td>
    <td>&nbsp;</td>
    <td colspan="3" valign="top"><table width="100%" border="0" cellpadding="0" cellspacing="0">
      <!--DWLayoutTable-->
      <tr>
        <td width="193" height="175" valign="top"><a href="store06de.html"><img src="product_images/homepage_08/convimagehomepageopt_08.jpg" name="rotator" width="193" height="175" id="rotator" /></a></td>
        </tr>
      <!--DWLayoutTable-->
      
    </table></td>
    <td>&nbsp;</td>
    <td colspan="3" valign="top"><table width="100%" border="0" cellpadding="0" cellspacing="0">
      <!--DWLayoutTable-->
      <tr>
        <td width="193" height="175" valign="top"><a href="extrusionpage.html"><img src="product_images/homepage_08/extimagehomepageopt_08.jpg" alt="Extrusion Products" name="rotatorB" width="193" height="175" border="0" id="rotatorB" /></a></td>
      </tr>
    </table>    </td>

<script type="text/javascript">
<!--
function MM_reloadPage(init) {  //reloads the window if Nav4 resized
  if (init==true) with (navigator) {if ((appName=="Netscape")&&(parseInt(appVersion)==4)) {
    document.MM_pgW=innerWidth; document.MM_pgH=innerHeight; onresize=MM_reloadPage; }}
  else if (innerWidth!=document.MM_pgW || innerHeight!=document.MM_pgH) location.reload();
}
MM_reloadPage(true);

function MM_preloadImages() { //v3.0
  var d=document; if(d.images){ if(!d.MM_p) d.MM_p=new Array();
    var i,j=d.MM_p.length,a=MM_preloadImages.arguments; for(i=0; i<a.length; i++)
    if (a[i].indexOf("#")!=0){ d.MM_p[j]=new Image; d.MM_p[j++].src=a[i];}}
}

function MM_swapImgRestore() { //v3.0
  var i,x,a=document.MM_sr; for(i=0;a&&i<a.length&&(x=a[i])&&x.oSrc;i++) x.src=x.oSrc;
}

function MM_findObj(n, d) { //v4.01
  var p,i,x;  if(!d) d=document; if((p=n.indexOf("?"))>0&&parent.frames.length) {
    d=parent.frames[n.substring(p+1)].document; n=n.substring(0,p);}
  if(!(x=d[n])&&d.all) x=d.all[n]; for (i=0;!x&&i<d.forms.length;i++) x=d.forms[i][n];
  for(i=0;!x&&d.layers&&i<d.layers.length;i++) x=MM_findObj(n,d.layers[i].document);
  if(!x && d.getElementById) x=d.getElementById(n); return x;
}

function MM_swapImage() { //v3.0
  var i,j=0,x,a=MM_swapImage.arguments; document.MM_sr=new Array; for(i=0;i<(a.length-2);i+=3)
   if ((x=MM_findObj(a[i]))!=null){document.MM_sr[j++]=x; if(!x.oSrc) x.oSrc=x.src; x.src=a[i+2];}
}
// Comma separated list of images to rotate 
var imgs = new Array('product_images/conversion_images/1.jpg','product_images/conversion_images/2.jpg','product_images/conversion_images/3.jpg','product_images/conversion_images/4.jpg','product_images/conversion_images/5.jpg','product_images/conversion_images/6.jpg','product_images/conversion_images/7.jpg','product_images/conversion_images/8.jpg','product_images/conversion_images/9.jpg','product_images/conversion_images/10.jpg','product_images/conversion_images/11.jpg', 'product_images/conversion_images/12.jpg','product_images/conversion_images/13.jpg','product_images/conversion_images/14.jpg','product_images/conversion_images/15.jpg','product_images/conversion_images/16.jpg','product_images/conversion_images/17.jpg','product_images/conversion_images/18.jpg','product_images/conversion_images/19.jpg','product_images/conversion_images/20.jpg', 'product_images/conversion_images/21.jpg','product_images/conversion_images/22.jpg','product_images/conversion_images/23.jpg','product_images/conversion_images/24.jpg','product_images/conversion_images/25.jpg');
// delay in milliseconds between image swaps 1000 = 1 second 
var delay = 2000;
var counter = 0;

function preloadImgs(){
  for(var i=0;i<imgs.length;i++){
    MM_preloadImages(imgs[i]);
  }

//-->
</script>
</head>
<body onload="preloadImgs();randomImages();">

<table width="812" border="0" cellpadding="0" cellspacing="0">
  <!--DWLayoutTable-->
  <tr>
    <td height="167" colspan="11" valign="top"><table width="100%" border="0" cellpadding="0" cellspacing="0">
      <!--DWLayoutTable-->
      <tr>
        <td width="802" height="167" valign="top"><img src="product_images/homepage_08/header_08and_redLine_toolba.jpg" alt="Pearl Technologies, Inc." width="802" height="165" id="Image1" /></td>
        </tr>
      
    </table></td>
  <td width="4">&nbsp;</td>
  <td width="6">&nbsp;</td>
  </tr>
  <tr>
    <td width="73" height="37">&nbsp;</td>
    <td width="89">&nbsp;</td>
    <td width="111">&nbsp;</td>
    <td width="49">&nbsp;</td>
    <td width="45">&nbsp;</td>
    <td width="95">&nbsp;</td>
    <td width="60">&nbsp;</td>
    <td width="50">&nbsp;</td>
    <td width="88">&nbsp;</td>
    <td width="112">&nbsp;</td>
    <td width="30">&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
  </tr>
  
  
  <tr>
    <td height="179">&nbsp;</td>
    <td>&nbsp;</td>
    <td colspan="3" valign="top"><table width="100%" border="0" cellpadding="0" cellspacing="0">
      <!--DWLayoutTable-->
      <tr>
        <td width="193" height="175" valign="top"><a href="store06de.html"><img src="product_images/homepage_08/convimagehomepageopt_08.jpg" name="rotator" width="193" height="175" id="rotator" /></a></td>
        </tr>
      <!--DWLayoutTable-->
      
    </table></td>
    <td>&nbsp;</td>
    <td colspan="3" valign="top"><table width="100%" border="0" cellpadding="0" cellspacing="0">
      <!--DWLayoutTable-->
      <tr>
        <td width="193" height="175" valign="top"><a href="extrusionpage.html"><img src="product_images/homepage_08/extimagehomepageopt_08.jpg" alt="Extrusion Products" name="rotatorB" width="193" height="175" border="0" id="rotatorB" /></a></td>
      </tr>
    </table>    </td>

Thank you

•

Join Date: Dec 2004

Location: London or Slovakia

Posts: 2,183

Reputation: peter_budo has a spectacular aura about

Rep Power: 10

Solved Threads: 265

peter_budo peter_budo is offline

Offline

Code tags enforcer

Re: Trying to use swap Images with two separate Images

Apr 30th, 2008

This code is generated by Dreamweaver, so I sugest you remove JavaScript section created by DW and redo it...
Reasen: worst case scenario to try solve code generated by WYSIWYG product

Learn to see in another's calamity the ills which you should avoid.
Publilius Syrus
(~100 BC)
If we helped you to solve your problem, answered your question please mark your post as SOLVED.