Link to home
Start Free TrialLog in
Avatar of Tammu
Tammu

asked on

image change using a select box

Hi Experts,
I am using a javascript function to change images upon selecting an option from a select box. here is my write up.

<script type="text/javascript" language="javascript">

function color_select(ID){
var colorElem = document.getElementById('color');
var color_dir = 'graphics/';
colorElem.src = color_dir + ID + '.jpg';
}
</script>

i have declared my img tag like this
<img id="color" src="graphics/image1.jpg" >

and my select box is like below
<select name="part_color"  onChange="color_select(this.value);">
<option value="100">Red</option>
<option value="101">Green</option>
<option value="102">Blue</option>
</select>

NOW THIS WORKS fine but there are some case where i wont have image to display for example BLUE color, so when i am selecting blue color i get a big "X" showing that there is no image

How can i change my code in such way when an option has no image and if i select it just displays no image or should say no preview available

Thanks everyone
ASKER CERTIFIED SOLUTION
Avatar of leakim971
leakim971
Flag of Guadeloupe image

Link to home
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
Start Free Trial
Avatar of Tammu
Tammu

ASKER

Thank you but i read some articles saying that W3 validator does not validate onerror tag. Is it safe to use sir

Thanks
I only know it work CURRENTLY on the main web browsers...
Avatar of Tammu

ASKER

thank you sir appreciate it,
You're welcome!
As you have found, the onerror  attribute is not valid HTML/XHTML . So while the code will work, does not meet current web standards and practices. Going forward, browser support for this attribute cannot be guaranteed.

While the attribute is not valid when used inline, the error event is available in the DOM. You can therefore use Javascript to do the same thing. It is certainly not as easy as using inline onerror, but it will validate.

One easy way to do this is using the jQuery JS library to attach your code to the error event. An example can be found here:
http://www.anujgakhar.com/2009/03/16/using-jquery-to-load-alternate-images/

Avatar of Tammu

ASKER

Thanks but now i have one more problem, I am using the above javascript and it works perfectly but if i have one more select box ( drop down box) the onchange event when implemented on the second drop down box is changing the image which is being displayed by the first drop down box.

I am creating the drop down boxes dynamically using a foreach loop as they are  part of my product attrributes

here is my for each loop which is inside a form
<form id="form1" method="post" action="/shoppingcart.html">
<select id="select1" name="Product_Attributes[&mvt:attribute:index;]:value" onChange="color_select(this.value);">
     
         
             <option value="&mvte:option:code;" id="&mvte:option:code;" title="&mvte:option:prompt;" >&mvte:option:prompt;</option>
                                          
               
            <option value="&mvte:option:code;" id="&mvte:option:code;" title="&mvte:option:prompt;">&mvte:option:prompt;</option>
                                          
         
                                    
     
                                                      
   </select>
</form>            

Thanks and appreciate it






You may pass as argument the ID of the image : onChange="color_select(this.value, "ID_OF_IMG_TO_LOAD");"
<img id="ID_OF_IMG_TO_LOAD" />
<img id="ANOTHER_ID_OF_IMG_TO_LOAD" />

Open in new window

Avatar of Tammu

ASKER

ok sir take a look at this link

http://store.cotintheweb.com/product/wool.html

now if you select color it works perfectly, but now say i select a color from the first drop down box and then select a pattern from the second drop down the image disappears, the reason being because the onchange is executing on the second drop down also.

how can i make it only on the first drop down box sir

thanks and appreciate it
SOLUTION
Link to home
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
Start Free Trial
Avatar of Tammu

ASKER

wow it works i didnt even have to remove the id of the image sir, but can you please explain to me what your code does that it works perfectly, i am curious to learn

Thanks
we get the name of the select and we remove all non numeric char
for the first select we get : 1
2 for the second and so on...
if we get "1" we call color_select
Avatar of Tammu

ASKER

Brilliant and wicked cool chief, thanks for the explaination
Avatar of Tammu

ASKER

Thanks
You're welcome! Thanks for the points!