Picture Changing

Change picture on mouseover

by KonstRuctor

HTML

<div class="picwrapper">

	<img src="/img/img1.jpg" alt="">

	<ul>
		<li><a href="#" class="director current" data-item="img1">Так выглядит первая картинка</a></li>
		<li><a href="#" class="director" data-item="img2">А это вторая картинка</a></li>
	</ul>

</div>

CSS

body {
			background: gray;
			margin: 0;
			padding: 0;
		}
		.bigpic {
			margin: 0;
			padding: 0;
		}
		.picwrapper {
			width: 700px;
			margin: 0 auto;
			padding: 0;
			background: #FFF;
		}
		.picwrapper ul {
			display: block;
			margin: 0;
			padding: 0;
			border-top: 5px solid #DDD;
		}
		.picwrapper ul li {
			list-style: none;
			display: inline-block; /*  */
			margin: 0;
			padding: 0;
		}
		.picwrapper ul li a {
			display: block;
			padding: 5px; /*  */
			border: 1px solid #DDD;
			background: #FFF;
			text-decoration: none;
		}
		.picwrapper ul li a.current {
			background: #DDD;
		}

JavaScript

$(document).ready(function(){

			$('.director').on('click',function(e){
				e.preventDefault();
			});

			$('.director').mouseover(function(){

				var picture = $(this).data('item');
				$('.picwrapper img').attr('src','/img/'+ picture +'.jpg');
				$('.picwrapper a').attr('class','director');
				$(this).attr('class','director current');

			}).mouseout(function(){

				var picture = $('.picwrapper a:first').data('item');
				$('.picwrapper img').attr('src','/img/'+ picture +'.jpg');
				$('.picwrapper a').attr('class','director');
				$('.picwrapper a:first').attr('class','director current');
			});

		});