No Images…Well, No Site!
Posted Saturday, May 24th, 2008I learnt a valuable lesson today whilst applying for my GAWDS certificate. It was about the implementation and use of images on a site.
Now everyone has their own techniques on implementing images into a design of a web site, whether it be a background image, logo, or portfolio piece, all of which need to contribute a degree of information.
Let us first of all tackle the static image.
Everyone in the web design/development community knows that when implementing images to a site you need to have a piece of descriptive text attached to that image, aka the ‘alt’ tag, this is very useful incase the viewer browsing your site has their images turned off, or if they are visually impaired and using a screen reader.
So quite simply your image code would be something like this:
<img src="branded07_img.jpg" alt="Branded 07 Image" />
And then of course you would add your style alignement, etc etc.
Now how about Images that portray important information about your site…
This was of course my very embarrassing and amateur mistake, which im not afraid to admit as I learned a lot from it.
In a particular site which I had designed, I had been implementing images used in logos and even site navigation using background images applied by css.
Now this is a great technique for making your site visually lovely, but it wrecks your site when images are turned off as there is no alt tag to display!
Example:
My technique for showing images used to be by using css, with a block element and a background-image. If I wanted the image to react on hover then I would duplicate the image with a different look, either colour or shade etc, then change the background-position property on hover. This works really well as you get no delay when hovering as the image is already loaded up.
<style>
a, a:visited{
background: url('images/b07_test_link.jpg') no-repeat top left;
display: block;
width: 440px;
height: 50px;
}
a:hover{
background-position: bottom left;
}
</style>
The problem arises when you turn your images off, there is nothing there! And for an image which portrays important site info like site navigation or logos, this is a real bummer.
The Answer:
Well I messed around with a few solutions and came up with what I think is a pretty good fix!
Instead of using a background image, we instead, have our div or a tag displayed as a block, as before, but this time with a little thing called overflow:hidden; applied.
Now what this does is it means we can still have our rollover image with hover reaction, but instead of pulling the image in from a background image, we actually insert the image into the html as an img tag. we then position the img using css and with our wrapper set to overflow hidden, the result is pretty much the same! Although this time, the img description is there for all to see if images are switched off.
<html>
<head>
<style>
a, a:visited, a:hover{
display: block;
overflow: hidden
width: 440px;
height: 50px;
}
a img{
margin: 0;
}
a img:hover{
margin: -50px 0 0 0;
}
</style>
<head />
<body>
<img src="branded07_img.jpg" alt="Branded 07 Image" />
<body />
<html />
Slght issue with this in < IE6 but nothing to serious, the hover state does not seem to react for some reason, still working on that one!
The Conclusion:
Images are a great way to portray information, but make sure that imortant site information always has an alt backup, try to keep navigation to only background images with text to display the wording, and your logo is your brand, if someone has images switched off and you dont have your logo description on, they may aswell be on ebay!
GAWDS Here I come!
Posted Friday, Oct 16th, 09
November 6th, 2008 at 10:40 pm
After a quick look at your < IE6 image replacement technique I think I may have the answer/solution: negative margins.
Don’t take this as gospel, but it may be an issue known as hasLayout, or rather lack of. If you put zoom: 1; in your a img rule then I think that may apply hasLayout to your element and display your element with negative margins as it is supposed to.
If it doesn’t work… Sorry!