Facebook picture tagging system

Designers Chair — Mon, 09 Mar 2009 07:59:28 +0000

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.



Facebook picture tagging system | Designers-Chair.com

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.

...

Jane Doe
Lucy Liu
Jack Bauer
John Smith

...

OK, that’s it for our index.html file. It’s all CSS from now on. Just to explain few things first. The

tag defines a definition list. In our case that’s heads.

...

tag describes the item in the list. In our case items are people on the photo.

Jane Doe

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

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!

Designers Chair » facebook

Facebook picture tagging system