Results 1 to 14 of 14

Thread: Fun with sprites

  1. #1
    Thinkin' out loud again Builder's Avatar
    Join Date
    Nov 2002
    Location
    Illinois
    Posts
    2,088
    Rep Power
    19

    Fun with sprites

    So I larnt me some new stuff today. I created a sprite and the associated code to display bits and pieces of it. Applicable code:

    HTML:
    HTML Code:
    	<ul class="legend">
    	 <li><span class="blue_pin"></span> = General camping locations &mdash; usually; see next point about location accuracy.</li>
    	 <li><span class="green_pin"></span> = High Adventure locations &mdash; or at least "Out of the Ordinary" Adventures.</li>
    	 <li><span class="red_pin"></span> = "sub-camps" within larger multi-day events. For example: on the Current River are a number of campsites that we've used over 6-8 trips. On Land Between the Lakes, this is used to show our campsites on a 1975 High Adventure Trip.</li>
    	 <li><span class="yellow_pin"></span> = OK I'm cheating. We actually didn't stay outdoors in these places. But they were usually on our way to or from other major events such as Philmont.</li>
    	</ul>
    CSS:
    Code:
    .legend {
    	list-style-type: none;
    	margin-bottom: 1.5em;
    }
    
    .legend li {
    	padding-top: 1em;
    	vertical-align: bottom;
    	margin-left: -25px;
    }
    
    .legend li span {
    	background-image: url("pins.png");
    	background-repeat: no-repeat;
    	padding-top: 10px;
    	padding-right: 17px;
    	margin-right: .25em;
    }
    
    .blue_pin {
    	background-position: 0 0;
    	width: 17px;
    }
    
    .green_pin {
    	background-position: -16px 0;
    	width: 16px;
    }
    
    .red_pin {
    	background-position: -33px 0;
    	width: 16px;
    }
    
    .yellow_pin {
    	background-position: -49px 0;
    	width: 17px;
    }
    The sprite:
    http://troop53.net/about/pins.png

    The whole thing in context:
    http://troop53.net/about/oe_hist.htm

    A couple of odd things, well to me anyway, that I found:
    a) an empty <span> will not inherit the width of the background
    b) an empty <span> will not take CSS width or height.
    c) an empty <span> will take padding

    I know! Go figure.

    Question: Is there a better way of doing this? In other words, is an empty <span> the way to go here or is there a better method?

    Thanks,
    Kevin
    Last edited by Builder; 4-29-15 at 10:24 AM. Reason: changed URL as per Bruce's post
    A good friend will come and bail you out of jail...
    but a true friend will be sitting next to you saying,
    "Damn... that was fun!"

  2. #2
    target='_blank' snowmaker's Avatar
    Join Date
    Nov 2002
    Location
    West Virginia
    Posts
    3,450
    Rep Power
    21
    I thought about learning how to use sprites. I got as far as the understanding how it works then my laziness took over. I ended up just copy/pasta from Dynamic Drive.

    This is the page I was going to use them on - http://somdbristol.powweb.com/bmt/Rebates/, but since the there were only going to be a little red or green triangle graphic, I didn't think it that important. Now if there were going to be 4 or 5 graphic images used, I would've spent the extra few minutes to expand my mind.

    BTW, I get a 404 when I follow the 'oe_history' link in your post.
    -bruce /* somdcomputerguy */
    'If you change the way you look at things, the things you look at change.'

  3. #3
    Thinkin' out loud again Builder's Avatar
    Join Date
    Nov 2002
    Location
    Illinois
    Posts
    2,088
    Rep Power
    19
    Quote Originally Posted by snowmaker View Post
    I get a 404 when I follow the 'oe_history' link in your post.
    Aargh! My bad, changed it to the real one.

    Yeah, copy/paste is a wonderful thing. What spurred me to do a little learning was I found a piece of software at SnapFiles that built the sprite for me from 4 separate graphics. It also wrote the basic CSS. Both needed modification to use. The sprite needed some slight resizing in IrfanView. The CSS had a bunch of repeating stuff that I took out of the classes and applied to the span tag.

    It was kind of the perfect beginner sprite project.
    A good friend will come and bail you out of jail...
    but a true friend will be sitting next to you saying,
    "Damn... that was fun!"

  4. #4
    target='_blank' snowmaker's Avatar
    Join Date
    Nov 2002
    Location
    West Virginia
    Posts
    3,450
    Rep Power
    21
    Wow. You guys have been all over the place! Using sprites is an interesting idea, and downloading only one image and then using parts of it when necessary are beneficial as well in many ways I'm sure, speed for the end user is probably the most important one.
    -bruce /* somdcomputerguy */
    'If you change the way you look at things, the things you look at change.'

  5. #5
    Thinkin' out loud again Builder's Avatar
    Join Date
    Nov 2002
    Location
    Illinois
    Posts
    2,088
    Rep Power
    19
    Quote Originally Posted by snowmaker View Post
    Wow. You guys have been all over the place!
    Reminds me of a Beach Boys song. Yeah, we do "Get Around"! We've got 13 Scouts and 4 adults going back to Northern Minnesota in about 2 months. Depending on where they are on a lake or 2 they might accidentally "invade" Canada (eh?). And we're talking about invading your neck of the woods next year. Run! Run fast!

    Quote Originally Posted by snowmaker View Post
    Using sprites is an interesting idea, and downloading only one image and then using parts of it when necessary are beneficial as well in many ways I'm sure, speed for the end user is probably the most important one.
    It seems using that sprite saves a whopping 4kb of bandwidth and 2 HTTP requests over the previous version of that page. As stated, it was a good "beginner sprite project".

    Kevin
    A good friend will come and bail you out of jail...
    but a true friend will be sitting next to you saying,
    "Damn... that was fun!"

  6. #6
    target='_blank' snowmaker's Avatar
    Join Date
    Nov 2002
    Location
    West Virginia
    Posts
    3,450
    Rep Power
    21
    Quote Originally Posted by Builder View Post
    And we're talking about invading your neck of the woods next year. Run! Run fast!
    Well I don't live in Solomons (Calvert County) anymore. I haven't been there in a while, and I heard that it's changed quite a bit. The land, and the wonderful people I met there are still there though. St. Mary's County is beautiful too, there is a lot of history (Marine and Native American and war (WWII and back to colonial times)). I live in southern WV now, I've lived in both Greenbrier and Monroe Counties (both beautiful), while I haven't lived in Pocahontas County, it is absolutely beautiful there.
    -bruce /* somdcomputerguy */
    'If you change the way you look at things, the things you look at change.'

  7. #7
    Thinkin' out loud again Builder's Avatar
    Join Date
    Nov 2002
    Location
    Illinois
    Posts
    2,088
    Rep Power
    19
    WV is where I meant. Again, run fast!
    A good friend will come and bail you out of jail...
    but a true friend will be sitting next to you saying,
    "Damn... that was fun!"

  8. #8
    target='_blank' snowmaker's Avatar
    Join Date
    Nov 2002
    Location
    West Virginia
    Posts
    3,450
    Rep Power
    21
    I just wanted to make sure. Here is some pics I took when I first moved here. That's the Greenbrier River, the town is Alderson.
    Wvpics
    -bruce /* somdcomputerguy */
    'If you change the way you look at things, the things you look at change.'

  9. #9
    Thinkin' out loud again Builder's Avatar
    Join Date
    Nov 2002
    Location
    Illinois
    Posts
    2,088
    Rep Power
    19
    Nice! One thing I always struggled with in photography was water reflections. Even back in the Kodachrome/35mm days (there's another song ). Well done.

    Kevin
    A good friend will come and bail you out of jail...
    but a true friend will be sitting next to you saying,
    "Damn... that was fun!"

  10. #10
    target='_blank' snowmaker's Avatar
    Join Date
    Nov 2002
    Location
    West Virginia
    Posts
    3,450
    Rep Power
    21
    Thanks man.
    -bruce /* somdcomputerguy */
    'If you change the way you look at things, the things you look at change.'

  11. #11
    Rick
    Join Date
    May 2002
    Location
    Minneapolis, MN
    Posts
    1,753
    Rep Power
    19
    @Builder, if you're going up to Camp Many Point, you'll still be quite a hike from our neighbors to the North. You would, however, be within a day's hike of the headwaters of the Mississippi. I know because I made the trek back in the days when "Pet Sounds" was still new. Yes, I'm *that* old.
    Rick Trethewey

  12. #12
    Thinkin' out loud again Builder's Avatar
    Join Date
    Nov 2002
    Location
    Illinois
    Posts
    2,088
    Rep Power
    19
    Going to Boundary Waters. I know they're spending the night somewhere on the way, probably in WS or southern MN. I'm not personally going so I haven't kept up with some of the details.

    Going on 40 years ago now -- yes, I'm *that* old, but not as old as you apparently -- on a family vacation I waded across the Mississippi at Lake Itasca. It was a cold drizzly August morning. Took about an hour to stop shivering afterward, even with the heater in my dad's truck going full blast! Just now looked up Itasca SP, went to the "official" MN DNR website. It seems you can still wade the river there. Kind of surprising to me.
    A good friend will come and bail you out of jail...
    but a true friend will be sitting next to you saying,
    "Damn... that was fun!"

  13. #13
    Rick
    Join Date
    May 2002
    Location
    Minneapolis, MN
    Posts
    1,753
    Rep Power
    19
    It's obviously a seasonal thing, but when I crossed the Mississippi at the headwaters a decade before you, it was a small step for a 12 year-old to hop over it. It wasn't much more than a 3-foot wide trickle. I mean, I thought it was cool to be able say you'd stepped over the Mississippi, but having seen Yellowstone/Old Faithful a few years prior I had envisioned a much grander facility surrounding it, so after a long day's hike through some nasty woods it was something of a let-down.

    I was such a petulant child in my wayward youth.
    Rick Trethewey

  14. #14
    Thinkin' out loud again Builder's Avatar
    Join Date
    Nov 2002
    Location
    Illinois
    Posts
    2,088
    Rep Power
    19
    Quote Originally Posted by rainbore View Post
    I was such a petulant child in my wayward youth.
    I didn't become a petulant child until my wayward adulthood.
    A good friend will come and bail you out of jail...
    but a true friend will be sitting next to you saying,
    "Damn... that was fun!"

Posting Permissions

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