how to show a portion of the PNG image file??

  • IcyDragoon
  • Student
  • Student
  • IcyDragoon
  • Posts: 65

Post 3+ Months Ago

the question on the subject.

I have seen others using .png this way

so how is that achieved?

can this be done on jpeg also?

thanks in advance.
  • Anonymous
  • Bot
  • No Avatar
  • Posts: ?
  • Loc: Ozzuland
  • Status: Online

Post 3+ Months Ago

  • joebert
  • Fart Bubbles
  • Genius
  • User avatar
  • Posts: 13502
  • Loc: Florida

Post 3+ Months Ago

Can you be a little more specific about what you're looking for, do you have an example ?

Off the top of my head I'm thinking about using a DIV set to a width and height I want, then setting the background of that box to be the image I want to use and positioning it where I want.

Code: [ Select ]
<div id="image-portion"></div>

Code: [ Select ]
#image-portion {
   background-image: url('image.png');
   background-position: 20px 20px;
   width: 60px;
   height: 60px;
}
  1. #image-portion {
  2.    background-image: url('image.png');
  3.    background-position: 20px 20px;
  4.    width: 60px;
  5.    height: 60px;
  6. }
  • IcyDragoon
  • Student
  • Student
  • IcyDragoon
  • Posts: 65

Post 3+ Months Ago

some examples:

Image

Image

Image

Oh, that is how its done, setting position with css.

PS: hmmmm you are one post away from 10k
  • joebert
  • Fart Bubbles
  • Genius
  • User avatar
  • Posts: 13502
  • Loc: Florida

Post 3+ Months Ago

Aha.

You want to show one section of the image by default, and move to another section of the image when the visitor does something like move their mouse over the image right ?

If that's the case, the term you're looking for is "CSS Sprite".
  • IcyDragoon
  • Student
  • Student
  • IcyDragoon
  • Posts: 65

Post 3+ Months Ago

okay, thanks.

I see some result with my searching now.

so, what's the benefit of doing so

verse seperate images?
  • joebert
  • Fart Bubbles
  • Genius
  • User avatar
  • Posts: 13502
  • Loc: Florida

Post 3+ Months Ago

Keeping the number of connections being made to the server low in relation to the number of visitors on the website is good. Servers can only handle so many connections at once and if one visitors browser decides it wants to use 32 connections to download every image on the page at one time, well, that reduces the number of slots available to other visitors meaning you have people waiting in line.

Placing multiple images in one file still allows the browser to download all of the images at one time, but makes sure the browser doesn't use too many connections to the server in order to do so.

To me, that is the best reason to use sprites VS multiple images.

Now, one of the common reasons people use sprites is that it eliminates flickering between transitions of images states for say a mouse-over.

Post Information

  • Total Posts in this topic: 6 posts
  • Users browsing this forum: No registered users and 75 guests
  • You cannot post new topics in this forum
  • You cannot reply to topics in this forum
  • You cannot edit your posts in this forum
  • You cannot delete your posts in this forum
  • You cannot post attachments in this forum
 
 

© 1998-2014. Ozzu® is a registered trademark of Unmelted, LLC.