Show corresponding link image on link Mouseenter/ Mouseout

JavaScript
1

Hi,

I’m struggling to achieve the desired affect and seek direction… I have a set of links and want to fadeIn their corresponding image on mouseenter of the link. By default, the first links image is shown.

My hmtl structure is like so


<section class='feature'>
   <div class='featureImage'>
      <img src='link1image' />
      <img src='link2image' />
      <img src='link3image' />
  </div>

  <li class='link'>Link 1</li>
  <li class='link'>Link 2</li>
  <li class='link'>Link 3</li>
</section>

So far this is what I have, but it simply fades out the first image when you mouseenter its corresponding link.

$(document).ready(function() {
		$('.feature img:gt(0)').hide(); // hides all images except first
                        $(".feature li a").mouseenter(function(){
        		      $('.feature img').fadeOut().next('img').fadeIn();
   			 });
            });

Hopefully this is clear and thanks in advance for any help.

2

Hi,

You are targeting this: $(".feature li a")

but you have:

<section class='feature'>
  <li class='link'>Link 1</li>
  <li class='link'>Link 2</li>
  <li class='link'>Link 3</li>
</section>

It would help if you added an anchor tag or adjusted your selector accordingly: $(".feature li")

3

Hi Pullo,

I just forgot to put the anchor tag in my example code. My example only affects the first li a element, which fades out its corresponding image. I would like to show the .next image on .hover or .mouseenter its li a element. but cannot seem to get it working.

4

Hi,

Did you mean something like this?


<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>Untitled Document</title>
<script src="http://code.jquery.com/jquery.js"></script>
<style type="text/css">
.featureImage {
	height:150px;
	position:relative;
}
.featureImage img {
	position:absolute;
	top:0;
	left:0;
}
</style>
</head>

<body>
<section class='feature'>
		<div class='featureImage'> 
			<img src='http://placehold.it/350x150'> 
			<img src='http://placehold.it/250x150'> 
			<img src='http://placehold.it/150x150'> 
		</div>
		<ul>
				<li class='link'><a href="#">Link 1</a></li>
				<li class='link'><a href="#">Link 2</a></li>
				<li class='link'><a href="#">Link 3</a></li>
		</ul>
</section>
<script>
$(document).ready(function () {
    $('.feature img:gt(0)').hide(); // hides all images except first
    $(".feature li a").mouseenter(function () {
						var listItem = $(this).closest('li').index() + 1;  
							 $(".feature img").stop(true, true).fadeOut("slow");
								$(".feature img:nth-child(" + listItem + ")").stop(true, true) .fadeIn('slow');
       							
    });
});
</script>
</body>
</html>

@Pullo can probably give more concise (correct) code though as I am a beginner at this :slight_smile:

The images are chosen by their position corresponding to the link’s position so you would probably be better adding an identifier to each image to avoid slip ups if the list content is re-ordered.

e.g.


<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>Untitled Document</title>
<script src="http://code.jquery.com/jquery.js"></script>
<style type="text/css">
.featureImage {
	height:150px;
	position:relative;
}
.featureImage img {
	position:absolute;
	top:0;
	left:0;
}
</style>
</head>

<body>
<section class='feature'>
		<div class='featureImage'> 
			<img src='http://placehold.it/350x150'> 
			<img src='http://placehold.it/250x150'> 
			<img src='http://placehold.it/150x150'> 
		</div>
		<ul>
				<li data-imgref="1" class='link'><a href="#">Link 1</a></li>
				<li data-imgref="2" class='link'><a href="#">Link 2</a></li>
				<li data-imgref="3" class='link'><a href="#">Link 3</a></li>
		</ul>
</section>
<script>
$(document).ready(function () {
    $('.feature img:gt(0)').hide(); // hides all images except first
    $(".feature li a").mouseenter(function () {
						var imgItem = $(this).closest('li').data('imgref');
							 $(".feature img").stop(true, true).fadeOut("slow");
								$(".feature img:nth-child(" + imgItem + ")").stop(true, true) .fadeIn('slow');
       							
    });
});
</script>
</body>
</html>

Or indeed add ids to the images to make certain.

5

Hi Paul O’B ,

Thank you for the example. This will get me started in the right direction I believe.

6

Nah, that’s more or less how I would have done things.
Nice one Paul :slight_smile: