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
    New to the CF scene
    Join Date
    Jul 2013
    Posts
    1
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Unhappy Multiple select boxes affecting multiple images **Please Help**

    Hi guys,

    I have set up a script that allows me to have two <select> boxes affecting one image, which i was really pleased about.

    My problem is now that i need many instances of this on one page, which means that i cant directly refer to the id of the image or of the select boxes. Could you help me acheive this final step? i would be so grateful....

    Here is the code:

    Code:
    <!DOCTYPE HTML PUBLIC “-//W3C//DTD HTML 4.01//EN”>
    
    <html>
      <head>
    	<script type="text/javascript">
    
        function callAFunction(SelectBox)
        {
            var caption=[
                'Default Image Caption',
                'Caption1',
                'Caption2',
                'Caption3',
                'Caption4',
                'Caption5',
                'Caption6',
                'Caption7',
                'Caption8',
                'Caption9'],
            bp='images/',
            imgnum=8,
            thumb=document.getElementById('thumb'),
            description=document.getElementById('caption');
            thumb.src=bp+''+colour.name+shape.value+colour.value+'.jpg'
            description.innerHTML=caption[SelectBox.value];
        }
    
    </script>
    		<div class="bunting">
    			<div class="header">
    			</div>
    		
    			<img src="design1triangularred.jpg" alt="" id="thumb" />
    
    			<label>Change the colour: </label>
    			<select id="colour" name="design1" onChange="callAFunction(this); return false;">
    				<option value="pink">Pink</option>
    				<option value="blue">Blue</option>
    				<option value="red">Red</option>
    				<option value="gold">Gold</option>
    			</select><br />
    
    			<label>Change the shape: </label>
    			<select id="shape" onChange="callAFunction(this); return false;">
    				<option value="triangular">Triangular</option>
    				<option value="swallowtail">Swallowtail</option>
    				<option value="chevron">Chevron</option>
    			</select>
    		</div>
    		
    		<div class="bunting">
    			<div class="header">
    			</div>
    		
    			<img src="design2triangularred.jpg" alt="" id="thumb" />
    
    			<label>Change the colour: </label>
    			<select id="colour" name="design2" onChange="callAFunction(this); return false;">
    				<option value="pink">Pink</option>
    				<option value="blue">Blue</option>
    				<option value="red">Red</option>
    				<option value="gold">Gold</option>
    			</select><br />
    
    			<label>Change the shape: </label>
    			<select id="shape" onChange="callAFunction(this); return false;">
    				<option value="triangular">Triangular</option>
    				<option value="swallowtail">Swallowtail</option>
    				<option value="chevron">Chevron</option>
    			</select>
    		</div>
      </body>
    
    </HTML>
    I hoe you can help, i just dont know enough yet to wrap my head around it.

  • #2
    Senior Coder Logic Ali's Avatar
    Join Date
    Sep 2010
    Location
    London
    Posts
    1,028
    Thanks
    0
    Thanked 207 Times in 202 Posts
    Quote Originally Posted by goldjames View Post
    Hi guys,

    I have set up a script that allows me to have two <select> boxes affecting one image, which i was really pleased about.

    My problem is now that i need many instances of this on one page, which means that i cant directly refer to the id of the image or of the select boxes.
    In each onchange handler, just pass the corresponding ID(s) as additional parameters.


  •  

    Posting Permissions

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