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
    Aug 2011
    Posts
    4
    Thanks
    1
    Thanked 0 Times in 0 Posts

    need some help with this javascript code

    I'm trying to get a drop down box to change the image i've managed to get it working for one but can't seem to get it working when both scripts are on. any help would be much appreciated!


    http://humza-productions.co.uk/test/

    this is the code i'm using, it's for the baseball jacket one but the one that's working live on the website is currently working for the hoodie



    Code:
    <script type="text/javascript">
    window.onload=function()
    {
    
    
    	bp='images/', //base url of your images
    	imgnum=3, //Number of your images. This should match on your comboboxes options.
    	thumb=document.getElementById('sho1'), //id of your image that will be changing
    	combobox=document.getElementsByName('os1')[0]; // id of your combobox.
    	
    	
    	combobox.onchange=function()
    	{
    	thumb.src=bp+'shop'+this.value+'.png';
    	}
    }
    </script>

  • #2
    Regular Coder 2reikis's Avatar
    Join Date
    Nov 2005
    Location
    California
    Posts
    167
    Thanks
    17
    Thanked 13 Times in 13 Posts

    Segregation is the key

    From what I can see of your code, you have two selects but only programmed for one. The block of code you posted needs to be duplicated for each combobox on the page. for example.

    Code:
    bp='images/', //base url of your images
    	imgnum0=3, //Number of your images. This should match on your comboboxes options.
    	thumb0=document.getElementById('sho0'), //id of your image that will be changing
    	combobox0=document.getElementsByName('os1')[0]; // id of your combobox.
    	
    	
    	combobox0.onchange=function()
    	{
    	thumb.src=bp+'shop'+this.value+'.png';
    	}
    
    bp='images/', //base url of your images
    	imgnum1=7, //Number of your images. This should match on your comboboxes options.
    	thumb=document.getElementById('sho1'), //id of your image that will be changing
    	combobox1=document.getElementsByName('os1')[1]; // id of your combobox.
    	
    	
    	combobox1.onchange=function()
    	{
    	thumb.src=bp+'shop'+this.value+'.png';
    	}
    2Reikis
    I did not arrive at my understanding of the physical universe through my rational mind.
    Albert Einstein

  • Users who have thanked 2reikis for this post:

    sndesouza (03-13-2012)

  • #3
    New to the CF scene
    Join Date
    Aug 2011
    Posts
    4
    Thanks
    1
    Thanked 0 Times in 0 Posts

    Smile

    Quote Originally Posted by 2reikis View Post
    From what I can see of your code, you have two selects but only programmed for one. The block of code you posted needs to be duplicated for each combobox on the page. for example.

    Code:
    bp='images/', //base url of your images
    	imgnum0=3, //Number of your images. This should match on your comboboxes options.
    	thumb0=document.getElementById('sho0'), //id of your image that will be changing
    	combobox0=document.getElementsByName('os1')[0]; // id of your combobox.
    	
    	
    	combobox0.onchange=function()
    	{
    	thumb.src=bp+'shop'+this.value+'.png';
    	}
    
    bp='images/', //base url of your images
    	imgnum1=7, //Number of your images. This should match on your comboboxes options.
    	thumb=document.getElementById('sho1'), //id of your image that will be changing
    	combobox1=document.getElementsByName('os1')[1]; // id of your combobox.
    	
    	
    	combobox1.onchange=function()
    	{
    	thumb.src=bp+'shop'+this.value+'.png';
    	}
    cheers! worked perfectly, thank you!

  • #4
    New to the CF scene
    Join Date
    Aug 2011
    Posts
    4
    Thanks
    1
    Thanked 0 Times in 0 Posts

    Smile

    Quote Originally Posted by 2reikis View Post
    From what I can see of your code, you have two selects but only programmed for one. The block of code you posted needs to be duplicated for each combobox on the page. for example.

    Code:
    bp='images/', //base url of your images
    	imgnum0=3, //Number of your images. This should match on your comboboxes options.
    	thumb0=document.getElementById('sho0'), //id of your image that will be changing
    	combobox0=document.getElementsByName('os1')[0]; // id of your combobox.
    	
    	
    	combobox0.onchange=function()
    	{
    	thumb0.src=bp+'shop'+this.value+'.png';
    	}
    
    bp='images/', //base url of your images
    	imgnum1=7, //Number of your images. This should match on your comboboxes options.
    	thumb1=document.getElementById('sho1'), //id of your image that will be changing
    	combobox1=document.getElementsByName('os1')[1]; // id of your combobox.
    	
    	
    	combobox1.onchange=function()
    	{
    	thumb1.src=bp+'shop'+this.value+'.png';
    	}
    cheers! worked perfectly after a little tweaking. You also needed to define a number for the thumb part, I noticed you changed it for the first one but not the others which helped and was able to fix this. thank you!


  •  

    Posting Permissions

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