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 4 of 4
  1. #1
    New to the CF scene
    Join Date
    Feb 2007
    Posts
    3
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Javascript image swap help

    I'm having trouble getting a piece of javascript I'm using to work. Basically I have my project image load on the left, and when you click on the numbers below and on the right of the image, the corresponding image should load where the original one is.

    The test is here: (my actual site is down for a couple days while I switch hosting providers)
    http://aestheticphiladelphia.com/cfp...gizentest2.php

    I took the script from here:
    http://alistapart.com/articles/imagegallery

    I'm not that experienced in Javascript. Can anyone see what i'm doing wrong?

  • #2
    Regular Coder
    Join Date
    Jan 2007
    Posts
    213
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Simple, the current image put into a DIV tag with an ID in it, then when you click 2 get it to call a javascript function which changes the innerHTML and shows the second image.

    something like this

    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=iso-8859-1" />
    <title>Untitled Document</title>
    <script type="text/javascript" language="javascript">
    	function swapimage(NUMBER){
    		if (NUMBER == "1")IMAGE = "firstimage.jpg";
    		else if (NUMBER == "2")IMAGE = "secondimage.jpg";
    		
    		document.getElementById("swappingdiv").innerHTML = "<img src=\""+IMAGE+"\" />";
    	}
    		
    </script>
    </head>
    
    <body>
    <div id="swappingdiv"><img src="firstimage.jpg" /></div>
    <a href="Javascript:" onclick="swapimage('1');">1</a>
    <a href="Javascript:" onclick="swapimage('2');">2</a>
    </body>
    </html>
    Matthew Bagley
    Paramiliar Design Studios
    Website Design | Website Development | Search Engine Optimisation (SEO)

  • #3
    New to the CF scene
    Join Date
    Feb 2007
    Posts
    3
    Thanks
    0
    Thanked 0 Times in 0 Posts
    I can't thank you enough, that worked beautifully. I knew it had to be something simple like that, but like I said, i don't know enough javascript.

    For some reason, everytime I click on one of the numbers, it's bringing up the error console but not reporting an error with the page (I'm using firefox on a mac). Any idea why this would happen?

  • #4
    Regular Coder
    Join Date
    Jan 2007
    Posts
    213
    Thanks
    0
    Thanked 0 Times in 0 Posts
    No idea, works ok in FireFox on the PC no error console appears,

    try this little one instead

    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=iso-8859-1" />
    <title>Untitled Document</title>
    <script type="text/javascript" language="javascript">
    	function swapimage(NUMBER){		
    		document.getElementById("swappingdiv").innerHTML = "<img src=\""+IMAGE+"\" />";
    	}
    		
    </script>
    </head>
    
    <body>
    <div id="swappingdiv"><img src="firstimage.jpg" /></div>
    <a href="Javascript:" onclick="swapimage('firstimage.jpg'); return false;">1</a>
    <a href="Javascript:" onclick="swapimage('secondimage.jpg'); return false;">2</a>
    </body>
    </html>
    Matthew Bagley
    Paramiliar Design Studios
    Website Design | Website Development | Search Engine Optimisation (SEO)


  •  

    Posting Permissions

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