Darabolás mentes hivatkozás képeken

Írta: | 2008. május 03. | kategóriák: (X)HTML, Alapok, CSS, Design

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 */
}
0


Értékeld a bejegyzést!

Loading ... Loading ...

A bejegyzésre érkező kommenteket elérheted RSS 2.0 formájában vagy emailben is:

A bejegyzéshez tartozó trackback cím, illetve a permalink.

A megjegyzéseket kérlek, tedd fel érthető és illendő módon, ne fikázz le másokat, mert nem tudnak valamit, amit te már igen. A kommentár lehetőleg függjön a bejegyzéshez :)

kötelező
kötelező, titok marad
ha nincs, maradjon üres



Engem inkább az érdekelne hogy milyen plugin kell az ilyen kódok bemutatására!

Csoki 2008. június 25. - 15:59

Nem tudom, ha jól értelek. Azt akarod kérdezni, hogy mi formázza a forráskódokat? A színezés? 🙂 Ha igen, akkor a válaszom: WP-Syntax.

Avatar Tupacko
2008. június 25.
16:09