Tutorial: CSS Rollovers As Anchors

Thu, Jul 31, 2008

This tutorial is for those who want to give their visitors a simple way to navigate to different places on the same page. For example, a link at the bottom that sends you to the top of the page - especially helpful on long pages, where no one wants to do the scrolling. You will need a very basic knowledge of HTML, the will to brave messing with your source code, and a couple of images (if you want an image link).

Step 1 - Doing it without the images

We’re starting off with the simple concept of anchors - links that link to links that link to nothing. Okay, maybe I need to explain that…an anchor, by itself, is something that exists for the sole purpose of marking a position on a webpage. Then, you can link to that anchor, which will essentially send anyone who clicks the link to the position defined by the anchor. Still don’t get it? Let’s go hands on.

First off, put this line of code right after your <body> tag:

This defines the very beginning of your document as the location of the “top” anchor. Next, let’s try linking to it - put the following code where you want your “Back to top” link to appear (you can change the text, of course):

The ‘#’ in there tells your browser that this link is pointing to an anchor and not to an independent URL. After you’re done, try clicking the link. Does it work? If it doesn’t, go back and try again.

Step 2 - CSSing it up + images

Before we go any further, you will need to grab a couple of images: one will be the active link, and the other image will appear when the user hovers the mouse over that link. Let’s say one of the images is named link_normal.gif and the other one is link_hover.gif - note that they must be of the same dimensions, in this case let’s assume they are both 220px by 50px.

All you have to do to your actual code at this point, is to include the following code where the link is to appear:

Comparing this code to the above without-images HTML, you may notice that there isn’t that much of a difference - all you did was replace the text with a div element. But where is the image, you ask? Well, we’re going to implement that now.

All the real magic will take place in your CSS file. I hope you know where your CSS file is - in case you don’t, you can always view your source and find it. For WordPress the CSS file is style.css in your current theme’s folder. After you find it, add the following code to the end.

.myanchorlink{
width: 220px; //use your own image’s width!
height: 50px; //use your own image’s height!
background: url(images/link_normal.gif); //your image url
cursor: pointer;
display: block;
}
.myanchorlink:hover{
background: url(images/link_hover.gif);
}

Voila! You’re done. Unless you copy-pasted my code without modifications, it should be working fine. If you did just copy-paste my code, it might not work because this is a tutorial that simply gives you an example to modify and implement with your own images.

If you have any problems, drop me a line and I’ll try to help you out.

Tutorials

This post was written by:

RG - who has written 9 posts on Deep Sarcasm.

Rohit Garg is a globe trotter who loves to write and say stuff that doesn't always make sense. That doesn't really matter though, because sense is for the weak.

Contact the author

6 Comments For This Post

3:35 pm
July 31st, 2008
Christy Said:
I’m new to your blog. Found you via my google alert for css. Gotta love those alerts. One comment, instead of adding an extra div into the a href just put the class on the href itself and set in your class the display:block; or display:inline; to size the href. Saves on code and you remain semantically correct (no nesting of the div in the anchor). Your theme is beautiful by the way and that Dead bunny is the best.
7:52 pm
July 31st, 2008
RG Said:
Hi,
Thanks for the tip and the comment! I usually do use an <a> tag with a class (like the ‘top?’ arrow below), but after struggling with the syntax highlighter, I probably wasn’t thinking straight. Thanks again for pointing it out, I’ve fixed it now.

I’m glad you like the theme, and hope to see you around again
8:19 pm
August 1st, 2008
Zhu Said:
Great explanations. I used the trick for my navbar a while ago.

{Zhu’s last literary creation - Things That Freak Me Out}
11:37 am
August 3rd, 2008
RG Said:
I know, Zhu

Your navbar is what inspired me to make those stamps that list the categories up there.
12:31 pm
August 3rd, 2008
Anwita Said:
Happy Friendship Day
3:37 pm
August 8th, 2008
Juhi Said:
Good tutorial! When I shifted from FrontPage to Dreamweaver I missed the automatic ‘bookmark’ option in the hyperlink dialog box a lot!

{Juhi’s last literary creation - NIFT results}