jancology.com

After I wrote the the new mozilla applications log, I was unhappy with the look and feel of the two image links. Although the cursor changed to a hand, it was not very obvious that the object was clickable. So I looked into the various options which are available for for my layout to get this better.

Use image border

Sites of the first generation used the image border to identify an object to be clickable. This resulted — by default — in a big blue border. This does not look nice but is also not suitable for non rectangular images.

 <a href="#"><img
    src="/blog/archives/getfirefox.gif"
    width="88" height="31"
    border="2" />
 </a>

Example:

Use of javascript

Both images required for on mouse over transition.

The second generation of applications makes use javascript to swap the image on the mouse over event. This resulted most of the time in color changes, sunken borders and image intensity transitions. I used a color intensity for my example. For all these javascript controlled image transitions you need at least 2 different images.

<script language="javascript">
  var pic1on,pic1off;
  if ( document.images ) {
     pic1on = new Image( 88, 31 );
     pic1on.src= "/blog/archives/getfirefox.gif";  
     pic1off = new Image( 88, 31 );
     pic1off.src= "/blog/archives/getfirefox-80.gif";  
   }
    function on() {
      if ( document.images ) {
        imgOn = eval( "pic1on.src" );
        document.images[ "pic1" ].src = imgOn;
      }
    }
    function off() {
      if ( document.images ) {
        imgOn = eval( "pic1off.src" );
        document.images[ "pic1" ].src = imgOn;
      }
    }
</script>

 <a href="#js">
  <img name="pic1" 
   src="/blog/archives/getfirefox-80.gif"
   width="88" height="31" border="0"
   onmouseover="on();"
   onmouseout="off();" />
 </a>

Example:

Use of css and FIR

Look ma! No JavaScript!

Fahrner Image Replacement is a technique to use a background image for an element and hiding the element text. The element is addressed using an id and the css id style is used to place the element. FIR is not recommended any more. See the article “Facts and Opinion About Fahrner Image Replacement” on A List Apart.

Another option is the use of “The Sliding Doors Technique”. With this technique you can embed both image states within a single image. This means that you do not need to download 2 images.

Note: In FireFox 0.9 was FIR not working for the anchor tag. Instead of the image, also the link text was still shown instead of hidden in the overflow.

Example: text link

<style type="text/css">
#fir-link span { 
display:block;
  padding: 31px 0 0 0;
  width: 88px;
  overflow: hidden;
  background-image: url( /blog/archives/getfirefox-80.gif) ;
  background-repeat: no-repeat;
  height: 0px !important;
  height /**/: 31px;
}
#fir-link:hover span { 
  padding: 31px 0 0 0;
  width: 88px;
  overflow: hidden;
  background-image: url( /blog/archives/getfirefox.gif) ;
  background-repeat: no-repeat;
  height: 0px !important;
  height /**/: 31px;
}
</style>

Use of css and opacity

The disadvantage of the two previous techniques is that you need to create 2 different images! So if you make a change, you need to do it on both image states. As I had just updated my site so the welcome text in the top banner to be visible independent on the background image. I thought of it being a nice way to use for image links.

Example:

This can be completely controlled by css without any scripting and a single image. There are 2 styles required, one is the normal state — which I set to dimmed using opacity 80%. The other style is the hover state where opacity is 100%. I theory you can define all images to have this feature by the style definition a img { ... } .

The style definition looks a bit more complicated then required as it takes a number of browsers into account. For browsers supporting the CSS3 color module, the opacity: 0 - 1.0; setting is enough. This is currently supported by FireFox 0.9 and Safari 1.2. For Internet Explorer we need the filter:alpha(opacity=0-100);. For other mozilla based browsers you need to use the proprietary -moz-opacity: 0 - 1.0 ;.

<style type="text/css">
a.opacity-link img { 
   filter:alpha(opacity=80);
   -moz-opacity: 0.8;
   opacity: 0.8;
}
a.opacity-link:hover img { 
   filter:alpha(opacity=100);
   -moz-opacity: 1.0;
   opacity: 1.0;
}
</style>

I’m quite happy with this result. Only one drawback is image flickering in FireFox.