Как сделать так чтобы при навидении на линк показывало картинку?

Добрый день, помогите пожалуйста. Мне надо сделать слайдер для новостей где в блоке шесть линков и шесть картинок.
Надо чтобы при навидении на первый линк показывало первую картинку, на второй вторую и т.д. Еще надо чтобы картинки автомотически менялись как в слайдере каждые скажам 5 секунд.

HTML

<div class="container">
		<div class="wrapper">
			<div class="news_photos">
				<div class="news_photo">
					<img src="assets/images/1.jpg" alt="">
				</div>
			</div>

			<div class="news_links">
				<a class="news_link" href="#" var="1"><span>Величайшие фильмы XXI века по версии Empire</span></a>
				<a class="news_link" href="#" var="1"><span>Плохие парни не прощаются</span></a>
				<a class="news_link" href="#" var="1"><span>Mortal Kombat станет мультфильмом</span></a>
				<a class="news_link" href="#" var="1"><span>Мышь убила лису</span></a>
				<a class="news_link" href="#" var="1"><span>Джон Бернтал готовится выйти на корт с Сереной Уильямс</span></a>
				<a class="news_link" href="#" var="1"><span>Бэйл и режиссер «Бойца» готовят новую аферу</span></a>
			</div>
		</div>
	</div>

CSS

.container {
	width: 500px;
	height: 300px;
	margin: 0 auto;
}

.wrapper {
	width: 500px;
	height: 266px;
	margin: 0 auto;
	position: relative;
    top: 40px;
    /*border: 2px solid black;*/
}


.news_photo {
    padding: 30px 15px 35px;
    overflow: hidden;
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
}

.news_photos {
    background: #f1f1f1;
    float: left;
    width: 165px;
    height: 270px;
    position: relative;
    top: auto;
    right: auto;
    bottom: auto;
    left: auto;
}

.news_links {
    float: right;
    width: 320px;
    height: auto;
    font-family: Arial, Helvetica, FreeSans, "Liberation Sans";
}

.news_links span {
    overflow: hidden;
    display: block;
    width: auto;
    height: 28px;
}

.news_link {
    text-decoration: none;
    color: #98989b !important;
    border-top: 1px solid #f2f2f2;
    border-bottom: 1px solid #f2f2f2;
    padding: 8px 0 7px;
    /*-webkit-transition: 300ms all ease;
    -o-transition: 300ms all ease;
    transition: 300ms all ease;*/
    display: block;
    font-size: 12px;
    line-height: 14px;
}

.news_link:last-child a {
    border-bottom: 1px solid #f2f2f2;
}

html

css

3 ответов

Типа такого можно сделать:

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Images Show Hide</title>
</head>
<body>
		
<div>
    <a class="images_showhide" href="#" data-image="https://upload.wikimedia.org/wikipedia/commons/thumb/b/bc/Comme_des_Garcons_at_the_Met_%2862473%29.jpg/500px-Comme_des_Garcons_at_the_Met_%2862473%29.jpg">Image 1</a>
</div>
<div>
    <a class="images_showhide" href="#" data-image="https://upload.wikimedia.org/wikipedia/commons/thumb/9/9f/Comme_des_Garcons_at_the_Met_%2862466%29.jpg/1024px-Comme_des_Garcons_at_the_Met_%2862466%29.jpg">Image 2</a>
</div>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script type="text/javascript">
	$(".images_showhide").mouseenter(function(){
        if ($(this).parent('div').children('div.image').length) {
            $(this).parent('div').children('div.image').show();
        } else {
            var image_name=$(this).data('image');
            var imageTag='<div class="image" style="position:absolute;">'+'<img src="'+image_name+'" alt="image" height="100" />'+'</div>';
            $(this).parent('div').append(imageTag);
        }
	});

	$(".images_showhide").mouseleave(function(){
    	$(this).parent('div').children('div.image').hide();
	});
</script>

</body>
</html>

Как вариант, поместить сюда картинку:

<a class="news_link" href="#" var="1">
    <img src="kartinka.jpg" class="show_image">
    <span>Величайшие фильмы XXI века по версии Empire</span>
</a>

и css стилях написать типа:

.show_image {
    display: none;
}
.show_image:hover {
    display: block;
}

только дать разные названия классам для картинок. Или с помощью javascript или jquery можно это сделать.

поместить картинку в линк я тоже додумался, но мне нужно другое в действительности, а именно когда навожу мышь на линк чтоб показывало картинку которая для этого линка предназначена, когда навожу на второй линк чтоб менялась картинка, как на сайте лостфильм. Дольжно быть что-то такое пока не разобрался....

<div class="news_photo">
	<img src="assets/images/1.jpg"  alt="">
</div>

<div class="news_links">
	<a class="news_link" href=""><span>Mortal Kombat станет мультфильмом</span></a>
	<a class="news_link" href=""><span>Плохие парни не прощаются</span></a>
	<a class="news_link" href=""><span>Величайшие фильмы XXI века по версии Empire</span></a>
	<a class="news_link" href=""><span>Мышь убила лису</span></a>
	<a class="news_link" href=""><span>Джон Бернтал готовится выйти на корт с Сереной Уильямс</span></a>
	<a class="news_link" href=""><span>Бэйл и режиссер «Бойца» готовят новую аферу</span></a>
</div>

$(document).ready(function(){
	$(".news_link").hover(function(){
		$(".news_photo").fadeToggle(1000);
                //$(".news_photo").show();
               // $(".news_photo").hide();
		});