David Jeanneret

I recently did a little website design for my friend Martin Bell of Footworks Orthotics and had to search for quite a while to find a solution to one of my requirements:

• Have the Footworks Logo visible on the page
• Have it linked to the home page
• Provide a mouse over effect to give feedback that it was a link when you pointed at it
• Have “Footworks Orthotics” available as plain text for screen readers and search engines or for people veiwing without images
• Have the logo graphic visible when the page is printed and for people veiwing without CSS or images

The effect that I came up with can be seen at Footworks Orthotics.

And it works instantly with no javascript and no preloading of images. Nice!

So I thought I’d share the code that I cobbled together from a load of other sources (which I can’t remember unfortunately)

So you need to get two versions of your logo:
The normal looking one that’s going to be seen by people browsing without CSS or printing the page:

and you need a wierd looking image that is double height and contains both the natural image and the mouse over version:

The magic is that you only ever see half of the above image. The top half in the natural state and the bottom half when you mouseover the link. So as soon as you see the logo, mouseover bit is already loaded and ready for action! It’s lovely.

The CSS is:

div.FootworksLogoImage {
  position:relative;
  top:27px;
  left:45px;
}

.FootworksLogoRollover a {
  display:block;
  width: 260px;
  height: 46px;
  background: url("images/FootworksLogoLinkBG.gif") 0 0 no-repeat;
  text-decoration: none;
  border:0;
}
.FootworksLogoRollover a:hover { 
  background-position: 0 -46px;
}
@media screen {
  .FootworksLogoRollover img {
    position:absolute;
    top:-500000px;
    left:-5000000px;
  }
}

and the HTML is:

<div class="FootworksLogoImage">
<div class="FootworksLogoRollover">
<a title="Footworks Orthotics" href="/">
<img src="http://www.footworksorthotics.co.uk/wp-content/ themes/Footworks/images/FootworksLogo.gif" border="0" alt="" />
</a></div>
</div>

So there you go. I’d welcome any comments. I’m never very good at bothering with standards compliance so if anyone wants to improve the code – let me know!

Peace to you all

Filed under: Web Technology on April 16th, 2008