Css Snippets » replace

Image replacement Gilder/Levin Method

Mark — Wed, 18 Feb 2009 04:44:40 +0000

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

HTML

Home

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

Google Bookmarks Digg BlinkList Technorati Twitter del.icio.us Facebook StumbleUpon

Image replacement The Phark method

Mark — Thu, 18 Dec 2008 16:28:59 +0000

Op deze methode kwam Mike Rundle door een ongeloofelijke abnormale groote text-indent waarde mee te geven zodat het zelfs op de grootste monitoren ter wereld onmogelijk is om de tekst weer tegeven.

HTML

Tekst vervangen door een afbeelding met Css

CSS

h2 {
height: 26px;
text-indent: -5000px;
background: url(afbeelding.gif) no-repeat;
}

Google Bookmarks Digg BlinkList Technorati Twitter del.icio.us Facebook StumbleUpon

Image replacement LIR

Mark — Thu, 04 Dec 2008 17:46:48 +0000

Methode samen ontwikkeld door Seamus Leahy & Stuart Langridge, die zich vooral richt op het placeren van de afbeelding, dus er is geen extra tag meer nodig zoals bij FIR

Geen extra nodig

HTML

Tekst vervangen door een afbeelding met CSS

CSS

h2 {
padding: 90px 0 0 0;
overflow: hidden;
background: url(afbeelding.gif) no-repeat;
height: 0px !important; /*hack voor de meeste browsers*/
height /**/:90px; /*Hack voor IE5*/
}

Google Bookmarks Digg BlinkList Technorati Twitter del.icio.us Facebook StumbleUpon

Image replacement FIR

Mark — Tue, 02 Dec 2008 10:42:18 +0000

Genoemd naar Todd Fahner die deze techniek uitgevonden heeft om tekst te vervangen met een afbeelding door gebruik te maken van de background (of background-image) mogelijkheid in CSS.

De CSS voor deze methode heeft de extra tag nodig:

HTML

Tekst vervangen door
een afbeelding met Css

CSS

h2 {
width: 287px;
height: 29px;
background: url(afbeelding.gif) no-repeat;
}
h2 span {
display: none;
}

Google Bookmarks Digg BlinkList Technorati Twitter del.icio.us Facebook StumbleUpon