Turn A Background Image Into A Link Part 2: Creating Different Link States

In the previous post, I showed how a background image was converted into a clickable link. But the link looked like this at all times, for all click states:

In this post, I’ll demonstrate how to load in different background images for different click states (such as mouse-overs and clicks).

First off, the background image was removed from the h1#site-title selector:

#site-title {
	float: left;	
	line-height: 36px;

       /* BACKGROUND IMAGE CSS CODE REMOVED FROM HERE... */

	height: 100px;
       width: 650px;
	white-space: nowrap;
	overflow: hidden;
}

The h1#site-title a selector’s CSS code was left alone:

#site-title a{
	display: block;
       /* MATCH THE SIZE OF THE MOUSE-OVER ZONE TO THAT OF THE BACKGROUND IMAGE */
	height: 72px;
	width: 593px;
	text-indent: 9999px;
}

But now, rules for different background images for the anchor tag’s pseudo-classes were given.

First, the default background image should be a black, distressed font version of the blog title†:

#site-title a:link, #site-title a:visited{
	background-image: url('https://www.chou-seh-fu.com/wordpress/tiles/chouSehFuBlogTitle-Large2.png');
	background-repeat: no-repeat;
}

When the link is not hovered over (or if it has been previously clicked), the following clickable background image will display the blog title:

Next, use a different background image for the hover state:

#site-title a:hover{
	background-image: url('https://www.chou-seh-fu.com/wordpress/tiles/chouSehFuBlogTitle-Large2-Blue.png');
	background-repeat: no-repeat;
}

During mouseover events, the black, distressed font image will now be replaced by this blue, distressed font image:

And finally, a different background image should be shown at the very instant the link is clicked:

#site-title a:active{
	background-image: url('https://www.chou-seh-fu.com/wordpress/tiles/chouSehFuBlogTitle-Large2-NotDistressed.png');
	background-repeat: no-repeat;
}

This styling code displays a solid black, un-distressed font version of the title when the link is clicked:

The Fly In The Ointment

The problem with the code as it stands is that the images for the hover state and the active state aren’t loaded into the cache when the page is loaded.

This means that the first time these two states are called upon the transition is not instantaneous: the background image from the previous state disappears, and no blog title is displayed while the current state’s background image loads.

I get around this by loading the hover and active states’ background images somewhere onto the page where they can’t be seen. Here, they are loaded behind the weathered rock background on the body tag:

body {
	background-image: url('https://www.chou-seh-fu.com/wordpress/tiles/stoneBkg.gif'), url('https://www.chou-seh-fu.com/wordpress/tiles/chouSehFuBlogTitle-Large2-Blue.png'), url('https://www.chou-seh-fu.com/wordpress/tiles/chouSehFuBlogTitle-Large2-NotDistressed.png');
	background-repeat: repeat, no-repeat, no-repeat;
}

The disadvantage of this approach is that it takes a fraction of a second longer for the page to load. But it’s a small price to pay for seamless background image transitions between the link, hover and active states.

† The code in this post is word-wrapped. If copying & pasting, do NOT add returns to this code!