Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 2 of 2
  1. #1
    Regular Coder
    Join Date
    Nov 2009
    Location
    Florida United States
    Posts
    106
    Thanks
    6
    Thanked 2 Times in 2 Posts

    Image swapping using jquery

    I am trying to work with JQuery and have never done it before. I need to swap images that are layered on each other. I am far from good at coding and am sure there is an easier way. I was trying to figure out why this isn't working.
    Code:
    $("sm-dog").mouseover(function() {
    				$("md-dog").attr("src", "images/dog-b-blk.gif");
    				$("lg-dog").attr("src", "images/dog-c-blk.gif");
    				$("xlg-dog").attr("src", "images/dog-d-blk.gif");
    				
    				$("sm-dog").mouseout(function() {
    					$("md-dog").attr("src", "images/dog-b.gif");
    					$("lg-dog").attr("src", "images/dog-c.gif");
    					$("xlg-dog").attr("src", "images/dog-d.gif");
    				})
    			})
    			$("md-dog").mouseover(function() {
    				$("sm-dog").attr("src", "images/dog-a-blk.gif");
    				$("lg-dog").attr("src", "images/dog-c-blk.gif");
    				$("xlg-dog").attr("src", "images/dog-d-blk.gif");
    				
    				$("md-dog").mouseout(function() {
    					$("md-dog").attr("src", "images/dog-b.gif");
    					$("sm-dog").attr("src", "images/dog-a.gif");
    					$("xlg-dog").attr("src", "images/dog-d.gif");
    				})
    			})
    			$("lg-dog").mouseover(function() {
    				$("md-dog").attr("src", "images/dog-b-blk.gif");
    				$("sm-dog").attr("src", "images/dog-a-blk.gif");
    				$("lg-dog").css("z-index", "1");
    				$("xlg-dog").attr("src", "images/dog-d-blk.gif");
    				
    				$("lg-dog").mouseout(function() {
    					$("md-dog").attr("src", "images/dog-b.gif");
    					$("sm-dog").attr("src", "images/dog-a.gif");
    					$("lg-dog").css("z-index", "-1");
    					$("xlg-dog").attr("src", "images/dog-d.gif");
    				})
    			})
    			$("xlg-dog").mouseover(function() {
    				$("md-dog").attr("src", "images/dog-b-blk.gif");
    				$("sm-dog").attr("src", "images/dog-a-blk.gif");
    				$("lg-dog").attr("src", "images/dog-c-blk.gif");
    				$("xlg-dog").css("z-index", "-2");
    				
    				$("xlg-dog").mouseout(function() {
    					$("md-dog").attr("src", "images/dog-b.gif");
    					$("sm-dog").attr("src", "images/dog-a.gif");
    					$("xlg-dog").css("z-index", "-2");
    					$("lg-dog").attr("src", "images/dog-c.gif");
    				})
    			})
    Code:
    <div class = "dog-images">
    			<a href = "sub/sm/length.php" id = "small-dog-image"><image src = "image/dog-a.gif" alt = "Pups and Petites up to 20 pounds" id = "sm-dog"/></a>
    			<a href = "sub/med/length.php" id = "medium-dog-image"><image src = "image/dog-b.gif" alt = "Mid sized 21-50 pounds" id = "md-dog"/></a>
    			<a href = "sub/lg/length.php" id = "large-dog-image"><image src = "image/dog-c.gif" alt = "Larger than life 51-80 pounds" id = "lg-dog"/></a>
    			<a href = "sub/xl/length.php"id = "xlarge-dog-image"><image src = "image/dog-d.gif" alt = "Gentle giant over 80 pounds" id = "xl-dog"/></a>
    		</div>
    New Coder!!!!

  • #2
    Senior Coder
    Join Date
    Jan 2011
    Location
    Missouri
    Posts
    4,581
    Thanks
    23
    Thanked 643 Times in 642 Posts
    To get this to work you do not want to have pictures that have very large differences in their dimensions.

    Here's why your don't work. You need to clarify an id or a class with # or . when using JQ.
    So $("sm-dog") S/B $("#sm-dog").
    And you need to end groups with the semicolon.
    Some times you use image and other images
    So src = "image/dog-a.gif" in the body and attr("src", "images/dog-a.gif"); in the JQ.
    You can also combine selectors and save code.
    Code:
    <!DOCTYPE html>
    <html>
    <head>
    <title></title>
    <link href="style.css" rel="stylesheet" type="text/css" />
    <style type="text/css">
    #boxes{
    	display:none;
    }
    </style>
    <script type="text/javascript" src="http://code.jquery.com/jquery-latest.pack.js"></script>
    <script type="text/javascript" src="modal.js"></script>
    </head>
    <body>
    <div class = "dog-images">
    	<a href = "sub/sm/length.php" id = "small-dog-image">
    		<img src = "images/1.jpg" alt = "Pups and Petites up to 20 pounds" id="sm-dog" width="140px" height="240px" /></a>
    	<a href = "sub/med/length.php" id = "medium-dog-image">
    		<img src = "images/2.jpg" alt = "Mid sized 21-50 pounds" id="md-dog" width="140px" height="240px" /></a>
    	<a href = "sub/lg/length.php" id = "large-dog-image">
    		<img src = "images/3.jpg" alt = "Larger than life 51-80 pounds" id="lg-dog" width="140px" height="240px" /></a>
    	<a href = "sub/xl/length.php"id = "xlarge-dog-image">
    		<img src = "images/4.jpg" alt = "Gentle giant over 80 pounds" id="xl-dog" width="140px" height="240px" /></a>
    </div>
    
    <script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
    <script type="text/javascript">
    $(document).ready(function(){
    	$("#sm-dog, #md-dog, #lg-dog, #xl-dog").mouseover(function() {
    		$("#sm-dog").attr("src", "images/6.jpg");
    		$("#md-dog").attr("src", "images/6.jpg");
    		$("#lg-dog").attr("src", "images/6.jpg");
    		$("#xl-dog").attr("src", "images/6.jpg");
    	});
    
    	$("#sm-dog, #md-dog, #lg-dog, #xl-dog").mouseout(function() {
    		$("#sm-dog").attr("src", "images/1.jpg");
    		$("#md-dog").attr("src", "images/1.jpg");
    		$("#lg-dog").attr("src", "images/2.jpg");
    		$("#xl-dog").attr("src", "images/3.jpg");
    	});
    });
    </script>
    </body>
    </html>
    Used my images cause I can't get to yours. Replace where it's needed.
    Evolution - The non-random survival of random variants.

    "If you leave hydrogen alone, for long enough, it begins to think about itself."

  • Users who have thanked sunfighter for this post:

    calebandchels (12-10-2013)


  •  

    Posting Permissions

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