olmensk,
о наконецто bottom2
<!DOCTYPE HTML>
<html>
<head>
<title>Untitled</title>
<meta charset="utf-8">
<style type="text/css">
.bottom1{
border: 1px dashed Gray; padding: 5px; height: 100px; width: 100px
}
.bottom2{
background-color: #FF00FF;
color: #FFFF00;
}
.active {
border: 1px solid #FF0000;
}
</style>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
<script>
$(function(){
$(".list3 li").on("click", function() {
var url = $("img",this).data("img"),
title = $("img",this).data("title");
$(".list3 li").not($(this).addClass("active")).removeClass("active");
$('.bottom1').css('background','url('+url+') repeat')
$('.bottom2').html(title);
})
})
</script>
</head>
<body>
<div class="bottom1"></div>
<div class="bottom2"></div>
<ul class="list3">
<li ><img src="http://fancyapps.com/fancybox/demo/1_s.jpg" data-img="http://javascript.ru/forum/images/ca_serenity/misc/logo.gif" data-title= "фигня всякая"></li>
<li ><img src="http://fancyapps.com/fancybox/demo/1_s.jpg" data-img="http://javascript.ru/forum/images/ca_serenity/misc/logo.gif" data-title= "всякая хрень"></li>
</ul>
</body>
</html>