msncom,
<!DOCTYPE html>
<html>
<head>
<title>Untitled</title>
<meta charset="utf-8">
<style type="text/css">
.bar{
display: none;
height: 200px;
border: rgb(255, 0, 255) solid 2px;
background-color: rgb(34, 139, 34);
}
</style>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
<script>
$(function(){
var $link = $('.link'), $img = $('img', $link), $bar = $('.bar');
$link.each(function(i, a){
$(a).on('click', function(e) {
e.preventDefault();
$img.not($('img', a).fadeTo(0, 1)).fadeTo(0, 0.5);
$bar.not($bar.eq(i).show()).hide()
})
}).eq(0).click();
})
</script>
</head>
<body>
<table width="100%">
<tr>
<td align="right"><a href="#div1" class="link"><img src="http://i020.radikal.ru/1312/4e/59eef621bf6a.jpg" width="100" height="101" /></a></td>
<td align="center" width="20%"><a href="#div2" class="link"><img src="http://i020.radikal.ru/1312/4e/59eef621bf6a.jpg" width="100" height="101" /></a></td>
<td align="left"><a href="#div3" class="link"><img src="http://i020.radikal.ru/1312/4e/59eef621bf6a.jpg" width="100" height="101" /></a></td>
</tr>
</table>
<div class="bar" id="div1">1
</div>
<div class="bar" id="div2">2
</div>
<div class="bar" id="div3">3
</div>
</body>
</html>