1. Åpne et html tekst editor.
Du kan bruke Adobe Dreamweaver, eller en enkel tekst editor som Wordpad, Notepad, Notepad ++ i Windows eller TextEdit i Mac OS X.
Klikk her hvis du ønsker å lære å designe en roll knappen ved hjelp av Photoshop, eller klikk her for en direkte nedlasting av Facebook tappen på sidebilde brukes i denne opplæringen
2. Under. < head > og < title > tag enter følgende:
< stil > #facebook_tab {display: block; width: 38px; height: 100px;
Vi laget et dokument stil starter med < stil > tag. Da vi definert et element som heter facebook_tab med en id #facebook_tab. Elementet bredde er nøyaktig halvparten bredden på bildet (38px) vil vi bruke som en knapp og samme høyde som på bildet (100px)
3. Fortsett med #facebook_tab egenskaper.

bakgrunn: url ( "Dreevoo_com_facebook_tab.gif") no-repeat 0 0; stilling: fast; venstre: 0px;}
Med bakgrunn eiendom, definerer vi det bildet vi skal bruke som en roll side fane, Dreevoo_com_facebook_tab.gif i dette tilfellet. Vi vil fikse posisjonen med posisjoner: fast, noe som betyr at knappen vil holde limes på samme sted uansett om du blar opp eller ned på websiden. Venstre: 0px; betyr at det vil holde seg til venstre side av en nettleser.
4. La oss legge museroll effekt, så når brukeren ruller musen over knappen, vil det endre seg til på knappen på høyre side av image (Dreevoo_com_facebook_tab.gif i dette tilfellet)
#facebook_tab: hover {background-posisjon: -38px 0;}
Vi setter background-position til -38px 0. -38 px betyr av settet av bildebredden, og det er akkurat halvparten av bildebredden som brukes i denne opplæringen, noe som betyr at den andre halvdelen av bildet vises på en mus rollover. Det andre tallet 0, betyr det at det vil være noen utlignes i høyden
5. Fortsett med følgende kode:
#facebook_tab span. {Display: none;}

med denne id du har besluttet ikke å vise teksten du vil definere i kroppen
ikke glem å lukke stilen på element med. < /style > .
6. Og nå for den faktiske html bilde kode som vil gjøre Facebook-kategorien din side synlig og klikkbare. Hvor som helst mellom < body > < /body > tags skriv inn følgende html-kode:
< a id = "facebook_tab" href = "http://www.facebook.com/Dreevoo" title = "Dreevoo.com på Facebook" > < span > Dreevoo.com på Facebook < /span > < /a >
Du gjorde bare bildet vises på en nettside. Med href = "http //......" du velger på hvilken side bør brukeren land etter å ha klikket på fanen.
7. Dette er hvordan det ser ut på en tilfeldig (tom) nettside. ..
8. ... og dette er hvordan det ser ut når du ruller over en mus.
du kan klikke her for å prøve det ut selv, eller høyreklikk på linken og velg Lagre lenke som ... for å laste ned html-fil.
<