Jump to content

Many Button Images Within One?


smerny
 Share

Recommended Posts

Hello, I'm pretty much a noobie with this stuff... anyway the website runescape.com has a cool mouse over drop down menu bar and I was trying to figure it out... One of the things I noticed is this image they use for their buttons....{ display: block; color: black; background: url(menu_buttons_bg.png) left -24px;}If you look at that image, you see multiple button images within the one image... how are they able to use only parts of that image depending on different things?

Link to comment
Share on other sites

Without looking at the site, I'll bet there are different values for the left: -24px for each button.The left position slides the image sideways to display the correct part of the image for each different button.

Link to comment
Share on other sites

First, notice that the background declaration uses the all-in-one shorthand. Some items are left out, but the last two (left and -24px) refer to positioning. You will use those to reference the pixel coordinates of the different images (called "sprites") in the master image. As long as the image element's width and height only allow one sprite to be visible at a time, simply changing the coordinates will put a different sprite inside the visible area.Getting it straight can take some time and adjustments.The advantage is that your browser only has to download and cache one image, instead of ten or twenty. This makes the downloading faster, and also means that the rollover sprites are already in memory, so the user does not have to wait to see them when they are needed.

Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
 Share

×
×
  • Create New...