Monday, October 22, 2007

SEO Friendly Rollovers

I love web standards. Its true- a new passion is burning in my loins, and it is all coded in CSS.
Allright, enough.
Since our target audience still needs the literal instruction to 'click here' appended to everything nav, I have been struggling to find beautiful ways to prompt click-throughs. Sure, the old familiar javascript rollover buttons will do the trick, but the SEO company we are working with would be ashamed...instead I needed something that had a text link backed by a stunning effect.
I had a hunch that the answer lie in background images, and today I finally stumbled upon a tutorial that gave me the nudge I needed.
You can see it here.

I took the cue, making the entire DIV a link, and added one thing - a hover property:
#logolink
{
display: block;
height: 100px;
width: 200px;
background-image: url(logo.jpg);
}
a#logolink:hover
{background-image: url(logo_up.jpg};
}

I also set a few other properties, so the final CSS looks like this:
#logolink
{
display: block;
height: 150px;
width: 200px;
background-image: url(images/image1.png);
font-family: Arial, Helvetica, sans-serif;
font-size: 60px;
font-weight: bolder;
text-decoration: none;
color: #FFFFFF;
text-indent: 5px;
text-align: center;
}
a#logolink:hover
{background-image: url(images/image2.png);
color:#000000;
}

You can see an example here.

Disclaimer: I have only tested on Firefox & IE 7 at this time.
Enjoy!

No comments: