How to change image with onclick?

Posted by 16 September, 2010

To change the image using OnClick function i have found 2 ways.

1. Using jQuery.
2. Normal JavaScript.

Lets look one by one.

View Code JAVASCRIPT
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
  $("#ChangeImage").click(function(){
  $('#ChangeImage').attr('src','yahoo.gif');
 
  });
});
</script>
<img src="bm_yahoo.gif" name="my_pic" id="ChangeImage">

second by using simple JavaScript. I suggest not you use direct JavaScript call function. Good PHP Technology companies are not using like this.

View Code JAVASCRIPT
<script type="text/javascript">
function changePic()
{
  document.getElementById("Img1").src="bm_yahoo.gif";
}
</script>
<a href="#" onclick="changePic()";><img border="0" id="Img1" src="yahoo.gif" /></a>
</script>
Share
Categories : JavaScript Tags :

Comments
May 7, 2012

http://www.phpmind.com/blog/wp-content/plugins/si-captcha-for-wordpress/captcha/securimage_show.php?si_form_id=com&prefix=mtvqbLVNOTHghttp://www.phpmind.com/blog/wp-content/plugins/si-captcha-for-wordpress/captcha/securimage_show.php?si_form_id=com&prefix=mtvqbLVNOTHggwhttp://www.phpmind.com/blog/wp-content/plugins/si-captcha-for-wordpress/captcha/securimage_show.php?si_form_id=com&prefihttp://www.phpmind.com/blog/2010/09/how-to-change-image-with-onclick/#xhttp://www.phpmind.com/blog/wp-content/plugins/si-captcha-for-wordpress/captcha/securimage_show.php?si_form_id=com&prefix=0waQCtzSrzzTmwuR=mtvqbLVNOTHggwXthttp://www.phpmind.com/blog/wp-contehthttp://http://www.phpmind.com/blog/wp-content/plugins/si-captcha-for-wordpress/captcha/securhttp://www.phpmind.com/blog/2010/09/how-to-change-image-with-onclick/#image_show.php?si_form_id=com&prefix=mtvqbLVNOTHggwXtwww.phpmind.com/blog/wp-content/plugins/si-captcha-for-wordpress/captcha/securimage_show.php?si_form_id=com&prefix=mtvqbLVNOTHggwXttp://www.phpmind.com/blog/wp-content/pluhttp://www.phpmind.com/blog/wp-content/plugins/si-captcha-for-wordpress/captcha/securimage_show.php?si_form_id=com&prefix=mtvqbLVNOTHggwXtgins/si-captcha-for-wordpress/captcha/securimage_show.php?si_form_id=com&prefix=mtvqbLVNOTHggwXtnt/plugins/si-captcha-for-wordpress/captcha/securimage_show.php?si_form_id=com&prefix=http://www.phpmind.com/blog/wp-content/plugins/si-captcha-for-wordpress/captcha/securimage_show.php?si_form_id=com&prefix=mtvqbLVNOTHggwXtmtvqbLVNhttp://www.phpmind.com/blog/wp-content/plugins/si-http://www.phpmind.com/blog/wp-content/plugins/si-captcha-for-wordpress/captcha/securimage_show.php?si_form_id=com&prefix=mtvqbLVNOTHggwXtcaptcha-for-wordpress/captcha/securimage_show.php?http://www.phpmind.com/blog/wp-content/plugins/si-captcha-for-wordpress/captcha/securimage_show.php?si_form_id=com&prefix=mtvqbLVNOTHggwXtsi_form_id=com&prefix=mtvqbLVNOTHggwXtOTHggwXtXtgwXt

Posted by SDFSDF
May 7, 2012

SORRY FOR THIS I AM TESTING THIS SITE.. VERY GOOD SITE NICE LOGO

Posted by SDFSDF
January 21, 2013

Hi, thanks for keeping this page, even this code was in 2010, but has really solved y task for me today…

more than 10 hours googling with no positive outcome.. THX .. Thanks- Tom

Posted by Thom
Leave a comment

(required)

(required)


*