JSFiddle - React, Tailwind, and code Playground
HTML
<img id="book_cover" /><br />
<br />
<a href="#" class="triggers" id="us">US cover</a> | <a href="#" class="triggers" id="uk">UK cover</a>
CSS
#book_cover {display: none;}
JavaScript
var us_cover = 'http://thebosh.com/archives/2010/11/25/Miley-Cyrus.jpg' ;
var uk_cover = 'http://www.silhcdn.com/3/i/shapes/lg/6/1/d220416.jpg';
var book_cover = $('#book_cover');
$(document).ready(function () {
// This sets the default on load
book_cover.attr('src', us_cover);
book_cover.fadeIn(300);
});
$('.triggers').click(function () {
// Gets the triggers id which will be us or uk
var this_trigger = $(this).attr('id');
// Does the work
if (this_trigger == 'us') {
book_cover.attr('src', us_cover);
} else if (this_trigger == 'uk') {
book_cover.attr('src', uk_cover);
}
// Since the triggers are links, then lets return false, so the page woulnt redirect
return false;
});