Want to make a dynamic menu for your website or just make the image change on mouseover ? I have written a script that does that extremely simple and it’s only a few lines long. Of course you could make it a bit more complex, if you need too, but it works just great as is on all new browsers, from IE4 and above.

Follow this steps to use this script on your website:

1. You need 2 images, the one that appears all the time and the one that appears on mouse over. The images must be .jpg or .gif.
2. Copy the code below between the and in your website and change the images location after img1.src and img2.src:
   %MINIFYHTML4cb34a02142fdabb98883e3a9ee499a27%%MINIFYHTML4cb34a02142fdabb98883e3a9ee499a28% </li> </ul> </div> <div class="clear"></div> </div> <div class="clear"></div> <div class="related">Related Posts</div> <div class="related_list"> <ul> <li><div class="desc"><a href="http://www.softsailor.com/downloads/5316-download-1-2-3-javascript-library-2-5-free.html">Download 1-2-3 JavaScript Library 2.5 Free</a></div><img width="130px" height="150px" src="http://www.softsailor.com/wp-content/themes/gazette/thumb.php?src=&h=150&w=130&zc=1&q=80"></li> <li><div class="desc"><a href="http://www.softsailor.com/how-to/14988-how-to-edit-any-website-with-a-simple-piece-of-code.html">How to edit any website with a simple piece of code</a></div><img width="130px" height="150px" src="http://www.softsailor.com/wp-content/uploads/2010/01/Javascript-Code-to-edit-websites-150x150.jpg"></li> <li><div class="desc"><a href="http://www.softsailor.com/how-to/9593-how-to-change-basic-system-settings-with-default-programs-editor.html">How To Change Basic System Settings With Default Programs Editor</a></div><img width="130px" height="150px" src="http://www.softsailor.com/wp-content/themes/gazette/thumb.php?src=http://www.softsailor.com/wp-content/uploads/2009/10/defaultprograms01-550x432.jpg&h=150&w=130&zc=1&q=80"></li> <li><div class="desc"><a href="http://www.softsailor.com/news/3888-the-full-change-log-of-the-verizon-blackberry-storm-os-470148.html">The Full Change Log Of The Verizon BlackBerry Storm OS 4.7.0.148</a></div><img width="130px" height="150px" src="http://www.softsailor.com/wp-content/themes/gazette/thumb.php?src=http://www.softsailor.com/wp-content/uploads/2009/05/blackberry_storm.jpg&h=150&w=130&zc=1&q=80"></li> </ul> </div> <div class="clear"></div> <div class="post_tags">Posted in <a href="http://www.softsailor.com/category/how-to" title="View all posts in How To" rel="category tag">How To</a>, <a href="http://www.softsailor.com/category/how-to/internet-how-to" title="View all posts in Internet How To" rel="category tag">Internet How To</a>, <a href="http://www.softsailor.com/category/how-to/internet-how-to/web-design-how-to" title="View all posts in Web Design How To" rel="category tag">Web Design How To</a></div> <div class="post_author"> <img alt='' src='http://www.gravatar.com/avatar/9e1e70be7939d7112282ee1ec4611b1e?s=35&d=http%3A%2F%2Fwww.softsailor.com%2Fwp-includes%2Fimages%2Fblank.gif&r=G' class='avatar avatar-35 photo' height='35' width='35' /> <ul> <li>THIS POST WAS WRITTEN BY:</li> <li><a href="#">Alex Dumitru</a></li> </ul> <div class="clear"></div> </div> </div> <div id="comments"> <h3 id="comments">Comments</h3> <div class="navigation"> <div class="alignleft"></div> <div class="alignright"></div> </div> <ul class="commentlist"> <li class="comment even thread-even depth-1" id="li-comment-2637"> <div id="comment-2637"> <div class="comment_img"><img alt='' src='http://www.gravatar.com/avatar/66335d6ebf27fcc2fa3f0fce34ff6986?s=30&d=http%3A%2F%2Fwww.gravatar.com%2Favatar%2Ffc4278b79452556fd1629f0cfd1c1f32%3Fs%3D30%26r%3DG%26d%3Dhttp%253A%252F%252Fwww.gravatar.com%252Favatar%252Fad516503a11cd5ca435acc9bb6523536%253Fs%253D30&r=G' class='avatar avatar-30 photo' height='30' width='30' /></div> <div class="comment_content"> <div class="reply"><a rel='nofollow' class='comment-reply-link' href='/how-to/2364-javascript-how-to-change-image-on-mouseover-with-javascript.html?replytocom=2637#respond' onclick='return addComment.moveForm("comment-2637", "2637", "respond", "2364")'>Reply</a></div> <div class="comment_author">Tobias Bornakke / <a href="http://www.softsailor.com/how-to/2364-javascript-how-to-change-image-on-mouseover-with-javascript.html#comment-2637">May 27, 2009 at 8:50 am</a></div> <div class="comment_text"> <p>So many small bugs in that little pice of code… here is a “working” edition:</p> <p> if (document.images) {<br /> image1 = new Image; image2 = new Image;<br /> image1.src = ”;<br /> image2.src = ”;<br /> } </p> <p><a href="http://www.softsailor.com" rel="nofollow"></a></p> </div> </div> <div class="clear"></div> </div> </li> <li class="comment odd alt thread-odd thread-alt depth-1" id="li-comment-2638"> <div id="comment-2638"> <div class="comment_img"><img alt='' src='http://www.gravatar.com/avatar/66335d6ebf27fcc2fa3f0fce34ff6986?s=30&d=http%3A%2F%2Fwww.gravatar.com%2Favatar%2Ffc4278b79452556fd1629f0cfd1c1f32%3Fs%3D30%26r%3DG%26d%3Dhttp%253A%252F%252Fwww.gravatar.com%252Favatar%252Fad516503a11cd5ca435acc9bb6523536%253Fs%253D30&r=G' class='avatar avatar-30 photo' height='30' width='30' /></div> <div class="comment_content"> <div class="reply"><a rel='nofollow' class='comment-reply-link' href='/how-to/2364-javascript-how-to-change-image-on-mouseover-with-javascript.html?replytocom=2638#respond' onclick='return addComment.moveForm("comment-2638", "2638", "respond", "2364")'>Reply</a></div> <div class="comment_author">Tobias Bornakke / <a href="http://www.softsailor.com/how-to/2364-javascript-how-to-change-image-on-mouseover-with-javascript.html#comment-2638">May 27, 2009 at 8:51 am</a></div> <div class="comment_text"> <p>Hmm… doesn’t seem to allow posting of code <img src='http://www.softsailor.com/wp-includes/images/smilies/icon_sad.gif' alt=':(' class='wp-smiley' /> </p> </div> </div> <div class="clear"></div> </div> </li> </ul> <div class="navigation"> <div class="alignleft"></div> <div class="alignright"></div> </div> <div id="respond"> <h3>Leave a Reply</h3> <div class="cancel-comment-reply"> <small><a rel="nofollow" id="cancel-comment-reply-link" href="/how-to/2364-javascript-how-to-change-image-on-mouseover-with-javascript.html#respond" style="display:none;">Click here to cancel reply.</a></small> </div> <form action="http://www.softsailor.com/wp-comments-post.php" method="post" id="commentform"> <div class="form_left"> <p><input type="text" name="author" id="author" size="22" tabindex="1" aria-required='true' value="Name (required)" onfocus="if (this.value == 'Name (required)') {this.value = '';}" onblur="if (this.value == '') {this.value = 'Name (required)';}" /></p> <p><input type="text" name="email" id="email" size="22" tabindex="2" aria-required='true' value="Email (required)" onfocus="if (this.value == 'Email (required)') {this.value = '';}" onblur="if (this.value == '') {this.value = 'Email (required)';}" /> </p> <p><input type="text" name="url" id="url" size="22" tabindex="3" value="Website (optional)" onfocus="if (this.value == 'Website (optional)') {this.value = '';}" onblur="if (this.value == '') {this.value = 'Website (optional)';}" /></p> </div> <div class="form_right"> <p><textarea name="comment" id="comment" style="width: 96%" rows="10" tabindex="4" onfocus="if (this.value == 'Type your comment here...') {this.value = '';}" onblur="if (this.value == '') {this.value = 'Type your comment here...';}" />Type your comment here...

   Notify me of followup comments via e-mail