?
Solved

An imagemap using CSS

Posted on 2016-08-19
2
Medium Priority
?
61 Views
Last Modified: 2016-08-20
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
Comment
Question by:brucegust
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
2 Comments
 
LVL 6

Accepted Solution

by:
Mikkel Sandberg earned 2000 total points
ID: 41762955
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
 

Author Closing Comment

by:brucegust
ID: 41763990
Perfect!

Thanks!
0

Featured Post

Enroll in August's Course of the Month

August's CompTIA IT Fundamentals course includes 19 hours of basic computer principle modules and prepares you for the certification exam. It's free for Premium Members, Team Accounts, and Qualified Experts!

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Creating a CSS block that only applies to printing By default, all of your CSS applies to every possible view of your page - whether on screen, printed, landscape, touch-screen, or whatever.  You can, however, add CSS that only applies under certai…
When writing CSS, there are a few simple rules that will make your life easier.    1. Using ‘* {box-sizing:border-box;}’. Using this will wrap all your elements in a nice little compact box-model that will give you the width you want, like so... …
In this tutorial viewers will learn how to define a gradient in CSS. Create a new HTML document with an internal stylesheet.: Create a div in CSS and name it Gradient. Define the background as "linear-gradient(to right, #ee3668, black)". Ensure you …
In this tutorial viewers will learn how to style rounded corners for elements in CSS using the border-radius property Begin with a normal styled element such as a div: To style all four corners of the div to be the same degree of roundness, use the …
Suggested Courses
Course of the Month9 days, 22 hours left to enroll

762 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question