SitePoint Sponsor

User Tag List

Results 1 to 4 of 4

Hybrid View

  1. #1
    SitePoint Evangelist kyllle's Avatar
    Join Date
    Jun 2008
    Posts
    469
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    what are sprites and how do they get added to code?

    Hi all,

    Just been on my online banking and was checking out their new site design, right clicked and viewed one of the curved boxes on the page to see what kind of method they were using and was presented with a whole host of images that were entitled sprites?

    the link to the images is link

    i was just wondering how these work?

    the site is link

  2. #2
    SitePoint Evangelist
    Join Date
    Aug 2007
    Posts
    566
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Sprite are simply images that are used as resources.
    They where really common is 2d games, 15 years ago.

    In web design, the "sprite" method is used to reduce loading time.
    Basically, a mask with a specific size is applied over the big image, to display only what is needed.
    I mostly have seen this in use on rating scripts, where you can choose how many stars you want to give to an article/product.
    Rather than loading another picture, it's just the position of the big image that is shifted to display another part.

    More infos there: http://www.alistapart.com/articles/sprites/

  3. #3
    SitePoint Wizard
    Join Date
    Apr 2002
    Posts
    2,318
    Mentioned
    3 Post(s)
    Tagged
    0 Thread(s)
    as well as reducing http requests/download time, the same basic technique is used to get rollover buttons based which use images to work via css rather than javascript. e.g.: http://www.faridhadi.com/css-sprites-what-why-how/

  4. #4
    Unobtrusively zen silver trophybronze trophy
    paul_wilkins's Avatar
    Join Date
    Jan 2007
    Location
    Christchurch, New Zealand
    Posts
    14,729
    Mentioned
    104 Post(s)
    Tagged
    4 Thread(s)
    There is a pretty good vidcast at css-tricks on how to use css sprites.
    http://css-tricks.com/video-screenca...e-css-sprites/
    Programming Group Advisor
    Reference: JavaScript, Quirksmode Validate: HTML Validation, JSLint
    Car is to Carpet as Java is to JavaScript


Bookmarks

Posting Permissions

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