<!DOCTYPE HTML> <html> <head> <title>Untitled</title> <meta charset="utf-8"> <style> #img-main .active {border:5px solid black;} #img-main li {float:left;list-style-type:none;cursor:pointer;} .img-small img{width: 50px;} .img-big img{width: 150px;} </style> <script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.js"></script> <script> $(document) .ready(function () { var small = $(".img-small li img"), big = $(".img-big li img"); small.each(function (indx, element) { $(element).hover( function () { small.add(big).removeClass("active"); $(element).add(big.eq(indx)).addClass("active"); }, function () { small.add(big).removeClass("active"); } ) }); }); </script> </head> <body> <div id='img-main'> <ul class="img-big"> <li><img src="http://ru.lookatcode.com/show/7580928785829615/img2-lg.jpg"></li> <li><img src="http://ru.lookatcode.com/show/7580928785829615/img3-lg.jpg"></li> </ul> <div class='clear'></div> <ul class="img-small"> <li><img src="http://ru.lookatcode.com/show/7580928785829615/img2-thumb.jpg" ></li> <li><img src="http://ru.lookatcode.com/show/7580928785829615/img3-thumb.jpg" ></li> </ul> </div> </body> </html>