{"id":884,"date":"2012-06-09T04:14:45","date_gmt":"2012-06-09T04:14:45","guid":{"rendered":"https:\/\/theextremewebdesigns.com\/blog\/?p=884"},"modified":"2012-06-09T04:14:45","modified_gmt":"2012-06-09T04:14:45","slug":"jquery-change-image-src-change-image-source-attribute-jquery-example","status":"publish","type":"post","link":"https:\/\/theextremewebdesigns.com\/blog\/jquery-change-image-src-change-image-source-attribute-jquery-example\/","title":{"rendered":"jQuery Change Image SRC Attribute Examples"},"content":{"rendered":"

Ever wanted to change image src at the click of a button using jQuery? In this article, I am going to share different way to change image source attribute using jQuery<\/em>\u00a0<\/strong>with different examples.<\/p>\n

Examples on how to Change Image SRC (source) using jQuery<\/h2>\n

For the sake of demo, I am assuming that we already have an image in the page and we need to change img src<\/strong> of this image when the “Change Source” button is clicked.<\/p>\n

Common HTML Source code for all the following examples:<\/h3>\n
<html>\n<head>\n<title>Change Image Source<\/title>\n<script type=\"text\/javascript\" src=\"js\/jquery_1.7.1_min.js\"><\/script>\n<\/head>\n\n<body>\n\n<img src=\"images\/1.jpg\" id=\"img\" class=\"img_class\" style=\"color:#03C;\" \/>\n\n<input type=\"submit\" name=\"change_src\" id=\"change_src\" value=\"Change Source\" \/>\n\n<\/body>\n<\/html><\/pre>\n
Example 1 –\u00a0Change Image Source Attribute using image ID in jQuery<\/h3>\n
<script type=\"text\/javascript\">\n\n$('#change_src').click(function() {\n\n$('#img').attr('src','somedir\/some_image_name.jpg');\n\n});\n\n<\/script><\/pre>\n
Example 2 –\u00a0Change Image Source Attribute using image Class in jQuery<\/h3>\n
<script type=\"text\/javascript\">\n\n$('#change_src').click(function() {\n\n$('.img_class').attr('src','somedir\/some_image_name.jpg');\n\n});\n\n<\/script><\/pre>\n
Example 3 –\u00a0Change Image Source Attribute of all images belonging to a specific Class in jQuery<\/h3>\n
<script type=\"text\/javascript\">\n\n$('#change_src').click(function() {\n\n$('.img_class').each(function(){\n$(this).attr('src','somedir\/some_image_name.jpg');\n});\n\n});\n\n<\/script><\/pre>\n
Example 4 –\u00a0Change Size \/ Style Attribute of all\u00a0Images\u00a0belonging to a specific Class in jQuery<\/h3>\n
<script type=\"text\/javascript\">\n\n$('#change_src').click(function() {\n\n$('.img_class').each(function(){\n\n\/\/Check if the style attribute is already defined. If yes, then get that value\n\nif($(\".img_class[style]\").length)\n\n{\n\nvar current_style = $(this).attr('style');\n\n}\n\nelse\n\n{\n\n\/\/Assign empty value\n\nvar current_style = '';\n\n}\n\n$(this).attr('style','width:150px;' + current_style);\n\n});\n\n});\n\n<\/script><\/pre>\n
In the above example, it’s mandatory to assign an empty value to the style attribute if it does not exist.\u00a0If no style attribute is defined, assign empty value or the text “undefined” gets added to the style when button is clicked.<\/p>\n
Easy, isn’t it?<\/h5>\n
Do you know of any other ways to change image src using jQuery<\/strong><\/em>? Feel free to suggest by commenting below.<\/p>\n","protected":false},"excerpt":{"rendered":"
Ever wanted to change image src at the click of a button using jQuery? In this article, I am going to share different way to change image source attribute using jQuery\u00a0with different examples.<\/p>\n","protected":false},"author":1,"featured_media":395,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_jetpack_newsletter_access":"","_jetpack_dont_email_post_to_subs":false,"_jetpack_newsletter_tier_id":0,"_jetpack_memberships_contains_paywalled_content":false,"_jetpack_memberships_contains_paid_content":false,"footnotes":""},"categories":[20,13],"tags":[41],"class_list":["post-884","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-jquery-tips-and-tricks","category-tips-and-tricks","tag-jquery-tips"],"jetpack_featured_media_url":"","jetpack_shortlink":"https:\/\/wp.me\/paBnQX-eg","jetpack_sharing_enabled":true,"post_mailing_queue_ids":[],"_links":{"self":[{"href":"https:\/\/theextremewebdesigns.com\/blog\/wp-json\/wp\/v2\/posts\/884","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/theextremewebdesigns.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/theextremewebdesigns.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/theextremewebdesigns.com\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/theextremewebdesigns.com\/blog\/wp-json\/wp\/v2\/comments?post=884"}],"version-history":[{"count":0,"href":"https:\/\/theextremewebdesigns.com\/blog\/wp-json\/wp\/v2\/posts\/884\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/theextremewebdesigns.com\/blog\/wp-json\/"}],"wp:attachment":[{"href":"https:\/\/theextremewebdesigns.com\/blog\/wp-json\/wp\/v2\/media?parent=884"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/theextremewebdesigns.com\/blog\/wp-json\/wp\/v2\/categories?post=884"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/theextremewebdesigns.com\/blog\/wp-json\/wp\/v2\/tags?post=884"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}