Member Avatar for neha05

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
  • 321 Views
  • 6 Days Discussion Span
  • Latest Post Latest Post by neha05
Member Avatar for broj1

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
Member Avatar for neha05

thanks broj1 ,it is helpful for me

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.