Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Page 1 of 2 12 LastLast
Results 1 to 15 of 17
  1. #1
    New Coder
    Join Date
    Jun 2009
    Posts
    39
    Thanks
    0
    Thanked 0 Times in 0 Posts

    How do they use these many images?

    How do they use these many images in one image?
    can i have an example with the image i attached bellow?
    Attached Thumbnails Attached Thumbnails How do they use these many images?-xwindows.gif  
    Last edited by Zpixel; 06-20-2009 at 07:45 AM.

  • #2
    Supreme Master coder! Old Pedant's Avatar
    Join Date
    Feb 2009
    Posts
    27,166
    Thanks
    80
    Thanked 4,559 Times in 4,523 Posts
    Try this:
    Code:
    <html><head>
    <script>
    function pic( which )
    {
        var t = "-" + (which * 19) + "px";
        document.write( '<div style="width: 19px; height: 19px; overflow: hidden;">'
                        + '<img src="xwindows.gif" style="position: absolute; top: ' + t + ';">'
                        + '</div>'
                      );
    }
    </script>
    </head>
    <body>
    See, like this: <script>pic(0);</script>
    <br/><br/>
    Or you might do this:<ul>
    <li><script>pic(4);</script></li>
    <li><script>pic(8);</script></li>
    <li><script>pic(12);</script></li>
    </ul>
    Or, by hand, like this:
    <div style="width: 19px; height: 19px; overflow: hidden;">
        <img src="xwindows.gif" style="position: absolute; top: -407px;">
    </div>
    
    </body></html>
    They chose a really strange icon size, 19x19 pixels, didn't they?

    And then they have a "break" in the middle there, so that the bottom icons aren't exactly at multiples of 19. Oh, well. You get the idea.

    ***************

    EDIT: Man, that sucks. This only works in MSIE. I don't understand why FF and Chrome don't pay attention to the "overflow: hidden;" but they don't.

    Well, try it with MSIE and I'll see if I can come up with a FF/Chrome version.
    Last edited by Old Pedant; 06-20-2009 at 07:31 AM.

  • #3
    Supreme Master coder! Old Pedant's Avatar
    Join Date
    Feb 2009
    Posts
    27,166
    Thanks
    80
    Thanked 4,559 Times in 4,523 Posts
    The reason for doing this: A single large image will take a lot less time to download than several smaller images. Remember, each image requires the browser to issue a Request and get a Response from the server. There's a lot of time *AND* bytes overhead in doing this. On top of that, the larger image will take fewer bytes to be compressed than the sum of all the smaller images.

    This technique is one that a lot of people use expecially for WAP output (mobile phones), where the bandwidth is a lot lower and every byte counts.

  • #4
    New Coder
    Join Date
    Jun 2009
    Posts
    39
    Thanks
    0
    Thanked 0 Times in 0 Posts
    it was really interesting. thank you.
    overflow: hidden, makes other parts of image hidden and is one of the key points in this way. i have to search around this attribute.

  • #5
    New Coder
    Join Date
    Jun 2009
    Posts
    39
    Thanks
    0
    Thanked 0 Times in 0 Posts
    yes. it seems it doesn't work in FF.

  • #6
    Supreme Master coder! Old Pedant's Avatar
    Join Date
    Feb 2009
    Posts
    27,166
    Thanks
    80
    Thanked 4,559 Times in 4,523 Posts
    Got it.

    Fussy fussy browsers. I'd think that overflow: hidden would be enough, but...

    This code works, though the appearance is a bit different in each browser. Somebody better with CSS styles than I am can probably make it come out the same:

    Code:
    <?xml version="1.0" encoding="utf-8"?>
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
      "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
    <head>
    <style type="text/css">
    div.slicer { 
        position: relative; 
        width: 19px; height: 19px; 
        overflow: hidden; 
        clip: rect(0px,19px,19px,0px);
    }
    </style>
    <script type="text/javascript">
    function pic( which )
    {
        var t = "-" + (which * 19) + "px";
        document.write(   '<div class="slicer">'
                        + '<img src="xwindows.gif" style="position: absolute; top: ' + t + ';">'
                        + '</div>' 
                      );
    }
    </script>
    </head>
    <body>
    See, like this: <script>pic(0);</script>
    <br/><br/>
    Or you might do this:<ul>
    <li><script type="text/javascript">pic(4);</script></li>
    <li><script type="text/javascript">pic(8);</script></li>
    <li><script type="text/javascript">pic(12);</script></li>
    </ul>
    Or, by hand, like this:
    <div class="slicer">
        <img src="xwindows.gif" style="position: absolute; top: -407px;" />
    </div>
    
    </body></html>

  • #7
    Supreme Master coder! Old Pedant's Avatar
    Join Date
    Feb 2009
    Posts
    27,166
    Thanks
    80
    Thanked 4,559 Times in 4,523 Posts
    Incidentally, MSIE (at least v.6) ignores the clipping rectangle, but then the overflow: hidden; works. So putting both in allows it to work in all 3.

  • #8
    New Coder
    Join Date
    Jun 2009
    Posts
    39
    Thanks
    0
    Thanked 0 Times in 0 Posts
    the original script of that image has been attached.
    Attached Files Attached Files

  • #9
    Supreme Master coder! Old Pedant's Avatar
    Join Date
    Feb 2009
    Posts
    27,166
    Thanks
    80
    Thanked 4,559 Times in 4,523 Posts
    ?? Are you sure that's the script for *THAT* image????

    Because that script only uses "left -305px;" and so on to select the "slice" needed, and that image isn't even close to 305 pixels wide.

    But yes,I see what they are doing. The put the image in the background of a <td>. The <td> has limited size (15px by 15px, which *also* does not match the image you showed!) and presumably the part of the background image not inside the <td> is not shown. Presto.

    I could probably do the same thing with the "xwindows.gif" that you posted here, but not by using 15px by 15px and not by using left -305px;.

  • #10
    New Coder
    Join Date
    Jun 2009
    Posts
    39
    Thanks
    0
    Thanked 0 Times in 0 Posts
    the original website of that image and script is http://www.bordobakht.com
    in the left-down corner of the page when you click on the results, a table with those black borders will appear. i don't know what they have really done.

  • #11
    Supreme Master coder! Old Pedant's Avatar
    Join Date
    Feb 2009
    Posts
    27,166
    Thanks
    80
    Thanked 4,559 Times in 4,523 Posts
    Okay, no way I understand WHY it works, but indeed you must use LEFT to position the image, even though what you are actually specifying the distance DOWN the image to the starting point!

    This is almost perfect. Chrome browser wants to add a pixel of height to the image selection, no matter what I try. (I can fix it by changing the height, but then that chops off the image in FF and MSIE.) But other than that...
    Code:
    <?xml version="1.0" encoding="utf-8"?>
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
      "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
    <head>
    <style type="text/css">
    td { 
        font-size: 12px;
        height: 18px;
    }
    td.slicer { 
        width: 19px; height: 19px; 
    }
    </style>
    <script type="text/javascript">
    function pic( which )
    {
        var t = "-" + (which * 19) + "px";
        document.write( '<td class="slicer" style="background: url(\'xwindows.gif\') left ' + t + ';">' );
    }
    </script>
    </head>
    <body>
    <table>
       <tr>
           <script>pic(0);</script>
           <td>see?</td>
       </tr>
       <tr>
           <script>pic(4);</script>
           <td>It works</td>
       </tr>
       <tr>
           <script>pic(8);</script>
           <td>in all 3 browsers</td>
       </tr>
    </table>
    </body></html>

  • #12
    Supreme Master coder! Old Pedant's Avatar
    Join Date
    Feb 2009
    Posts
    27,166
    Thanks
    80
    Thanked 4,559 Times in 4,523 Posts
    OH WOW!

    The HTML that results is *HUGE* compared to what it could be! For all the savings they have made in downloading a single image, they have thrown it all away *AND MUCH MORE* with that incredibly ugly HTML! WOW!

    Even the traditional "8 nested divs" (to get the rounded corners effect) will be a lot less code than this! I'd bet on it.



    WOW.

  • #13
    New Coder
    Join Date
    Jun 2009
    Posts
    39
    Thanks
    0
    Thanked 0 Times in 0 Posts
    yes. but there are some more applications for that script such as ajax loading, print a form, etc. but as you said it was really an ugly script which took me a lot to minimize it for my personal use.

    good luck.

  • #14
    New Coder
    Join Date
    Jun 2009
    Posts
    39
    Thanks
    0
    Thanked 0 Times in 0 Posts
    what is the traditional "8 nested divs" ?. does it have an ajax content loder?

  • #15
    Supreme Master coder! Old Pedant's Avatar
    Join Date
    Feb 2009
    Posts
    27,166
    Thanks
    80
    Thanked 4,559 Times in 4,523 Posts
    You just create something like this:
    Code:
             <div class="border-top" ID="OUTER">
                <div class="border-bot">
                    <div class="border-left">
                        <div class="border-right">
                            <div class="corner-top-left">
                                <div class="corner-top-right">
                                    <div class="corner-bot-left">
                                        <div class="corner-bot-right" ID="CONTENTHERE">
    ... put the content here ...
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
    Then you use background images for each of those, pretty similar to how he's doing the <td>s, but now you have it all done ONE TIME, in the CSS.

    I added the ID="CONTENTHERE" to the inner-most <div>. So all you'd need to do is use AJAX to write content to the innerHTML of the <div>. Presto.

    I also added an ID="OUTER" to the outer-most of the divs. You could make its style be "display: none;" by default and then just change it to "block" after you filled in the content.

    Lots and lots of ways to do this.


  •  
    Page 1 of 2 12 LastLast

    Posting Permissions

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