WEBFEJLESZTÉS, WEBÁRUHÁZ KÉSZÍTÉS   Ingyenes elektronikus tananyag interaktív
weboldalak készítéséhez.
Custom Search
 
vissza VISSZA    
menü MENÜ    
ismét ISMÉT    
tovább TOVÁBB    

Linkbe ágyazott kép



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="http://www...."><img src="..." 
       alt="Gigi & Lele babaszoba"
       height="128" width="180">
  </a>
  <a href="http://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