Question

Iam desghning glitter text generating website ..where users can select glitters[images] to put it as a text background .. to desighn this iam using the code below…

<ul class="greybox">
        <label style="font-family: NewCenturySchlbk;">
<input type="radio" name="image" value=" Flame-04-june.gif"/> <img src="     Flame-04-june.gif" alt="thumbs up">
 </label>
  </ul>   

 <ul class="greybox">
         <label style="font-family: Helvetica;">
  <input type="radio" name="image" value=" Flame-05-june.gif"/> <img src="     Flame-05-june.gif" alt="thumbs up">
</label>

</ul>   

the above code gives an option for users to select one of the images …user can select image by checking radio button selcted image will be posted to the form specified..code works fine… but its increasing the loading time of the homepage,bcos i have added more then 400 images …. i know this can be reduced by giving an option to click on the link which opens a pop up window where all the images are listed and the user can select one of the images and the selected image should be posted to the form….but how to do desghn the code where the selected image from the popup windows to post it to the “form” …

Answer 1

First of all start cleaning up your code:

<style>
  .greybox label { font-family: NewCenturySchlbk; }
</style>

<ul class="greybox">
  <li>
    <label>
      <input type="radio" name="image" value=" Flame-04-june.gif"/> <img src="Flame-04-june.gif" alt="thumbs up">
    </label>
  </li>
  <li>
    <label>
      <input type="radio" name="image" value=" Flame-05-june.gif"/> <img src="Flame-05-june.gif" alt="thumbs up">
    </label>
  </li>
</ul>  

Loading 400 images is a lot and will slow it down. Not sure what you mean by a pop-up, but why don’t you have a search or paging function? 400 is also a lot to scroll down to.

Also look at the filesizes of the images, try to compress them and the page will also load faster.