www.webdeveloper.com
Results 1 to 9 of 9

Thread: Adding hundreds of images to html

  1. #1
    Join Date
    Sep 2009
    Posts
    16

    Adding hundreds of images to html

    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.

  2. #2
    Join Date
    Jan 2011
    Location
    America
    Posts
    32
    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

  3. #3
    Join Date
    Sep 2009
    Posts
    16
    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??

  4. #4
    Join Date
    Mar 2010
    Posts
    672
    Quote Originally Posted by delgreco View Post
    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:
    PHP Code:
    <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.

  5. #5
    Join Date
    Jan 2011
    Location
    America
    Posts
    32
    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

    HTML Code:
    <style type="text/css">
    
    .image_1{
            width:20px;height:20px;
            background:url("image.jpg") 0 0;
            display:inline-block;
    }
    
    </style>
    HTML Code:
    <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

  6. #6
    Join Date
    Jan 2011
    Location
    America
    Posts
    32
    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.

  7. #7
    Join Date
    Sep 2009
    Posts
    16
    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?

  8. #8
    Join Date
    Jan 2011
    Location
    America
    Posts
    32
    You can take the following:
    HTML Code:
    <div> <a href="http://www.google.ca" class="box3"></a></div>
    And just make it:
    HTML Code:
    <a href="http://www.google.ca" class="box3"></a>
    The reason that this wont work:
    HTML Code:
    <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.

  9. #9
    Join Date
    Sep 2009
    Posts
    16
    Hey Phoubers,

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

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  
HTML5 Development Center



Recent Articles