Question

I’m pretty new to JavaScript and am wondering how on a page with links to images, i.e. http://www.example.com/image.jpg I can get them to be changed automatically by JavaScript to be embedded, ie with <img> tag

Hope that makes sense!

Thanks

Answer 1

We’re particularly fond of the jQuery framework here, as it makes this sort of task very easy. With jQuery on your page, you can easily do this:

$(document).ready(function() {
    $('a[href$=.jpg]').each(function() {
        var imageSrc = $(this).attr('href');
        var img = $('<img />').attr('src', imageSrc);

        $(this).replaceWith(img);
    });
});

This will work specifically for <a> tags whose href attributes end with .jpg You can expand it to other file extensions, of course, but to dynamically determine whether a link leads to an image if the URL is not obvious would be a far greater challenge.