Adding hundreds of images to html

[delgreco]

Hi,

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?

Any help is really appreciated, thanks so much.

[Phoubers]

The best way to go about this is to create one big image file. The image file should contain all the smaller images in it. This is called an image sprite.

Then use the css property background-position to cut the image into many different backgrounds, you will need many css classes to do this but its worth it.

Heres an example of image sprites:
wcTutorials - Image Sprites

[delgreco]

Phoubers,

Thanks for the excellent information, it works great! But one more question now, how do I turn all of these div's into a link so that they lead to a different part of my website??

[Jarrod1937]

Phoubers,

Thanks for the excellent information, it works great! But one more question now, how do I turn all of these div's into a link so that they lead to a different part of my website??

Apply this styling to the links:

<style type="text/css">
.thumblinks{
display:block;
width:100%;
height:100%
}
</script>

<div>
<a href="" class="thumblinks"></a>
</div> 

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.

[Phoubers]

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

<style type="text/css">

.image_1{
        width:20px;height:20px;
        background:url("image.jpg") 0 0;
        display:inline-block;
}

</style>

<a href="" class="image_1"></a>

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

[Phoubers]

I've done some extra testing with this example, it works perfectly if you do it right, however, if you leave the href attribute blank, then it does not work as expected.

[delgreco]

Hey guys...thank you so much for the responses, really helps! I got the code to work....here is mine:

.box3 {
background-image: url(bubbles-880-x-500-good_05.jpg);
background-position: 75px -50px;
height: 25px;
width: 75px;
overflow: hidden;
position: absolute;
left: 75px;
top: 50px;

}


<div> <a href="http://www.google.ca" class="box3"></a></div>


But I do have one question, why can't I write it this way:

<div class="box3"> <a href="http://www.google.ca"></a></div>

This is normally how I have always made my divs, declaring the class within the opening div block. Why does it not work for the second example here?

[Phoubers]

You can take the following:

<div> <a href="http://www.google.ca" class="box3"></a></div>

And just make it:

<a href="http://www.google.ca" class="box3"></a>

The reason that this wont work:

<div class="box3"> <a href="http://www.google.ca"></a></div>

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.

[delgreco]

Hey Phoubers,

Thanks for the help, I really appreciate it!! It is a huge help!! Thanks again!!