Chou Seh-fu Blog

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!

Background

Ordinarily, WordPress’ Twenty Ten theme places the blog name at the top left-hand corner of the blog, and makes it a link to the blog home page.

The default font was used on the ancient Greek blog for several months, until I decided it would look better in one of my favorite fonts — Grecian Empire.

In order to show what was done, it might help to see the HTML† WordPress generates for this part of the blog:

<h1 id="site-title">
     <span>
          <a title="Chou Seh-fu Blog - Public" href="https://www.chou-seh-fu.com/wordpress/" rel="home">Chou Seh-fu Blog - Public</a>
     </span>
</h1>

A transparent PNG file containing the blog title in the Grecian Empire font was made with Photoshop and used as a background image for h1#site-title. This resulted in the following garbled display:

To remove the anchor text, the visibility: hidden; CSS rule was applied:

At some later point, the background image was further modified with Photoshop to distress the font:

The Problem

Visually, the header title was now where I wanted it to be, but at a cost: the anchor tag leading back to the blog home page was no longer operable (since it was no longer visible).

So how could the background image of the blog title be turned into a working link?

Solution

This issue was solved when I ran across a method for using CSS to turn background images into links by Aaron D. Campbell at Ran.ge. Instead of using CSS to hide the anchor tag, he uses text-indent to push the anchor text far to the right on the web page (while turning off word-wrapping and making sure that any overflowed text will be hidden.)

The final CSS code looked something like this:

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

       /* SHOW THE BACKGROUND IMAGE. */
	background-image: url('https://www.chou-seh-fu.com/wordpress/tiles/chouSehFuBlogTitle-Large2.png');
	background-repeat: no-repeat;

       /* HEIGHT & WIDTH OF THE H1 TAG FOR FORMATTING PURPOSES. */
	height: 100px;
       width: 650px;

       /* DON'T ALLOW INDENTED TEXT TO BE WORD-WRAPPED. */
	white-space: nowrap;

       /* HIDE ANY TEXT THAT EXTENDS BEYOND THE WIDTH OF THE SITE TITLE H1 TAG */
	overflow: hidden;
}

#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 OF +9999px WORKS FOR ALL BROWSERS EXCEPT OPERA... */
	text-indent: -9999px;
}

This all works pretty well – the site title image is now clickable. My next goal will be to switch out the background image depending on mouse actions.

---

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