$(document).ready(function(){

var colouredItem = 'image2';
$('#' + colouredItem).css({"opacity": "0"});

$('#image1').css({"opacity": "0"});
$('#image3').css({"opacity": "0"});

$('#image1').stop().animate({"opacity": "1"}, 5000);
$('#image3').stop().animate({"opacity": "1"}, 5000);

$('.fadearea1').hover(function() {
        $('#image1').stop().animate({"opacity": "0"}, "slow");
        $('#image2').stop().animate({"opacity": "1"}, "slow");
        $('#image3').stop().animate({"opacity": "1"}, "slow")
});

$('.fadearea2').hover(function() {
        $('#image2').stop().animate({"opacity": "0"}, "slow");
        $('#image1').stop().animate({"opacity": "1"}, "slow");
        $('#image3').stop().animate({"opacity": "1"}, "slow")
});

$('.fadearea3').hover(function() {
        $('#image3').stop().animate({"opacity": "0"}, "slow");
        $('#image1').stop().animate({"opacity": "1"}, "slow");
        $('#image2').stop().animate({"opacity": "1"}, "slow")
});
});