Simple Regional Maps with CSS
Say you have a simple set of regions that you want a user to select from, and you want to do it in a fashion that is a little more fancy than just displaying a heading and a list. You don’t want to resort to something nasty like an image map, so this quick tutorial will run you through how to set a simple regional map using basic CSS and markup. Here is what we will end up with: regional demo
1. Laying out our markup
We create our markup, the id’s are the hooks for our overlays and the spans contained within the anchor tags will provide us with the ability to position the text absolutely as well.
<h1>Select Your Region:</h1> <ul> <li><a id='north-america' href='#'><span>North America</span></a></li> <li><a id='south-america' href='#'><span>South America</span></a></li> <li><a id='eurasia' href='#'><span>Eurasia</span></a></li> <li><a id='africa' href='#'><span>Africa</span></a></li> </ul>
2. Creating our base map and overlays (In Photoshop)
We create the map that we want to use (in this case a global one). Then slice out our regions and color them slightly so we have a base layer and regional overlays to work with. ( I’ll leave the implementation to you, but for demonstration here is the base layer.)
3. Setting up the CSS
Next we need to set our unordered list to display our map by changing it into a block element, and then setting the background while, matching the width and height of our base map image. We then strip out any padding or margin from our unordered list and list items. Then set the spans contained the the a tag to not display until hovered
/* ---- Setting up the base for our map ---- */
/* Stripping out any margin or padding */
ul, li {
margin: 0;
padding: 0;
}
/* Removing the bullet points */
ul li {
list-style: none;
}
/*
Setting the dimensions to match the image.
Change to a block element, and set the position as relative
for a base for our absolution positioning math
*/
ul {
display: block;
width: 554px;
height: 239px;
background: url(images/world-map.jpg) no-repeat;
position: relative;
}
/* Removing the underlined links and changing to a block element */
ul li a {
display: block;
position: absolute;
border: none;
color: #000;
text-decoration: none;
}
/* Setting up our text content to only show on hover */
ul li a span {
display: none;
}
ul li a:hover span {
display: block;
position: absolute;
width: 160px;
}
4. Now for the bulk of the CSS
We then add in the absolute positioning for the individual regions on our map. It is sometimes easier to set the background on the anchor element your working on and set opacity to something like 0.5 so you can visually see how to line up your region to the underlying map. After which remove the opacity and switch the background to the :hover rule.
/* Positioning and dimensions, based off of image size of overlay and position in relative to base map */
a#north-america {
top: 13px;
left: 20px;
width: 221px;
height: 117px;
cursor: pointer;
}
/* Sets up our region for display on hover */
a#north-america:hover {
background: url(images/north-america.jpg) no-repeat;
}
/* Sets up our text for display on hover positioning based off of parent element */
a#north-america:hover span{
top: -43px;
left: 160px;
}
/* Now we just run through the same pattern with each of our regions */
a#south-america {
top: 121px;
left: 146px;
width: 71px;
height: 98px;
cursor: pointer;
}
a#south-america:hover { background: url(images/south-america.jpg) no-repeat; }
a#south-america:hover span {
top: -151px;
left: 34px;
}
a#africa {
top: 87px;
right: 218px;
width: 107px;
height: 109px;
cursor: pointer;
}
a#africa:hover {
background: url(images/africa.jpg) no-repeat;
}
a#africa:hover span {
top: -117px;
left: -48px;
}
a#eurasia {
top: 30px;
right: 47px;
width: 266px;
height: 178px;
cursor: pointer;
}
a#eurasia:hover {
background: url(images/eurasia.jpg) no-repeat;
}
a#eurasia:hover span {
top: -60px;
left: -62px;
}
Unfortunately the inner span references the position of the a element it lives in, and not the relative positioning of the unordered list, so a little bit of math is involved in positioning the span elements.
Put it all together and we have ourselves nice regional map!
Pros: Cool way to dress up a simple unordered list that references regions, etc.
Cons: Does not work with “images off/CSS on” and you have to use Javascript to enable the hover effect on IE6. Also not the most accurate way of defining regions (since we are dealing with square blocks here)
This entry was written by , posted on April 8, 2009 at 11:52 am, filed under Blog, CSS, Design, Development. Leave a comment or view the discussion at the permalink.
Stylesheet refresh.
After spending sometime looking through this unfinished site, I have decided to do a total typographic refresh. The baseline is broken and needs to be fixed. Soon I will re-do all the math my neglected settings and try to finish up what I started.
It’s been very difficult lately with a full time job and a demanding personal life, I feel like the mechanic that keeps his clients in tip-top shape… but drives an old beater.
This entry was written by , posted on September 10, 2008 at 3:49 pm, filed under Blog, CSS, Development, Thoughts. Leave a comment or view the discussion at the permalink.
CSS Reset Updated
Eric Meyer has updated his reset style sheet, tweaking a few things and removing others.
‘it really is the beginning of a baseline style sheet. (Or can be.) Things like boldfacing and italics are some of the most obvious textual effects readers will see, and to have reset styles that treat them inconsistently across browsers doesn’t make sense.’
(Via Style Grind.)
This entry was written by , posted on July 11, 2008 at 9:11 am, filed under Blog, CSS. Leave a comment or view the discussion at the permalink.