0

Hello all,

I am doing project which user can upload its image and can customize it according to different differnt functionality available on the site,in which one functionality is that when that the price of image is increases according to the image size for example:
I have following radio buttons
*12"X10"=$59
<img ="smaller size image">(on click the div is show)
*15"X18"=$89
<img="larger den above size and smaller den below size">(on click the div is show
*18"X 20"=$100<img"maximum size image"/>
so when user click on above radio buttons the image size is incrase according to itz price range

2
Contributors
2
Replies
36
Views
3 Years
Discussion Span
Last Post by neha05
0

Typically you would load all three divs with images of different size. One of the divs will be displayed while the other two will not. You use display:block for displayed div and display:none property for the two other divs:

<div id="large" style="display:none"><img...
<div id="medium" style="display:block"><img...
<div id="small" style="display:block"><img...

or appropriate class. Now when user clicks on radio buttons you use javascript or jquery to change the display property of the divs as apprpriate:

$('#large').show();
$('#medium').hide();
$('#small').hide();

If there are many images on the page you might want to use ajax instead of preloading them.

Edited by broj1

This topic has been dead for over six months. Start a new discussion instead.
Have something to contribute to this discussion? Please be thoughtful, detailed and courteous, and be sure to adhere to our posting rules.