I am trying to reverse engineer, with minimal CSS skills myself, an image map that uses CSS rollover effects.
I have a map of California with 4 rollover areas which change color on rollover.
I can do the rollover etc fine, but I can not understand how the below code.
I think the code “TRIMS” the box area to the edges of the California map image.
Can someone tell me what the code elements mean, and most importantly, how they are defined (i.e. Photoshop etc.)?
I would not use ems as in the code below. Unless you have a map that enlarges with text size. Here is the basic idea of how to do what you want. The code pretty much speaks for itself. { visibility: inherit; } Irregular Shaped Anchor With CSS
Sorry, I still don’t get how to write similar code myself. I know the purpose of code and PS, but how do you write this code?
There are multiple instances (s1, s2, etc.) of boxes (length, width) and location (top, left), but where are these in space, and how are the units measured?
You see the code they are pretty exact:{height:.5em;left:13.8em;top:12.6em;width:.2em}
The code absolutely places into position some small rectangular areas so that you can create the illusion of an irregular shape. CSS can only define rectangles so if you have an odd shaped rollover area the only way to do it is is to use smaller rectangles and place them absolutely into position where needed.
Ems are a unit of measurement and will be based on the font size of the parent. If the parent has a computed font-size of 16px then 1em will equal 16px (5 em would equal 80px and .5em would equal 8px).
Using your code we can see that the elements can be placed outside an initial rectangle to create a non rectangular area that can be hovered over to create a rollover effect.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<style type="text/css">
#california1 {
font-size:16px;/* 1 em will = 16px*/
position:relative;/* the absolute elements will be placed in relation to this*/
width:13.7em; /* 13.7 x 16 = 219px */
height:14em;
background:#fcf;
}
#california1 a,#california1 span {
position:absolute;
background:#fcf;
}
#california1 .s1 {height:.3em;left:14em;top:12.7em;width:.2em}
#california1 .s2 {height:.5em;left:13.8em;top:12.6em;width:.2em}
#california1 .s3 {height:.7em;left:13.7em;top:12.5em;width:.1em}
#california1 .s4 {height:.8em;left:13.6em;top:12.4em;width:.1em}
#california1 a {
color:#000;
text-decoration:none;
width:100%;
height:100%;
}
#california1 a:hover,#california1 a:hover span {background:#000}
</style>
</head>
<body>
<div id="california1">
<a href="#">
<span class="s1"></span>
<span class="s2"></span>
<span class="s3"></span>
<span class="s4"></span>
</a>
</div>
</body>
</html>
If you look at Erics demo you should see how rectangular shapes are used to make the circle effect.
It’s a labour intensive way to do this but is the only choice for a css solution if you want tightly hugging edges.
There are jquery solutions that will turn an image map into rollovers automatically and will automate the process but you still have to create the initial image map co-ordinates of course.