title: Javascript image slideshow - mouseover
body: <p>I am having a hard time searching for the answer to my problem.  Mainly because I have no idea how to ask it in a google/yahoo search.</p>
  
  <p>My site:  <a href="http://www.wbsnightout.com/sidekick" rel="nofollow">http://www.wbsnightout.com/sidekick</a></p>
  
  <p>On the right side I have three sponsor ad div's with images rotating.  Each image has a title and is a clickable link.  The only problem is, is that when you mouse over the image, the LINK and TITLE for the image BEHIND the shown image comes up.  When I click on it, it takes me to the wrong link, because it's the link for the image behind it.</p>
  
  <p>Here is an example of my HTML:</p>
  
  <pre><code>    &lt;div id="right-sponsor"&gt; &lt;!-- Begin right Sidebar --&gt;
   &lt;div class="advertiseSlides" id="sponsor2"&gt;
   &lt;a title='Click for more Info!' href='http://www.ricochetsrapiddetail.net/' target='_blank' rel='nofollow'&gt;&lt;img src='/images/advertise/ricochet_ad.jpg' alt='Ricochet's Rapid Detail' title='Ricochet's Rapid Detail' height='200' width='240' /&gt;
   &lt;/a&gt;   &lt;/div&gt;
  </code></pre>
  
  <p>This is pulled dynamically using php and mysql.</p>
  
  <p>I have this before my closing body tag within a script tag</p>
  
  <pre><code>  initImageGallery('sponsor1', 5000);
  </code></pre>
  
  <p>And my javascript file can be found:  <a href="http://www.wbsnightout.com/sidekick/js/slideshow.js" rel="nofollow">http://www.wbsnightout.com/sidekick/js/slideshow.js</a></p>
  
  <p>I don't know much about javascript so I just used I script that I found online.</p>
  
  <p>If you can answer or point me to a discussion or tutorial, that would be great!</p>
  
  <p>Thanks,</p>