JavaWoman considers…

Really?

An image link generally is simply an image (img) tag, with a link (a) tag wrapped around it. As long as you take care to give the image a meaningful alt text, people who cannot see the image will get the equivalent of a textual link: just consider what link text you would have used if it were a text link, and use that text as the alt text for the image: that will make your image link accessible.

In My Opera, you can certainly use image links like that in your blog posts, since you can use (almost) whatever XHTML code you like. So what am I on about? Well, in most blogs around the web you can use bits of (X)HTML for sidebar blocks, too, so for various lists of links you often see nice “link buttons” or even collections of so-called “micro buttons” there. But when you go and define some links here on My Opera, to put on your Links page, or in the sidebar, you see a form like this:

I was a bit confused by that form at first, since there is no explanation for how to use it to build links. Now “URL” is clear enough, that will be the URL we want to link to; but “Name”? I guessed that would be the content of the link element, and for my first link I wanted to create I wanted to make it an image link; since we can use XHTML in our blog posts, I simply typed in an image tag there, and then added a bit of a description.

Well, that image link turned out to have the XHTML code for the image as the link text. So, we can’t simply make image links for our Links page or side bar. I also saw that (on the links page) the actual URL was added as text as well - only any longish URL gets truncated, which makes printing that text pretty useless; that was quickly solved by simply hiding the URL with my stylesheet. With some further tweaking for link color, my first links then looked like the sample screen shot you see here.

Yes, really!

I’ve already hinted at it: while we can’t use XHTML everywhere, we can use CSS - either to override our chosen theme’s styling, or even to completely style it ourselves. I chose a simple theme (the red “Opera” theme, ID “103”), and started tweaking. The good news is: using CSS, we can turn an ordinary text link into a nice (and still pretty accessible) image link. The trick is basically a simple form of “image replacement”: we select the link, shift the text way off the browser window, and then use the image we want as the link’s background image. I wanted a “add to Technorati favorites” link, and Technorati provides a number of nice link images for that, so let’s use that as our example:

Our first task is to select the particular link we want. To do this, we use so-called attribute selector that selects an element based on (the value of) one of its attributes. The most handy format (actually CSS3, not a standard yet) is to use a “substring matching attribute selector” to pick out a link with a URL that contains a particular value:

a[href*="technorati.com"] {}

The “*=” bit in there means “contains”, and “technorati.com” is in this case sufficient to locate a link to Technorati. But we don’t want any link in any blog post to become an image link, so we add a bit of context to that by specifying only links that occur on the Links page (inside a div with class “linkinfo”) or in the sidebar (inside a div with class “sidelinx”); the latter also applies to any links marked as “Favorites”, appearing on the About page.

div.linkinfo a[href*="technorati.com"],
div.sidelinx a[href*="technorati.com"]
{}

we then set the properties: a left padding of 2500 pixels keeps the link in place but shifts the link text way to the right; then we give it the Technorati favorite image as background image, and make sure it’s not repeated. The basics for our image link is done.

Now to refine it a bit: our background image may actually be higher than the link text, and if we don’t tweak that, it will be cut off. This particular image is 25 pixels high, and to match that we apply a matching line height as well as a height to the link. Since an a element is really an inline element, we can’t directly give it a height, so to make that stick we also need to override its normal display and state it should be treated as a block, which can have a height specified. That’s it!

Well, almost. It turns out our image includes a bit of a white border, which makes it look indented with respect to the description below it. That is fixed by shifting it 4 pixels to the left: using background-position we can specify the horizontal (x) and vertical (y) position of the background image, starting from the top left of the element:

background-position: -4px 0px;

Negative values are allowed here, so the -4px shifts the image 4 pixels to the left. The complete code for this “image link” is now:

div.linkinfo a[href*="technorati.com"],
div.sidelinx a[href*="technorati.com"]
{
  display: block;
  padding-left: 2500px;
  height: 25px;
  line-height: 25px;
  background-image: url(http://static.technorati.com/pix/fave/tech-fav-1.png);
  background-repeat: no-repeat;
  background-position: -4px 0px;
}

That’s the basic model for using a background image for creating an image link out of an ordinary text link. I did the same for a link to Icon Buffet, only this time with an image I uploaded to the My Opera server. The whole block of CSS now looks like this:

Good news and bad news

The result: The last screen shot shows how these image links currently look in the side bar (have a look!). Isn’t that cool? Note the icons next to the section headings? Those are background images, too (I’ll be tweaking those a bit more). The good news is that this will work in all modern graphical browsers. Yes, even in Internet Explorer 7. It actually works in Gecko-based browsers (Firefox and its sisters), Safari, Konqueror, Opera9 and IE7.

Unfortunately, there’s bad news, too: Internet Explorer 6 does not support attribute selectors. At all. Not even good old CSS2 attribute selectors. And according to hitslink.com, in February 2008 IE6 still had a market share of 30%; if you browse back in time a bit though, you can see that this market share is gradually decreasing. And actually, the news is not really terrible: in IE6 our “image links” will simply continue to look like ordinary text links, because the links to apply it to are never selected: nothing broken, just not as pretty.

References

Finally, for the technically-minded,a few references:

• Comparison of layout engines (CSS) on Wikipedia
• attribute substrings in Selectors from the W3C working draft for CSS3
• IE 7 Supports More CSS Selectors, Whip-e-dee-doo-da by Cody Lindley

In a following My Opera tweaks article (yes, there will be more) I’ll be exploring background images for a completely different purpose! Stay tuned.

Tagged: My Opera, tweaks, CSS