[xelawho]

although it is loosening, there is a historical requirement against having IDs that start with numbers. you could set another attribute, however, lets say ind, so your thumbnails would have ind="0", ind="1" in their img tag, according to which larger image they related to.

then, say your thumbs had a class of "thumbs", I think your function would look like this:

<script>
$(function() {
var images = ["chococat.gif","comic.gif","devil.gif","eye.gif"];
$('<img>').attr({'src':''+images[1],'id':'bg','title':''}).appendTo('#bg-wrapper').parent().fadeIn(1000);
    $('.thumbs').click(function(e) {
    e.preventDefault();
    var image = images[$(this).attr('ind')];
        $('#bg').parent().fadeOut(800, function() {
            $('#bg').attr('src', ''+image); 
              $(this).fadeIn(800);
        });
    });
});
</script>

untested, but it will probably work. It would probably make more sense to have the filenames of the thumbs and larger pics related (like chococatsmall.gif and chococatbig.gif, comicsmall.gif and comicbig.gif) so that you could do the swicth independent of array position, but that's up to you...