Linkben kép és link-felirat

Ha a kép nevét is megjelenítjük, és a felhasználó akár a képre, akár a link-feliratra kattintva eljusson a linkhez tartozó oldalra, akkor az egyik lehetőség az általános tárolóelemek (div-ek) használata.

Az első példában egy div-ben helyezzük el a linket, amely képet és link-feliratot is tartalmaz. Ekkor a div szegélye és háttere sem formázható a link állapotától függően.

Második példánkban megfordul a sorrend. A linkbe ágyazunk egy div-et, amely már könnyen dekorálható a link állapotától függően.

1. Példa:

Forráskód


...
<link href='https://fonts.googleapis.com/css?family=Chela+One&subset=latin,latin-ext'
  rel='stylesheet' type='text/css'>
<style>
  .kepes_menu a {color:#001F1F; text-align: center; 
       font: 16px 'Chela One', cursive;
       text-decoration:none;  letter-spacing:1.5px;} 
  .kepes_menu { display:block; float:left;
           margin: 5px; padding: 5px; 
           text-align: center; background: #ffffff;
       -moz-border-radius: 8px;
   -webkit-border-radius: 8px;
            -o-border-radius: 8px;
          -ms-border-radius: 8px;
                 border-radius: 8px;              
            box-shadow: 5px 5px 5px #613207;}
  .kepes_menu a:visited {color:#001F1F;}
  .kepes_menu a:hover  {color:#004F4F;} 
  .kepes_menu a:active {color:red;} 
</style>     
...
<body>            
  <div class="kepes_menu"> 
     <a href="https://www.matracfutar.hu..."> 
       <img src="Gigi_babaszoba_nk.jpg" alt="Gigi & Lele babaszoba" 
                        height="127" width="180"> 
       <br> Gigi & Lele babaszoba
    </a> 
  </div>
  <div class="kepes_menu"> 
    <a href="https://www.matracfutar.hu..."> 
      <img src="samba_babaszoba_nk.jpg" alt="Samba kombi babaszoba" 
            height="127" width="180"> 
      <br> Samba kombi babaszoba
    </a> 
  </div>
</body>

Eredmény*

2. Példa:

Forráskód


<style>
  body{background-color:#99FF99;  }
  a .kepes_menu {color:#001F1F; 
       text-align: center; text-decoration:none; 
       font: 16px 'Chela One', cursive; letter-spacing:1.5px;}     
  a .kepes_menu { display:block; float:left;
       margin: 5px; padding: 5px; text-align: center; background: #ffffff;
      -moz-border-radius: 8px;
   -webkit-border-radius: 8px;
        -o-border-radius: 8px;
       -ms-border-radius: 8px;
           border-radius: 8px;              
              box-shadow: 5px 5px 5px #613207;  }
  a:visited .kepes_menu {color:#001F1F;}
  a:hover   .kepes_menu {color:#004F4F; background-color:#ffffdd;} 
  a:active  .kepes_menu {color:red; box-shadow: 1px 1px 1px #613207;  } 
</style>     
...
<body>            
     <a href="https://www.matracfutar...."> 
        <div class="kepes_menu">
              <img src="Gigi_babaszoba_nk.jpg" 
                alt="Gigi & Lele babaszoba" 
                height="127" width="180"> 
          <br> Gigi & Lele babaszoba
    </div></a> 
    <a href="https://www.matracfutar.hu...."> 
       <div class="kepes_menu"> 
              <img src="samba_babaszoba_nk.jpg" 
               alt="Samba kombi babaszoba" 
               height="127" width="180"> 
              <br> Samba kombi babaszoba
    </div></a>

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_szoveges_link_02.html