click hijack img

by ryanttb

HTML

<a href="http://wordpress.org/news/2013/12/parker/" data-ir-img="http://i0.wp.com/wpdotorg.files.wordpress.com/2013/12/colors.jpg">WordPress</a>
<a href="http://fjdkshfjdkshkjfdsfkdhsjk.com/" data-ir-img="http://fjdkshfjdkshkjfdsfkdhsjk.com/fdhsjk.png">Nothing</a>

<h2>img tests</h2>

<img src="" style="width: 50%" />

<div class="output">
</div>

CSS

a {
    display: block;
}

JavaScript

$(function( ) {

/* img tests */

$el = $('img');
$output = $('.output');

$el.on('load', function(e) {
    $output.html( $output.html() + '<br>load' );
}).on('error', function(e) {
    // no event
    $output.html( $output.html() + '<br>error' );
});

    /* base click handler */
$('a').click(function() {
    $el.attr('src', $(this).data('irImg'));
    return false;
});
    
});