Welcome to the Treehouse Community

Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.

Start your free trial

JavaScript

Posted by Oswaldo Zarate
Oswaldo Zarate
35,612 Points

How to change php "src" attribute using jquery?

Hi,

I'm trying to change an image source attribute when the screen width is greater than 500px. Here's my html and php:

<img id="myimage" src="<?php echo BASE_URL . 'img/mobile-image.jpg'; ?>">

and I'm trying to change it using jquery:

$(document).ready(function(e) {
    if($(window).width() > 500) {
        $('#myimage').attr('src', "<?php echo BASE_URL . 'img/desktop-image.jpg'; ?>");
    }
});

but it does not seems to be working. Anyone knows how can I solve this?

2 Answers

Jason Anello
Jason Anello
Courses Plus Student 94,610 Points

Hi Oswaldo,

Have you viewed the source of your page yet to see what kind of actual output you're getting?

Also, it might help to explain what the purpose is of these images.

If these images are purely visual then it would be better to handle this in the css. The mobile image could be applied as a css background and then using a media query for > 500px you could swap that background image with the desktop one.

Oswaldo Zarate
Oswaldo Zarate
35,612 Points
Oswaldo Zarate
Oswaldo Zarate
35,612 Points

The output I was getting was a string with the src value. But you were right, it is better to handle it with css. I handled the images as background images instead. Thanks for your help.