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

This is the effect that I came up with:

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:

<style type="text/css"><!--
div.FootworksLogoImage {
/* I had the following in here for the Footworks site to position it down and right from it's natural place
  position:relative;
  top:27px;
  left:45px; */
  background:white; // This is just for this blog entry
  padding:10px 10px 10px 10px; // This is just for this blog entry
}
.FootworksLogoRollover a {
  display:block;
  width: 260px;
  height: 46px;
  background: url("http://www.footworksorthotics.co.uk/wp-content/themes/Footworks/images/FootworksLogoLinkBG.gif") 0 0 no-repeat;
  text-decoration: none;
  border:0;
}
.FootworksLogoRollover a:hover { 
  background-position: 0 -46px; // so this is the magic that shifts the double image up to show the 'over' image
}
@media screen { // This section makes the Image in the containg Div dissapear off the screen to reveal the Background of the <a> tag when it's viewed on a computer.
  .FootworksLogoRollover img {
    position: absolute; //For some reason I *had* to put the space between the ":" and the "a" when writing this post in WordPress!
    top:-500000px;
    left:-5000000px;
  }
}
--></style>

and the HTML is:

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

This entry was posted on Wednesday, April 16th, 2008 at 9:02 pm and is filed under Web Technology. You can follow any responses to this entry through the RSS 2.0 feed. You can leave a response, or trackback from your own site.