Facebook style Faces CSS Image Map
The popular social networking site Facebook allows tagging of people in photographs, this example does not provide the mechanism to add and drag tags to images but is a simple example of how a similar effect can be achieved using only style sheets and XHTML. This method may be useful for creating clickable faces on images on static webpages or as a basis from something more complex.
Hover over one of the characters faces to display the area that can be used to link to another page or any other content. All the links in the example don’t go anywhere (#) and should be replaced in a working example. There is a bit of CSS3 that applies rounded corners and transparency to the link border that may not work in IE or older browsers but should degrade nicely. Let’s have a look at the result then have a look at the code.
Hover over one of the Simpson’s faces to reveal the area that can be used as a hyperlink.
The HTML:
<dl id=“imap”>
<dd><a id=“homer” title=“Homer” href=”#”>Homer</a></dd>
<dd><a id=“marge” title=“Marge” href=”#”>Marge</a></dd>
<dd><a id=“maggie” title=“Maggie” href=”#”>Maggie</a></dd>
<dd><a id=“lisa” title=“Lisa” href=”#”>Lisa</a></dd>
<dd><a id=“bart” title=“Bart” href=”#”>Bart</a></dd>
<dd><a id=“santaslittlehelper” title=“Santas Little Helper” href=”#”>Santas Little Helper</a></dd>
<dd><a id=“snowball2” title=“Snowball 2” href=”#”>Snowball 2</a></dd>
</dl>
And the CSS:
#imap {
display:block;
width:365px;
height:533px;
background:url(simpsons-family.png);
position:relative;
margin:0 auto 1em auto;
}
#imap dd a {
display:block;
width:100px;
height:0;
padding-top:100px;
background:transparent;
overflow:hidden;
position:absolute;
filter: alpha(opacity=50);
opacity:0.5;
border-radius: 3px;
-moz-border-radius: 3px;
-webkit-border-radius: 3px;
}
a#homer {left:185px; top:105px; }
a#marge {left:85px; top:145px; }
a#maggie {left:150px; top:205px; }
a#lisa {left:35px; top:255px; }
a#bart {left:225px; top:265px; }
a#santaslittlehelper {left:135px; top:290px; }
a#snowball2 {left:10px; top:345px; }
#imap dd a:hover {
background: transparent;
border: solid #000 4px;
}
When using your own images you will need to set the width and height and image path in #imap then set the position of the clickable areas to correspond with the position of the faces in your image by setting the position of the left-top corner of the links.
You may use this method freely on your personal ‘non-profit’ web site. Commercial usage is also permitted without seeking approval, but I would ask that a donation is considered to support this site.
Legal Notice: “The Simpsons” TM and © Fox and its related companies. All rights reserved. Any reproduction, duplication, or distribution in any form is expressly prohibited. This web site, its operators, and any content contained on this site relating to “The Simpsons” are not authorised by Fox.
This article was posted on 26 June 2009 in Code, CSS
That's the end of this article. I hope you found it useful. If you're enjoyed this article why don't you have a look around the archives, where you can find some more tutorials, tips and general ramblings.