Отображение передварительно загруженной картинки через javascript

Допустим нужно в существующем элементе html страницы отобразить картинку, которая загружается через объект javascript Image(). Изображение должно быть отображено только в случае удачной его загрузки. Для этого можно воспользоваться событием onLoad() объекта Image(). На странице у нас есть элемент картинки:

Изменим отображаемое изображение используя javascript:

function loadImage() {
            img = new Image();
      img.src='http://25.media.tumblr.com/tumblr_m5n33fvJ1A1qgz81bo1_500.png';
            img.onload=(function() {
                document.getElementById('img_chg').src = img.src;
            });

Пример здесь
Преимущество такого подхода состоит в том, что если изображения нет, то изначальный рисунок останется на своем месте и страница не выдаст ошибку.

Как изменить атрибут src картинки при наведении с помощью jQuery

Есть задача: необходимо изменить картинку при наведении на нее мышкой. Если формат имен картинок одинаковый, это удобно сделать через jQuery изменяя атрибут src="" после загрузки страницы.
У нас есть 2 формата картинки:
Picture.jpg - Картинка оригинал, которая изначально отображается на странице.
Picture_over.jpg - Картинка, которая отображается при наведении на оригинал мышкой.
Для того чтобы выполнить изменение атрибута src="" тега img используем функции jQuery .mouseover и .mouseout:

$(function() {
    $("img")
        .mouseover(function() { 
            var src = $(this).attr("src").match(/[^\.]+/) + "_over.jpg";
            $(this).attr("src", src);
        })
        .mouseout(function() {
            var src = $(this).attr("src").replace("_over.jpg", ".jpg");
            $(this).attr("src", src);
        });
});