18 Feb, 2009

Image replacement Gilder/Levin Method

Categoriën: crossbrowser |Images |solution |tekst |Typography

Deze methode werkt door een lege <span> over het parent element te plaatsen en daarin de afbeelding als achtergrondafbeelding te zetten.
Nadeel is natuurlijk de lege <span>.

HTML

<h1><a href="./" title="Return Home"><span></span>Home</a></h1>

CSS

h1 a{
	display:block; /* Required */
	width:250px; /* Width of image in question */
	height:70px; /* Height of image in question */
	position:relative; /* Required */
}
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 */
}

Gerelateerde Snippets

1 Reactie op "Image replacement Gilder/Levin Method"

Gea

August 2nd, 2011 at 13:34

1

Waarom die lege span? Je kunt toch gewoon

h1 a{
display:block; /* Required */
width:250px; /* Width of image in question */
height:70px; /* Height of image in question */
position:relative; /* Required */
background:url(images/logo.gif) top left no-repeat; /* Image */
}

Dan hoef je namelijk die lelijke span (die in deze situatie niets toevoegt) niet toe te voegen.

Reactie formulier


Demo: Image replacement Gilder/Levin Method:

Advertenties

Volgende nieuwe Snippet:

  • Momenteel niks gepland.