• 200701 Mar

    My client wanted a page showing photographs of all their staff, and the design called for them to be semi-opaque against the page background, going fully opaque on mouseover, like so:


    What would be the best way to do this?

    One would be to make an image sprite of the images two states:


    And use it as background-image on the element, swapping to the other state on :hover. One small problem with this is that IE6 only supports :hover on the a tag; another is that because the results are being pulled from a database, you’d have to write a dynamic stylesheet as well, to call the swap on all staff photos.

    Another option would be to create two separate images of the original, one for each state, and write a Javascript function to swap them over on mouseover.

    There are other solutions as well, but none of them are the best way; the best way is to place them in the page with img, then use the CSS3 opacity declaration for the switch, as so:

    img { opacity: 0.6; }
    img:hover { opacity: 1; }

    Two short lines of code, much quicker, the same effect without any of the hassle.

    As with the rest of CSS3, however, one big drawback: no native support in the IE family. It works on just about every other major browser, however.

  • 200721 Feb

    A quick run through the visitor logs of 10 websites I run or manage shows that Internet Explorer 7 usage is still growing, although it’s slowed down considerably since the boom of December 2006 when Microsoft released it into the automatic update programme.

    Average share for the month of February (to date) is 18.4%; the number varies from 9% to 26%. These figures are from a range of different sites, from personal blogs to full corporate websites, and are intended to be indicative, not definitive.

    TheCounter.com puts the figure at 24%; Browser News provides a range between 14% and 25%.

    I think 20% is probably a reasonable estimate; that’s one fifth of the market. It’s pretty big, but even with Firefox’s share of around 15% and Safari’s 5% or so (as well as the smaller market share of Opera and others) that means that less than 50% of the surfing public use a browser with even the most basic CSS3 functionality.

Page 7 of 9:


Advertise here?