Improve company productivity with a Business Account.Sign Up

x
  • Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 74
  • Last Modified:

An imagemap using CSS

I worked on a project a while ago where there were multiple images on a single graphic. But instead of it being a conventional image map, it was a series of <li> tags, each with a class. That class was a dimension, from what I can recall.

In any event, I need to duplicate that approach and I've forgotten how it works. Again, it's a large jpg with several logos on it. Then there were several <li> tags and each <li> was kind of like an image map.

Can anyone point me in the right direction?
0
brucegust
Asked:
brucegust
1 Solution
 
Mikkel SandbergFront End DeveloperCommented:
It sounds like you're talking about an image sprite. So each <li> would show a different image, correct?
You should be able to use background-image to specify the sprite, and then use background-position to "select" the right image. So the css may look something like this:
li {
  width: 50px;
  height: 50px;
  background-image: url(path/to/image/sprite.jpg);
}
.image1 {
  background-position: 0px 0px; /* tweak these values as needed */
}
.image2 {
  background-position: 0px 10px; /* tweak these values as needed */
}
/* etc etc */

Open in new window


Let me know if I'm way off here :)
0
 
brucegustPHP DeveloperAuthor Commented:
Perfect!

Thanks!
0
Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

Join & Write a Comment

Featured Post

Keep up with what's happening at Experts Exchange!

Sign up to receive Decoded, a new monthly digest with product updates, feature release info, continuing education opportunities, and more.

Tackle projects and never again get stuck behind a technical roadblock.
Join Now