title: How to insert a new slideshow on click of a link on the same page in the background?
body: <pre><code>&lt;html&gt;
  &lt;head&gt;
      &lt;link rel=stylesheet href="styles.css" type=css/text&gt;
  &lt;/head&gt;
  
  
  &lt;style&gt;
  body{
  
  background-color: #111;
  background-attachment:fixed;
  background-repeat: no-repeat;
  
  background-position: center;
  }
  
  .right {
  margin-top: 20px;
  margin-right: 500px;
      position: absolute;
      right: 0px;
      width: 300px;
      border:3px solid #8AC007;
      padding: 10px;
  }
  &lt;/style&gt;
  
  &lt;style type="text/css"&gt;
  .show{display:block;}
  .hide{display:none;}
  &lt;/style&gt;
  &lt;script type="text/javascript"&gt;
  function showImg()
  {
  var obj=document.getElementById('pic1');
  obj.className = 'hide';
  var obj1=document.getElementById('pic2');
  obj1.className = 'show';
  }
  &lt;/script&gt;
  
  &lt;div&gt;
  
  &lt;script language="JavaScript1.2"&gt;
  var bgimages=new Array()
  bgimages[0]="pic1.jpg"
  bgimages[1]="pic2.jpg"
  bgimages[2]="pic3.jpg"
  //preload images
  var pathToImg=new Array()
  for (i=0;i&lt;bgimages.length;i++){
  pathToImg[i]=new Image()
  pathToImg[i].src=bgimages[i]
  }
  var inc=-1
  
  var bgimagesTour=new Array()
  bgimagesTour[0]="pic4.jpg"
  bgimagesTour[1]="pic5.jpg"
  bgimagesTour[2]="pic6.jpg"
  //preload images
  var pathToImgTour=new Array()
  for (j=0;j&lt;bgimagesTour.length;j++){
  pathToImgTour[j]=new Image()
  pathToImgTour[j].src=bgimagesTour[j]
  }
  var incr=-1
  &lt;/script&gt;
  &lt;/div&gt;
  
  &lt;div class="show" id="pic1"  &gt;ofjvhkjnvf
  &lt;script language="JavaScript1.2"&gt;
  
  function bgSlide(){
  if (inc&lt;bgimages.length-1)
  inc++
  else
  inc=0
  document.body.background=pathToImg[inc].src
  }
  
  if (document.all||document.getElementById)
  window.onload=new Function('setInterval("bgSlide()",3000)')
  
  &lt;/script&gt;
  
  &lt;/div&gt;
  
  &lt;div class="hide" id="pic2" &gt;kflaksjfvnksfvn
  &lt;script language="JavaScript1.2"&gt;
  
  function bgSlideTour(){
  if (incr&lt;bgimagesTour.length-1)
  incr++
  else
  incr=0
  document.body.background=pathToImgTour[incr].src
  }
  
  if (document.all||document.getElementById)
  window.onload=new Function('setInterval("bgSlideTour()",3000)')
  
  &lt;/script&gt;
  
  &lt;/div&gt;
  
  &lt;font color="white"&gt;
  &lt;div class="right" &gt;
  &lt;u&gt;&lt;a href="#" onClick="showImg();"&gt;Tourism&lt;/a&gt;&lt;/u&gt;&amp;nbsp&lt;u&gt;&lt;a&gt;Festival&lt;/a&gt;&lt;/u&gt;&amp;nbsp&lt;u&gt;&lt;a&gt;Food&lt;/a&gt;&lt;/u&gt;&amp;nbsp&lt;u&gt;&lt;a&gt;Music&lt;/a&gt;&lt;/u&gt;&amp;nbsp&lt;u&gt;&lt;a&gt;Blog&lt;/a&gt;&lt;/u&gt;&amp;nbsp&lt;u&gt;&lt;a&gt;Suggestion&lt;/a&gt;&lt;/u&gt;&lt;/div&gt;
  </code></pre>
  
  <p>In the above code I have 2 slideshows and two different functions. If I try to run the same code for a single image it would work.
  eg:</p>
  
  <pre><code>&lt;li&gt;&lt;a href="#1" onclick = "showImg()" value= "Picture1" title="Home"&gt;Home&lt;/a&gt;&lt;/li&gt;
  &lt;img id="Picture1" src="/home/sharvil/Project/new/map.gif" class="show"&gt;
  </code></pre>
  
  <p>It also works on anything that is written just after the  tag of the 1st slideshow to change the text written just after the  tag of the 2nd slideshow. Although, it doesnt seem to be working for the javascript written at the respective positions. Please help.</p>