Dreevoo.com | Online Learning and Knowledge Sharing
Home | Programs | Programming languages | HTML | Put a Facebook rollover side tab onto a website
Click to view your profile

Put a Facebook rollover side tab onto a website

I will show you how to put a side tab button on to a website using HTML and CSS styles.

  Author: mat | Version: | 27th March 2012 |  

Open a html text editor.

You can use Adobe Dreamweaver, or a simple text editor like Wordpad, Notepad, Notepad++ in Windows or TextEdit in Mac OS X.

Click here if you want to learn how to design a rollover button using Photoshop, or click here for a direct download of the Facebook side tab image used in this tutorial.


Under <head> and <title>  tag enter following:

    display: block;
    width: 38px;
    height: 100px;

We created a document style starting with <style> tag. Then we defined an element named facebook_tab with an id #facebook_tab. The element's width is exactly half width of the image (38px) we will use as a button and the same height as the image (100px).


Continue with the #facebook_tab properties:

background: url("Dreevoo_com_facebook_tab.gif") no-repeat 0 0;

    position: fixed;
    left: 0px;

With the background property, we define the image we will be using as a rollover side tab,
Dreevoo_com_facebook_tab.gif in this case. We will fix the position with position: fixed, meaning the button will stay sticked on the same place no matter if you scroll up or down the webpage. Left: 0px; means it will stick to the left side of a web browser.


Let's add the mouse rollover effect, so when user roll their mouse over the button, it will change into the button on the right side of the image (Dreevoo_com_facebook_tab.gif in this case).

    background-position: -38px 0;

We set the background-position property to -38px 0.
-38 px means the off set of the image width and it's exactly one half of the image width used in this tutorial, meaning the second half of the image will appear on a mouse rollover. The second number 0, means there will be no off-set in height.


Continue with the following code:

#facebook_tab span

    display: none;

With this id you decided not to show the text you will define in body.

Don't forget to close the style of your element with </style> .


And now for the actual html image code that will make your Facebook side tab visible and clickable. Anywhere between <body></body> tags enter the following html code:

<a id="facebook_tab" href="http://www.facebook.com/Dreevoo" title="Dreevoo.com on Facebook"><span>Dreevoo.com on Facebook</span></a>

You just made the image appear on a website. With href="http//......" you chose on which page should the user land after clicking the tab.


This is how it looks like on a random (empty) webpage ...


... and this is how it looks like when you roll over a mouse.

You can click here to try it out for yourself or right click the link and choose Save Link As... to download the html file.

  Please login to post a comment
online learning made for people