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 5 of 5
  1. #1
    New Coder
    Join Date
    Oct 2009
    Posts
    30
    Thanks
    9
    Thanked 0 Times in 0 Posts

    Image and Link changing

    First time poster!!! This forum is great. Anyway, I am having issues with a program that I am writing. I basically have to start with a thumbnail image (non-link) and a link that says "click to see larger image". When I click the link, the image changes to a larger version AND the link text must change to "click to see smaller version". I am able to do this with code below, but I need to find a way to then click on the link again (now "click to see smaller version) and see the whole process undo itself (i.e. back to the thumbnail and "click to see larger version" link).

    I believe that my problem has something to do with the href tag. At first I left it blank, but nothing worked and it would open a file system menu when I click it. I changed it to "#" and everything worked fine, but I can't get anything to happen after the first click changes the image and text. I am only guessing that it might be because it is a new Web page with "#" at the end of it. I tried a bunch of if-else statements with the src file, but nothing worked.

    Help please...


    Code:
    <script type="text/javascript">
    		<!--Hide from incompatible browsers
    		/* <![CDATA[ */
    				
    		function changeText()
    		{
    			document.getElementById('link').innerHTML = 'View Smaller Image';
    			return false;		
    		}
    		
    		function changeImage()
    		{			
    			var newImage = new Image();
    			newImage.src = "images/cottage_large.jpg";
    			document.getElementById('thumbnail').src = newImage.src;	
    			return false; 											
    		}
    				
    		/**/
    		/* ]]> */
    		
    		// Stop hiding from incompatible browsers -->
    	</script>
    
    </head>
    
    <body>
    	
    	<h3>Real Estate</h3>
    		 
    	<p><img src="images/cottage_small.jpg" id="thumbnail"></p>
        
    	<a href="#" id="link" onclick="changeImage(); changeText();">View Larger Image</a>
    	
    
    </body>
    
    </html>

  • #2
    Senior Coder
    Join Date
    Oct 2008
    Location
    Long Beach
    Posts
    1,196
    Thanks
    36
    Thanked 164 Times in 164 Posts
    You'll want to modularize this for larger-scope usage (e.g. if you want multiple links and multiple thumbs on the same page) but just to give you the idea:
    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
    <title>Test</title>
    <script type="text/javascript">
    // <![CDATA[
    
    window.onload = function()
    	{
    	var clink = document.getElementById("link");
    	var thumb = document.getElementById("thumbnail");
    	clink.text1 = clink.innerHTML;
    	clink.text2 = "View Smaller Image";
    	thumb.src1 = thumb.src;
    	thumb.src2 = "images/cottage_large.jpg";
    	clink.thumb = thumb;
    	clink.onclick = function()
    		{
    		if (this.innerHTML == this.text1)
    			{
    			this.thumb.src = this.thumb.src2;
    			this.innerHTML = this.text2;
    			}
    		else
    			{
    			this.thumb.src = this.thumb.src1;
    			this.innerHTML = this.text1;
    			}
    		return false;
    		}
    	}
    
    // ]]>
    </script>
    </head>
    <body>
    
    <h3>Real Estate</h3>
    
    <p><img src="images/cottage_small.jpg" id="thumbnail" /></p>
    
    <a href="#" id="link">View Larger Image</a>
    
    </body>
    </html>
    Feel free to e-mail me if I forget to respond ;)
    ohsosexybrit@gmail.com

  • #3
    New Coder
    Join Date
    Oct 2009
    Posts
    30
    Thanks
    9
    Thanked 0 Times in 0 Posts
    If you had a smiley that bowed to the knees of the poster, I would have inserted it into this reply. I knew it had to me some type of if-else statement, but what you did makes a lot of sense from a global perspective. THANKS!!!

    In general, is it common for a coder to use <a href="#"> when a link is not needed? Is there an alternative if not?

  • #4
    Supreme Master coder! Old Pedant's Avatar
    Join Date
    Feb 2009
    Posts
    25,155
    Thanks
    75
    Thanked 4,338 Times in 4,304 Posts
    It's good practice to use an href in the <A> tag. Not sure, but I think XHTML requires it.

    It really doesn't matter WHAT you put there, though, so long as your onclick handler returns false, as he did there.

    The return false *cancels* the normal effect of the <A> tag, which is to jump to the URL specified in the HREF.

  • #5
    Senior Coder
    Join Date
    Oct 2008
    Location
    Long Beach
    Posts
    1,196
    Thanks
    36
    Thanked 164 Times in 164 Posts
    The anchor tag needs an href (even if empty) for all anchor-related CSS styles and DOM properties to be assigned to it cross-browser.
    Feel free to e-mail me if I forget to respond ;)
    ohsosexybrit@gmail.com


  •  

    LinkBacks (?)


    Posting Permissions

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