Results 1 to 6 of 6

Thread: How are sprite images used

  1. #1
    Join Date
    Jan 2011
    Location
    Southeastern CT
    Posts
    594
    Thanks
    43
    Thanked 28 Times in 28 Posts

    Default How are sprite images used

    I see these images called sprite images.

    They seem to have multiple parts that are used in a way I don't understand.

    How do you specify what part you need for these images?

    Like this is used on this page as I write this http://www.dynamicdrive.com/forums/c...es/sprites.png
    Thanks,

    Bud

  2. #2
    Join Date
    May 2012
    Location
    Hitchhiking the Galaxy
    Posts
    1,013
    Thanks
    47
    Thanked 139 Times in 139 Posts
    Blog Entries
    1

    Default

    "Most good programmers do programming not because they expect to get paid or get adulation by the public, but because it is fun to program." - Linus Torvalds
    Anime Views Forums
    Bernie

  3. #3
    Join Date
    Mar 2005
    Location
    SE PA USA
    Posts
    28,952
    Thanks
    43
    Thanked 3,195 Times in 3,157 Posts
    Blog Entries
    12

    Default

    That's an excellent resource. I would add a relatively simple explanation though:

    A sprite is a composite image most often used in a rollover. Unlike a more traditional rollover that changes the image onmouseover and onmouseout, usually by changing the src attribute of an img tag, a sprite is usually a background image of an element whose dimensions are smaller than the sprite image. Because of this difference in size, only a portion of the sprite image can be visible at any given point. To change its appearance, the background image's position (top and left coordinates) are changed, thus revealing a different part of the sprite image.

    There are others, but a primary advantage is that, since the sprite image is already loaded, there is never any lag time in simply shifting its position property.

    Another usage for a sprite is that it can contain all of the various utility images for a script like - say a lightbox. It can contain fancy boarders, close, next and previous buttons. It can then be employed as a background image for each of these features simply by having its position property adjusted so that only the desired portion is visible.

    Here the primary advantage is only one request for one image that's less bytes in aggregate than all of the separate images would be. That saves both time and bandwidth.
    - John
    ________________________

    Show Additional Thanks: International Rescue Committee - Donate or: The Ocean Conservancy - Donate or: PayPal - Donate

  4. #4
    Join Date
    Jan 2011
    Location
    Southeastern CT
    Posts
    594
    Thanks
    43
    Thanked 28 Times in 28 Posts

    Default

    It must take some work to get the postions for each part of the sprite.

    And then each time that sprite is used it must be used with the same position of the sprite? Or,as long as the original dementions of the sprite are not changed,then it would be the same each time it is used.
    Thanks,

    Bud

  5. #5
    Join Date
    Mar 2005
    Location
    SE PA USA
    Posts
    28,952
    Thanks
    43
    Thanked 3,195 Times in 3,157 Posts
    Blog Entries
    12

    Default

    Doing it all "by hand", yes it's a lot of work unless it's just two or three images you're combining. But that's where the resource Bernie linked to comes in. They have a link to Sprite Me:

    http://spriteme.org/

    where you can rather easily compile your own sprites and have the background positions figured out for you.
    - John
    ________________________

    Show Additional Thanks: International Rescue Committee - Donate or: The Ocean Conservancy - Donate or: PayPal - Donate

  6. #6
    Join Date
    Jul 2008
    Location
    Derbyshire, UK
    Posts
    1,946
    Thanks
    16
    Thanked 304 Times in 303 Posts
    Blog Entries
    11

    Default

    TIP:

    If you're making sprites manually in Photoshop (or if you lose the CSS generated by Sprite Me), an easy way to find the position of each image contained in the big sprite image is to turn on the information palette (Window >> information) and then use the x/y coordinates.

    Hover at the top left point of each sprited image and make a note of its x/y coordinates, then transfer those x/y values to the background position in your CSS, but with a minus sign in front.

    Don't forget the minus sign! I endured much frustration when I first got into using sprites simply because my brain refused to acknowledge that I needed to use negative values in the css background position to pull the big sprite image upwards and to the left.
    Last edited by Beverleyh; 01-13-2013 at 06:03 AM. Reason: Reminder about negative values in positioning
    Focus on Function Web Design | Latest News RSS | Facebook | Twitter |
    Fast Edit (A flat file, PHP web page editor & CMS. Small, FREE, no database!) | Fast Edit BE (Snippet Manager) (Web content editor for multiple editable regions!) | Fast Apps |
    The only limit to creativity is imagination: JemCon.org

Similar Threads

  1. Sprite and http request
    By hannah sofia in forum CSS
    Replies: 5
    Last Post: 07-08-2011, 01:36 AM
  2. Resolved How can i center this CSS Sprite menu?
    By Ryan Fitton in forum CSS
    Replies: 2
    Last Post: 07-03-2010, 09:17 PM
  3. Sprite Image
    By oye in forum CSS
    Replies: 2
    Last Post: 12-17-2009, 05:54 AM
  4. Stubborn Sprite Stacking
    By imanbushara in forum CSS
    Replies: 0
    Last Post: 05-11-2009, 04:08 PM
  5. CSS sprite help
    By lanta99 in forum CSS
    Replies: 1
    Last Post: 04-17-2009, 12:04 AM

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
  •