Hasznos lehet, ha a látogató egy-egy termék képére kattintva is eljuthat a terméket bemutató oldalra.
Ha egy állóképet (img) illesztünk a link elem (a) nyitó és záró címkéi közé, akkor a célt már el is értük. Fontos azonban tudni, hogy az IE böngésző előszeretettel rajzol a linkbe ágyazott képek köré szegélyt. Az első példán bármely böngészővel megnézhetjük, hogy miként fest ez a valóságban.
A második példában saját kézbe vesszük a szegélyek kezelését. Konkrétan eltüntetjük őket.
A harmadik példában a szegély beállítása segítségével végrehajtunk a képeken egy kis szépészeti beavatkozást.
A negyedik példában az árnyék jellemzőinek módosításaival jelezzük a link állapotait.
1. Példa:
Forráskód
<style>
a img {border:2px solid blue;}
a {background-color:#ffffff; }
</style>
….
<body>
<a href="https://www...."><img src="..."
alt="Gigi & Lele babaszoba"
height="128" width="180">
</a>
<a href="https://www...."><img src="..."
alt="Samba kombi babaszoba"
height="128" width="180">
</a>
</body>
Eredmény*
2. Példa:
Forráskód
A változás:
<style>
a img { border-style:none;}
..
</style>
....
Eredmény*
3. Példa:
Forráskód
A változás:
<style>
body{background-color:#99FF99;}
a {background-color:#99FF99;}
a img { border:2px solid #669966;
border-radius:5px;
box-shadow: 5px 5px 5px 0px #669966;}
</style>
….
Eredmény*
4. Példa:
Forráskód
A változás:
<style>
...
a:link img, a:visited img
{box-shadow: 5px 5px 5px 0px #669966; }
a:hover img
{box-shadow: 5px 5px 5px 0px #88bb88;}
a:active img
{box-shadow: 2px 2px 2px 0px #88bb88;}
</style>
….
Eredmény*
* Az eredmény megjelenítése az Ön által használt böngészőtől függ.
A példakód külön ablakban is megtekinthető: css_kepes_link_04.html