Alternate img src… possible without JavaScript?

Question

I'm using jQuery.load to load in some content but for SEO and for JavaScript-disabled browsers I've used Progressive Enhancement to normal link to the content using <a> tags and when JavaScript is in to load the content.

My problem is that on one of the pages/loaded content there is an image if the content is loaded using JavaScript the image source would be src="images/picture.png" but if its loaded using the <a> tags it would be src="../images/picture.png" (note the ../). I know I could fix this by change the file structure by having the loaded pages in the same folder level as the file but this would mean I'd have a load of files in my root / or a main file hidden, giving me a messy URL for that page.

I was wondering if I could specify alternative sources for an images (of course I can not use JavaScript to do this; it must be pure HTML).

RIGHT ... DONT THINK I MADE THAT VERY CLEAR AT ALL ..

What I need to change is:

• if that page is clicked through the <a> link the image source should be src="../images/picture.jpg"

• if the content is loaded using jQuery.load the image source should be src="images/picture.jpg"

This cannot be achieved using JavaScript as it's for when JS isn't working or is disabled.

Answer 1

Here is what you do. Write the page to work when it is clicked on via the A tag.

Then via jQuery if you load it via jQuery, change all the paths to what you want.

It is a lot of work. Much simpler, just use absolute paths.

Side note: This question has nothing to do with progressive enhancement.