Title: replace SRC inside wordpress Last modified: July 5, 2021 --- # replace SRC inside wordpress * [FelipeANDRES](https://wordpress.org/support/users/felipeandres/) * (@felipeandres) * [4 years, 10 months ago](https://wordpress.org/support/topic/replace-src-inside-wordpress/) * Hello everyone! * I’ve researched during this morning, but couldn’t fix the problem, so, if anyone could help, thanks a lot! * I want to replace the atribute src of an image inside wordpress with jquery by clicking on a button, however I can’t. * the image to change SRC * ``` ``` * the buttons to click * ``` ``` * the code on jquery * ``` /* offline code */ $('.bt-color').click(function() { var alt = ($(this).children().attr('alt')); if ( alt === 'blue' ){ $("label[for='id1']").children().attr('src', 'img/main-image-blue.png' ); } else if ( alt === 'purple' ){ $("label[for='id1']").children().attr('src', 'img/main-image-purple.png' ); } }); /* online with wordpress, my failed trial */ jQuery('.bt-color').click(function() { var alt = (jQuery(this).children().attr('alt')); if ( alt === 'blue' ){ jQuery("label[for='id1']").children().attr('src', '/img/main-image-blue.png' ); } else if ( alt === 'purple' ){ jQuery("label[for='id1']").children().attr('src', '/img/main-image-purple.png' ); } }); ``` * offline doing with html for tests works perfectly, however not on wordpress. Am I doing something wrong? * Thanks a lot! - This topic was modified 4 years, 10 months ago by [FelipeANDRES](https://wordpress.org/support/users/felipeandres/). - This topic was modified 4 years, 10 months ago by [Jan Dembowski](https://wordpress.org/support/users/jdembowski/). Reason: Moved to Fixing WordPress, this is not an Everything else WordPress topic * The page I need help with: _[[log in](https://login.wordpress.org/?redirect_to=https%3A%2F%2Fwordpress.org%2Fsupport%2Ftopic%2Freplace-src-inside-wordpress%2F%3Foutput_format%3Dmd&locale=en_US) to see the link]_ Viewing 4 replies - 1 through 4 (of 4 total) * [Joy](https://wordpress.org/support/users/joyously/) * (@joyously) * [4 years, 10 months ago](https://wordpress.org/support/topic/replace-src-inside-wordpress/#post-14628476) * If you are in JS, there is no way to run PHP there in the browser. Why are you hard-coding the image src? I suggest you change it to be a transparent image, or no image at all, and use CSS to make it different colors. You can even leave the `alt="blue"` and use it for the CSS, but that is bad for accessibility on an image tag. * Thread Starter [FelipeANDRES](https://wordpress.org/support/users/felipeandres/) * (@felipeandres) * [4 years, 10 months ago](https://wordpress.org/support/topic/replace-src-inside-wordpress/#post-14628699) * Hi Joy, thanks for the answer! Actually I made a gallery of images and used only css to change the main-image by clicking. What I am trying to do now is to replace all the existing images of the gallery, each one by its correspondent with alternative color by clicking on the ‘li.bt-color’ (now using jquery). * This second part I don’t know if is possible to do by css. So I used jquery. * Do you think I am hardcoding the img attribute SRC? Well, as far as I know, the img SRC tag on wordpress needs to be like this * `` * Do you think I need to discard all the img tags? * PS: Not running on browser, I said I made it on browser but When I put on my site it not works. - This reply was modified 4 years, 10 months ago by [FelipeANDRES](https://wordpress.org/support/users/felipeandres/). - This reply was modified 4 years, 10 months ago by [FelipeANDRES](https://wordpress.org/support/users/felipeandres/). - This reply was modified 4 years, 10 months ago by [FelipeANDRES](https://wordpress.org/support/users/felipeandres/). - This reply was modified 4 years, 10 months ago by [FelipeANDRES](https://wordpress.org/support/users/felipeandres/). * [Joy](https://wordpress.org/support/users/joyously/) * (@joyously) * [4 years, 10 months ago](https://wordpress.org/support/topic/replace-src-inside-wordpress/#post-14628958) * > What I am trying to do now is to replace all the existing images of the gallery, > each one by its correspondent with alternative color by clicking on the ‘li. > bt-color’ (now using jquery). * It looks like it’s a one time thing (can’t go back to the original). * > This second part I don’t know if is possible to do by css. * Yes, you likely can, especially if it’s just colors. Look up CSS filter and/or CSS mix-blend-mode if you want to do the colors by CSS. Or read about CSS only galleries at [CSS Play](http://www.cssplay.co.uk/menu/) (scroll down for galleries). * > So I used jquery. * You aren’t utilizing jQuery very well. The alt attribute is for text to explain what the image is about, used by search engines and screen readers for blind people. If you want to have some other URL attached to each image, use a [data attribute](https://developer.mozilla.org/en-US/docs/Learn/HTML/Howto/Use_data_attributes) which is for scripts. * > Do you think I am hardcoding the img attribute SRC? * Yes, you said the code that worked was `$("label[for='id1']").children().attr(' src', 'img/main-image-blue.png' );` That looks hard-coded to me. Perhaps if you use string manipulation to add the color on the end of the existing image, or use a data attribute containing the entire URL for the color image, then it wouldn’t be a problem. * > Well, as far as I know, the img SRC tag on wordpress needs to be like this * Yes, but that’s only in PHP. You are in Javascript, long past the PHP stage. The `src` attribute will already contain the entire URL for the image. * > PS: Not running on browser, I said I made it on browser but When I put on my > site it not works. * Yes you are running the Javascript in your browser. The PHP runs on your server, generates the page which the browser displays. The browser loads the Javascript referred to by the page, and runs it. * Thread Starter [FelipeANDRES](https://wordpress.org/support/users/felipeandres/) * (@felipeandres) * [4 years, 10 months ago](https://wordpress.org/support/topic/replace-src-inside-wordpress/#post-14629010) * Very kind of you for answering. I guess it will help me with my problem. So, thank! =) Viewing 4 replies - 1 through 4 (of 4 total) The topic ‘replace SRC inside wordpress’ is closed to new replies. ## Tags * [attr](https://wordpress.org/support/topic-tag/attr/) * [jquery](https://wordpress.org/support/topic-tag/jquery/) * In: [Fixing WordPress](https://wordpress.org/support/forum/how-to-and-troubleshooting/) * 4 replies * 2 participants * Last reply from: [FelipeANDRES](https://wordpress.org/support/users/felipeandres/) * Last activity: [4 years, 10 months ago](https://wordpress.org/support/topic/replace-src-inside-wordpress/#post-14629010) * Status: not resolved ## Topics ### Topics with no replies ### Non-support topics ### Resolved topics ### Unresolved topics ### All topics