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('c olor');
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(thi s.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
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('c
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(thi
<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
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
I only know it work CURRENTLY on the main web browsers...
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/
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/
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:attrib ute:index; ]:value" onChange="color_select(thi s.value);" >
<option value="&mvte:option:code;" id="&mvte:option:code;" title="&mvte:option:prompt ;" >&mvte:option:prompt;</opt ion>
<option value="&mvte:option:code;" id="&mvte:option:code;" title="&mvte:option:prompt ;">&mvte:o ption:prom pt;</optio n>
</select>
</form>
Thanks and appreciate it
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[&
<option value="&mvte:option:code;"
<option value="&mvte:option:code;"
</select>
</form>
Thanks and appreciate it
You may pass as argument the ID of the image : onChange="color_select(thi s.value, "ID_OF_IMG_TO_LOAD");"
<img id="ID_OF_IMG_TO_LOAD" />
<img id="ANOTHER_ID_OF_IMG_TO_LOAD" />
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
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
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
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
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
for the first select we get : 1
2 for the second and so on...
if we get "1" we call color_select
ASKER
Brilliant and wicked cool chief, thanks for the explaination
ASKER
Thanks
You're welcome! Thanks for the points!
ASKER
Thanks