CSS Sprite Clickable Map

HTML & CSS
1

Hi,

On my homepage I am using a clickable map with area coords. It is possable to use a css sprite image for all 50 States? Anyone seen one in action?

2

I have seen such… The trick is to make a UL of links and LI A for each state. Give the UL position relative and a set height and width. You will then use absolute position to place each LI where you wanted… that’s gonna be tedious, but it’s quite possible.

here is an example: http://ago.tanfa.co.uk/css/examples/europe-map.html

hope that helps

3

dresden_phoenix,

Thank you for your reply. I have built the css sprite clickablemap for the US and it works great. Is ther a way to combine calls for the css sprite image in the css?

In my ccs sprite I have 7 images. When I check the page load speed at websiteoptimization.com it shows 7 request for the image. In my css I do use a call for each image. e.g.

#facebook{background:url(“/images/sprite.png”) 0 0; width: 30px; height: 30px;}
#twitter{left:400px;width:30px;}
#twitter{background:url(“/images/sprite.png”) 0 -764px; width: 30px; height: 30px;}
#ror{left:450px;width:30px;}
#ror{background:url(“/images/sprite.png”) 0 -684px; width: 30px; height: 30px;}

4

Hi,

I don’t know if this is what you meant but you can shorten the above code to this:


#facebook,
#twitter,
#ror{
    background:url("/images/sprite.png") 0 0; 
    width: 30px; 
    height: 30px;
}
#twitter{left:400px;background-position:0 -764px;}
#ror{left:450px;background-position:-684px;}

I’m not sure what you were getting at exactly as the same image only gets loaded once. It doesn’t get loaded each time as its already in cache.

5

I have the css sprite map of the US up and running. Looks and works great. What are your thoughts on weather or not to use alt tags in this type of css sprite clickable map?

6

They couldn’t hurt, and it’s good for accessibility so I say go for it. If images were off then the user would see nothing.