www.webdeveloper.com
Results 1 to 3 of 3

Thread: Image Selector Query (by Option ID)

  1. #1
    Join Date
    Dec 2010
    Posts
    3

    Image Selector Query (by Option ID)

    Hi Guys,

    I have a small script that checks the ID of the selected option from a combo box, and writes the value of it to the src of an image with ID Img1.

    This works fine - however if the selected option has an ID of "nothing" I would want an image of my choice (hard coded) to be displayed instead.

    Can somebody please point me in the right direction? J/Script is new to me. If this was PHP/xHTML then it would not pose an issue!

    Code:
    var Path='/images/options/';
    
    function CngColor(obj){
     index=obj.selectedIndex;
     if (index<0){  return; }
     document.getElementById('Img1').src=Path+obj.options[index].id;
    }
    HTML Code:
    <select onchange="CngColor(this);" >
    <option value >Colour Options</option>
    <option value="nothing">DISPLAY PRE-DEFINED IMAGE</option>
    <option value="blue.jpg">Blue</option>
    <option value="red.jpg">Red</option>
    I will stay around and help out in the PHP section aswell

  2. #2
    Join Date
    Dec 2010
    Posts
    3
    The <option value> should read <option id> in the above as I use value to pass some info back to PHP.

    Regards

  3. #3
    Join Date
    Dec 2010
    Posts
    3
    Solved myself

    Just incase its of any interest to anybody, I acheived it by:

    Code:
    var Path='/images/options/';
    
    function CngColor(obj){
     index=obj.selectedIndex;
     id=obj.selectedIndex.id;
     if (obj.options[index].id=="nothing"){
    	 document.getElementById('Img1').src="imagepathfornothingimage";
     } else {
     document.getElementById('Img1').src=Path+obj.options[index].id;
     }}

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Posting Permissions

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



Recent Articles