SitePoint Sponsor

User Tag List

Results 1 to 6 of 6
  1. #1
    SitePoint Enthusiast
    Join Date
    Feb 2012
    Posts
    61
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Show corresponding link image on link Mouseenter/ Mouseout.

    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

    Code:
    <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.

    Code:
    $(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. #2
    Gre aus'm Pott gold trophysilver trophybronze trophy
    Pullo's Avatar
    Join Date
    Jun 2007
    Location
    Germany
    Posts
    5,938
    Mentioned
    214 Post(s)
    Tagged
    12 Thread(s)
    Hi,

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

    but you have:

    Code:
    <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. #3
    SitePoint Enthusiast
    Join Date
    Feb 2012
    Posts
    61
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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. #4
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,350
    Mentioned
    179 Post(s)
    Tagged
    6 Thread(s)
    Hi,

    Did you mean something like this?

    Code:
    <!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

    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.
    Code:
    <!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. #5
    SitePoint Enthusiast
    Join Date
    Feb 2012
    Posts
    61
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hi Paul O'B ,

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

  6. #6
    Gre aus'm Pott gold trophysilver trophybronze trophy
    Pullo's Avatar
    Join Date
    Jun 2007
    Location
    Germany
    Posts
    5,938
    Mentioned
    214 Post(s)
    Tagged
    12 Thread(s)
    Quote Originally Posted by Paul O'B View Post
    @Pullo can probably give more concise (correct) code though as I am a beginner at this
    Nah, that's more or less how I would have done things.
    Nice one Paul


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •