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 */
}
