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
    Jul 2009
    Posts
    186
    Thanks
    72
    Thanked 2 Times in 2 Posts

    jQuery function to change the source of an image???

    Hello all. I am trying to make a function in jQuery that will change the SOURCE of an image. This is what I have so far but it does not work . How can this code be altered to change the source of an image???

    Code:
    function changeImage(imageName,imageSrc){
    	//This works, but I want to try it in jQuery style function
    	//document.getElementById(imageName).src = imageSrc;
    	
    	//This does not work, there is something wrong with imageName
    	$("#imageName").attr("src", imageSrc);
    }

    The way I currently have my images is like this:
    Code:
    <a href="#" onmouseover="changeImage('home','./images/home_over.png');" onmouseout="changeImage('home','./images/home_under.png');">
    <img id="home" name="home" src="./images/home_under.png" alt="HOME &amp; UPDATES" />
    </a>
    Last edited by skcin7; 02-26-2011 at 10:11 AM.

  • #2
    Senior Coder
    Join Date
    Jan 2005
    Location
    Memphis, TN
    Posts
    1,785
    Thanks
    8
    Thanked 131 Times in 129 Posts
    Might not be the most graceful solution but a solution none the less:

    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>Scroll :: easy version ;)</title>
    <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js"></script>
    <script type="text/javascript">
    function imgSwap(){
    	$('#nav a').hover(function(){
    		oldSRC = $(this).children('img').attr('src');
    		newSRC = $(this).attr('rel');
    		$(this).children('img').attr('src', newSRC);
    	}, function(){
    		$(this).children('img').attr('src', oldSRC);
    	});
    }
    
    
    
    $(document).ready(function(){
    	imgSwap();
    });
    </script>
    
    <style type="text/css">
    }
    
    </style>
    
    </head>
    <body>
    
    <div id="nav">
    <a href="#" rel="http://farm6.static.flickr.com/5219/5478414806_41fe7057ee_t.jpg">
    	<img src="http://farm6.static.flickr.com/5096/5475741180_6c392a2c21_t.jpg" alt="" />
    </a>
    <a href="#" rel="http://farm6.static.flickr.com/5296/5478454563_e8262f8da2_t.jpg">
    	<img src="http://farm6.static.flickr.com/5058/5479010072_399d18ebe1_t.jpg" alt="" />
    </a>
    </div>
    
    </body>
    </html>
    Stop making things so hard on yourself.
    i is tugbucket :: help raise tugburg :: Whitehaven Kiwanis


  •  

    Posting Permissions

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