Facebook picture tagging system
Create Facebook-like picture tagging system using only CSS.
Facebook might look minimalistic on the outside but it’s a beast from the inside. I don’t know how they did their “cross over a person to see his name” tagging system but i’m going to show you how to fake it. Who knows, maybe they use the same technique (yeah right).
Step 1
First let’s create index.html and folders style and images. Inside of style folder put your CSS file (name it style.css) and put your image inside off images folder. I will use this picture named foto.jpg.
Open index.html and write down the basic HTML code.
<html> <head> <title>Facebook picture tagging system | Designers-Chair.com</title> <link href="style/style.css" rel="stylesheet" type="text/css" /> </head> <body> </body> </html>
We are going to use HTML tags dl and dd so if you aren’t familiar with them i recommend you google it up.
Step 2
Add the following code to the body of your HTML file.
... <dl id="heads"> <dd id="JaneDoe"><a href="link"><span>Jane Doe</span></a></dd> <dd id="LucyLiu"><a href="link"><span>Lucy Liu</span></a></dd> <dd id="JackBauer"><a href="link"><span>Jack Bauer</span></a></dd> <dd id="JohnSmith"><a href="link"><span>John Smith</span></a></dd> </dl> ...
OK, that’s it for our index.html file. It’s all CSS from now on. Just to explain few things first. The <dl> tag defines a definition list. In our case that’s heads.
<dl id="heads"> ... </dl>
<dd> tag describes the item in the list. In our case items are people on the photo.
<dd id="JaneDoe"><a href="link"><span>Jane Doe</span></a></dd>
JaneDoe is the name of the identificator and Jane Doe is the name of the person that will be displayed. Don’t mix those two! Under href=”link” you can put the actual URL of that persons web page. If not put “#” instead.
Step 3
Now CSS. Open style.css and let’s get started. Set the font to 11px Tahoma and background color to white.
body{
font-family: Tahoma;
font-size: 11px;
background-color: #FFFFFF;
}
Remember that heads ID in our HTML file? Let’s define it.
dl#heads{
background: url(../images/foto.jpg);
height: 353px;
width: 530px;
position: relative;
}
Under width and height put the dimensions of your photo. Now we need to define basic properties for our <dd> tag. Just some position definitions and that’s it.
dd{
margin: 0;
padding: 0;
position: absolute;
}
Next we “describe” the item (person) in the list. I will show you how to do this for one person (in this case the guy on the left, let’s call him “John Smith”) and then you can apply the same procedure for the others.
I hope you have IrfanView, if you don’t i recommend you install it. This can be done without it but it takes longer. Look at the following photo.
You need to find exact location of X and for that i will use IrfanView. Open the foto using IrfanView and select the head of a person like you select multiple icons on desktop. Click on the upper right side of persons head and drag down while holding down the left mouse button. When his head is selected read the following values.
This may look confusing but it’s actually really simple. Now let’s input the location of X. IrfanView first displays “left” value and then “top” value.
dd#JohnSmith{
left: 5px;
top: 5px;
}
Now the size of the box :
dd#JohnSmith a{
position: absolute;
width: 128px;
height: 132px;
text-decoration: none; /*no underline*/
}
If you refresh your HTML file now you will see that the name “John Smith” id displayed under John’s head. We don’t need that so let’s just hide it.
dd#JohnSmith a span{
display: none;
}
That’s it, the text is gone. We need it to display when we move cursor over the invisible box (persons head) so we will use hover function for that.
dd#JohnSmith a:hover span{
display: block;
text-indent: 0;
vertical-align: top;
color: #FFFFFF;
background-color: #282828;
font-weight: bold;
position: absolute;
bottom: 100%;
margin: 0;
padding: 5px;
width: 53px;
}
Don’t worry, we are finished. Just to explain the last part.
We set the font color to white (color: #FFFFFF), bold it (font-weight: bold), put it on grey background (background-color: #282828).
IE 6 fix
IE sucks, right? So we need to add this to our CSS to make it work.
dd#JohnSmith a:hover{
background: no-repeat;
}
That’s it! Hope you have enjoyed this tutorial, leave a comment if you did!
16 Comments »
RSS feed for comments on this post. TrackBack URL
Leave a comment
more dc
In the future, you could display a link to a demo, so people can see instantly what you are trying to teach them! It would be easier to compare results! Anyhow, keep up the nice work!
I should Grow Eyes xD Dude, I didnt saw the button at the top of this page (crappy laptop with little screen). I am sorry! Nice Job and nothing further!
Hahaha! Man, “Demo” button is HUGE!
Thanks for comment
ela bamba(meaning in sri lankan=nice work)
im a beginner of css. thanks man i
got it very clearly….
hey thanks for your post, i was wondering, is it this way still possible when the picture itself is a link too? So if you click on anything else but the names, that the picture itself would direct you somewhere else..
(i was actually wondering how they add the “edit profile picture” to your profile picture when you hover the mouse over it on the profile page)
Yes, i know what you mean.
If you want to make “Change Picture” like on Facebook then the size of the invisible box must be the size of the picture. You then only have one invisible box that you can click on. Not sure about keeping other tags (invisible boxes) visible, but will give it a try.
Yup, the picture itself directs you to the profile pictures place. But when you click on the “change picture” (that will be only visible when youre hovering over the picture) the link will direct you to the option of changing the picture. I dont think this is possible with just making this invisible box the size of the picture, cause it will be all simply one link right?
Yes, you’re right.
I alwasy wondered how they did this effect good idea on this tutorial.
This isn’t actully how facebook does it, theres alot more to it then this, all this does is shows you how to plot and alt a part of a image. facebooks is much more advanced then that
Yes, of course that Facebook is much more advanced then this. This is CSS example how to fake that look, not the functionality.
[...] Facebook Picture Tagging System [...]
thanks for sharing this nice tools.. but how can i make a system to let user tag any photo.. plz let me know.
thanks
You will have to use JavaScript for that, can’t help you there, sorry.
Creating a app to tag photos is pretty simple. All one needs is some javascript, ajax and PHP.
Javascript can easily set position absolute and other css. So create a onclick event that then allows the user to click any ware in the photo. Then record where the mouse clicked and set that as you left and top position absolute. Send these variables through ajax to your php and write them to a database. Here is a rough example http://www.brightideasfilms.com/youth/dragStar/tag.html. I made the mistake of using an image map, so I need to go back and fix it to use a list or a div or something. But it is pretty simple once you are familiar with JS, PHP and can work with ajax!!
easy and well done
do you have an idea how could I use that kind of picture in my blog ?
I am working with Dotclear !
thanks