Andy Sciro's Blog

The rollover is one of the most simple GUI behaviors that makes the user experience all the more enjoyable, easier, and logical. Over the years though, the correct way to implement a browser friendly & reliable rollover has been argued time and time again. This is my opinion on how to do it using purely CSS with the added bonus SEO. First off Lets understand the concept and why its better: Google and all other similar search engines are pretty amazing. The shear volume of information that they process is mind boggling, however at the root of it they are still "dumb computers."We need to "guide them," let them know whats important… so lets do just that with a little CSS trickery, and keep automated JavaScript rollovers away from our page!! (I’m looking at you Dreamweaver users!!)

Scenario 1:

You have a logo of a company, school, artist, etc… for this example though we’ll pretend that I’m an artist with some sort of portfolio site. According to the unwritten "web-ettiquite" my logo (a simple andy-sciro.jpg, or gif) is obviously in the top left and has a rollover behavior. Very standard stuff, the rollover works fine… it looks good and everyone’s happy. What’s wrong with this picture?

• Sometimes it isn’t aesethitically pleasing to have text that’s essential for SEO on your website, or maybe even your mockup is just image heavy! So where do we put it?!
• If you are using .js, you have to preload your images… just a bad idea
• GOOGLE or johnny-search-engine comes doesn’t index to its full potential…

Google Loves to eat… feed it!

Google loves to eat, but not the kind of food me and you eat… rather it loves to eat text. Google was created to index text from the beginning and to this day it still does! Don’t underestimate the power of text! FEED THE MONSTER!

Prepping your Rollover:

The idea behind this is to not preload any images with .js, and to limit how stuff is loaded into the site at once. With that said lets get cracking here:

Here I have two images:

Normally you would load/preload each and handle the switch with JS. Or with CSS you could do a background switch… Close but instead lets combine them into 1 image like so. Now the browser loads all the rollover’s resources at once and we can handle the switch fully with CSS.

NOW THEY ARE UNITED AS 1!

EXAMPLE:

THE HTML:

<a href="index.php" id="button" title="My button name">
<h1><span class="sneakyText">My Name</span></h1>
</a>

THE CSS:

.sneakyText{
    display:none;
}
#button{
background-color:#FFFFFF;
background-image:url("rollover-addRemove.jpg");
background-position:0 0;
background-repeat:no-repeat;
display:block;
height:41px;
width:121px;
}
#button:hover{
    background-position:0 -41px;
}

Simple stuff, but lets talk about whats happening:

What google sees now is obviously your link and title… but in addition it also sees your span that is full of descriptive text!! The Class.sneakyText, simply hides your additional content from users on your website, however google and company still see it! This is where the power of this method comes through!!! In this case we used a <H1> tag, however using a <H2>, <P>, etc is fine. Before you go and start using this everywhere though research about keyword spamming and proper headline (h1,h2,h3, etc) usage. In SEO every bit counts, but too much can do the opposite!!

NOTE: The "title" tag is always a subject for controversy. Does it index? Yes and no. The bottomline is it still is helpful for most users. So I’m adding it in anyway!

LETS TAKE IT A STEP FURTHER!!!

Lets use the PSEUDO class :FOCUS. Now when a user clicks on the link we get a third option to show!  For a full list of support of :FOCUS check the W3C here:

Lets Take our original "double image" and make it three!!!

Now we simply modify our CSS a slight bit by adding the following… and we are set!! As you can see all we did was "push up" the image higher because we added the third graphic for the click which made the height increase (before it -41px, now its -82px!)

#button:focus{
    background-position:0 -82px;
}