Ez egy rövid példa arra, hogy miként lehet egy háttérképre, például a fejléc hátterére, linket tenni, pl. a logóra. Természetesen ebből az következik, hogy nem szükséges a kép felvágása, csupán XHTML és CSS segítségével kivitelezhető. A megoldás egyaránt valid és cross-browser.
1. lépés
Helyezzünk egy linket a kérdéses helyre. Én a fejlécben szeretnék egy kattintható felületet a logónak, ami visszamutat a főoldalra.
1
2
3
| <div id="header">
<a href="index.html" title="" id="logoLink"> </a>
</div> |
2. lépés
Helyezzük és méretezzük a kattintható felületet az igényünk szerint. (A beállítások ideje alatt érdemes egy jól látható keretet is meghatározni a linknek, hogy pontosan lássuk a kattintható felületet).
1
2
3
4
5
6
7
8
9
10
11
| #logoLink{
position: relative; /* a pozicionális típusa. Egy link esetében megfelel a relatív elhelyezés is, viszont nagyszámú link esetében érdemes abszolut módon meghatározni a kattintható felület határait, pl.: egy fénykép részeire kattintható felületeket létrehozni */
left: 20px;
top: 20px;
width: 200px;
height: 100px;
display: block; /* tömb elemre van szükség a méretek szabad meghatározásához */
text-decoration: none; /* nem kérünk a link aláhúzásából */
border: 0; /* nem akarunk keretet akkor sem, hogyha más linkeknek van keretje, pl.: szaggatott aláhúzás */
/*border: 1px solid red; */ /* a beállítások ideje alatt */
} |
Ezek az ikonok ún. közösségi könyvjelző oldalakra mutatnak, ahol meg lehet osztani másokkal is amit fontosnak találsz.
(7 szavazat)
Loading ...
Ha igen, akkor a válaszom: WP-Syntax.
