How to change image src along with keynote..? <pre><code>&lt;div id="div1" class="index-speaker-img"&gt; &lt;img id="image1" src="" onmouseout="hide(this,'keynote2')" onmouseover="show(this,'keynote2')" width="30%" class="fl"/&gt; &lt;div id="keynote2" class="tip1" style="display:none;top:22%;left:2%;" onmouseout="hidePop(this,'keynote6')" onmouseover="showPop(this,'keynote6')"&gt; &lt;p style="line-height:15px;font-size:19px;font-family:'Neo_Sans_Bold';color:#ffffff;"&gt;Venkat&lt;/p&gt; &lt;p &gt;Founder,Developer Inc.&lt;/p&gt; &lt;/div&gt; &lt;/div &gt; &lt;div class="index-speaker-img"&gt; &lt;img id="image2" src="" onmouseout="hide(this,'keynote4')" onmouseover="show(this,'keynote4')" width="30%" class="fl"/&gt; &lt;div id="keynote4" class="tip1" style="display:none;top:22%;left:33%;" onmouseout="hidePop(this,'keynote6')" onmouseover="showPop(this,'keynote6')"&gt; &lt;p style="line-height:15px;font-size:19px;font-family:'Neo_Sans_Bold';color:#ffffff;"&gt; Mann&lt;/p&gt; &lt;p &gt;Editor-in Central&lt;/p&gt; &lt;/div&gt; &lt;/div &gt; </code></pre> <p>and </p> <p>JS file</p> <pre><code>var images = [ "http://static.ddmcdn.com/gif/lightning-gallery-18.jpg", "http://static.ddmcdn.com/gif/lightning-gallery-19.jpg", "http://static.ddmcdn.com/gif/lightning-gallery-20.jpg", "http://static.ddmcdn.com/gif/lightning-gallery-17.jpg"]; function randImg() { var size = images.length var x = Math.floor(size * Math.random()) document.getElementById('image1').src = images[x]; } window.onload = randImg; </code></pre> <p>Its changes image surce, but not changes its keynote along with images.. Thanks in advance..........</p> <p>extra ............. <a href="http://jsfiddle.net/gFft7/20/" rel="nofollow">http://jsfiddle.net/gFft7/20/</a></p>