Pomocí tohoto řešení dosáhneme toho efektu, že se obrázek zobrazí klasicky a kvůli SEO pod něj vložíme jeho ekvivalent v textové podobě. Toto řešení zajistí, že je text viditelný i tehdy, když máme vypnuté obrázky, nelze ho ale použít u průhledných obrázků, jak ukazuje druhý obrázek v příkladu.

Zde si můžete prohlédnout výsledek.

Toto řešení publikoval Dave Shea. Bližší popis najdete v článku Revised Image Replacement.

CSS

.obrazek
{
float: left;
margin: 10px;
}
h3
{
margin: 0;
padding: 0;
}
.obrazek .logo
{
width: 240px;
height: 30px;
position: relative;
border: solid #ddd 1px;
}
.obrazek .logo span
{
background: url(60-1.gif) no-repeat;
position: absolute;
width: 100%;
height: 100%;
}
.pruhledny .logo span
{
background: url(60-2.gif) no-repeat;
}

XHTML

<html>
<body>
<div class=“obrazek“>
SEO obrázek
<h3 class=“logo“>
<span></span>Knihovna CSS
</h3>
</div>
<div class=“obrazek pruhledny“>
Průhledný SEO obrázek
<h3 class=“logo“>
<span></span>Knihovna CSS
</h3>
</div>
</body>
</html>

1 Příspěvěk v diskuzi

Odpovědět