<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js"></script>
<script>
$(function() {
$('img').click(function() {
var precedent = $('img.current');
precedent.attr('src', precedent.attr('original'));
precedent.removeClass('current');
$(this).addClass('current').attr('original', $(this).attr('src')).attr('src', $(this).attr('hover'));
});
});
</script>
<style>
img {
cursor: pointer;margin-right: 20px;
}
</style>
</head>
<body>
<img src="http://javascript.ru/forum/images/smilies/smile.gif" hover="http://javascript.ru/forum/images/smilies/sad.gif" />
<img src="http://javascript.ru/forum/images/smilies/unsure.gif" hover="http://javascript.ru/forum/images/smilies/thank_you2.gif" />
<img src="http://javascript.ru/forum/images/smilies/tongue.gif" hover="http://javascript.ru/forum/images/smilies/wink.gif" />
<img src="http://javascript.ru/forum/images/smilies/agree.gif" hover="http://javascript.ru/forum/images/smilies/yes4.gif" />
<img src="http://javascript.ru/forum/images/smilies/dance3.gif" hover="http://javascript.ru/forum/images/smilies/mad.gif" />
</body>
</html>