Posted By

justinseiter on 04/26/09

Tagged

css
image

Versions (?)

Last Edited at 04/26/09 02:37pm

Statistics

Viewed 1209 times

Favorited by 4 user(s)

Related snippets

Accessible Image Replacement - Gilder/Levin Method

/ Published in: CSS

This method maintains its integrity with all combinations of images on/off and CSS on/off.

This method works by laying an empty span over the top of the parent element with the required image applied as a background to that span.

There is however a drawback to this method; the empty span. This is bearable though as the span will have no impact on the usability/accessibility on the page, and will only impact ever so slightly on semantics. Now users can always see an image or text regardless of whether they have CSS and/or images disabled.

Expand | Embed | Plain Text

Copy this code and paste it in your HTML

#header h1 a{
	display:block; /* Required */
	width:250px; /* Width of image in question */
	height:70px; /* Height of image in question */
	position:relative; /* Required */
}
#header h1 a span{
	position:absolute; /* Required */
	width:100%; /* Stretch full width of parent */
	height:100%; /* Stretch full height of parent */
	background:url(images/logo.gif) top left no-repeat; /* Image */
	cursor:pointer; /* Required for links to appear like links in IE */
}
 
<!-- THE HTML -->
<h1><a href="./" title="Return Home"><span></span>Home</a></h1>