I'm using Dreamweaver to design a website, but I do have a pretty decent knowledge of writing html code as well. My problem, I'm creating a home page that will be made up of about 200 small images (either PNG or JPEG). Each image will be roughly 25 pixels by 25 pixels, and each image will take you to a new link when clicked. What is the best way to accomplish this in order to minimize the amount of code i will need and minimize the amount of time it takes to load the page. I can't use a table because the images are all different sizes. Should I just create several hundred div's? Or is there a better way?
That makes the entire div container a link, works perfectly (used it for divs that were color swatches before).
However, in my opinion, this would all be much better done with a server side language doing the leg work. But the current method discussed is fine if you're doing a pure html setup.
Change the following css to fit your needs, but keep the display:inline-block; declaration. And set the height and width properties to the size of the background-image or else it wont display properly, remember you can do live testing with the wcEditor
If you set the display property to inline-block, and the height and width dimensions, then the anchor will stretch to that size without content nested inside it. The result should be a clickable box with your background sprite. A div is not even required
is because the <a> element will not be the entire size of the box. Of course, you could use CSS to do that but <a href="http://www.google.ca" class="box3"></a> is much easier and makes the file size smaller.
Anyways, glad I could help good luck with your site.