Efficient way to change the image of img tag without editing the html?

I have a page that shows search results of开发者_开发问答 downloadable files. Beside each search result, I have an icon to denote the file type like so:

<img src="/icons/ugly/powerpoint.gif" />

I want to change the /icons/ugly/powerpoint.gif to /icons/pretty/powerpoint.gif but I am not allowed to modify the HTML. What is the best way to use /icons/pretty/powerpoint.gif instead of /icons/ugly/powerpoint.gif?

An idea I had was to use javascript to do this after I load the page, but not sure if this is a good idea.

There are two options, if you cannot edit the HTML.

1) Server side, modify the image retrieved, possibly via the use of URL rewriting.

RewriteRule ^(.*)/ugly/(.+\.gif)$ $1/pretty/$2 [L]

2) Client side, alter the src attribute, using JavaScript, or some library tool on top of JavaScript, like jQuery.

jQuery code to process all images to achieve this would be:

$('img').attr('src', function(i, src) {
   return src.replace(/\/ugly\//, '/pretty/');
});

You could run this script once the DOM has loaded, but you would be loading both images which is inefficient:

var imgList = document.getElementsByTagName('img').
    img,
    src;

for(var i = 0; i < imgList.length; i++) {
    img = imgList[i];
    src = img.src;
    img.src = src.replace(/\/ugly\//, '/pretty/');
}

The only way to do is, is using JavaScript, there is no other way. With JavaScript you can manipulate the DOM and change the src attribute of the img entity. Strictly speaking you aren't changing the HTML this way, but the internal browser representation of the HTML.

var picture = document.getElementById("picture"); 
picture.src = "new_picture.jpg";

Make sure your target img's have got a unique ID - this is not needed but makes it easier to lookup entities.

Yes, you can use JavaScript to change the src of any image. You first need to identify which image using an ID or class name.

document.getElementById('img1').src='....new value';

If you want to change it after the html has been parsed, without reloading the page, your only option is to use JavaScript to change the src attribute of your image.

Suppose your image has an id of 'myimage'.

document.getElementById('myimage').setAttribute('src', '/icons/pretty/powerpoint.gif');

This way your image will have a new source and will download and display the new image instead of the previous one.

Anyway, if you have many images with the same src like you said, you should use empty html elements such as divs, and assign the same background image to each using css. Then you can alter the background image displayed with JavaScript.

This way you need to specify the url of your image only once for all the images of the same type (or class).

Move pretty/powerpoint.gif to ugly/powerpoint.gif

You should do this using Javascript/Jquery. Jquery is the easier option. Just look for .attr() examples at Jquery official site and change the source path of the image.