Linkekhez alapértelmezett ikonok társítása


Ha azt szeretnéd, hogy a lapodon az egyes linkekhez 1-1 megfelelő ikon társuljon (pl. PDF-re mutató linkhez egy kis PDF ikon kerüljön), használd az alábbi kódot

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
 
<style type="text/css">
p {font: normal 1em/1.2em tahoma;}
 
/* all A tags whose HREF attribute ends in .pdf */
a[href$='.pdf'] { 
	padding-left: 18px;
	background: transparent url(pdf.gif) no-repeat center left;
}
 
/* all A tags whose REL attribute = pdf */
a[rel='pdf'] { 
	padding-left: 18px;
	background: transparent url(pdf.gif) no-repeat center left;
}
 
/*  all A tags whose REL attributes has the string pdf inside */
a[rel*='pdf'] { 
	padding-left: 18px;
	background: transparent url(pdf.gif) no-repeat center left;
}
 
 
/* all A tags whose HREF attribute starts with mailto: */
a[href ^="mailto:"] {
	padding-left: 18px;
    background: transparent url(mailto.gif) no-repeat center left;
 
}
 
/* all A tags whose CLASS attribute is popup */
a[class ="popup"] {
	padding-left: 18px;
    background: transparent url(popup.gif) no-repeat center left;
}
 
 
a[href$='.doc'] { 
	padding-left: 18px;
	background: transparent url(doc.gif) no-repeat center left;
}
a[href$='.xls'] { 
	padding-left: 18px;
	background: transparent url(xls.gif) no-repeat center left;
}
a[rel ~='external'] {
	padding-left: 18px;
	background: transparent url(external.gif) no-repeat center left;
}
</style>
</head>
<body>
<p><a href="mailto:x@x.com">email</a></p>
<p><a class="popup" href="#">pop up</a></p>
<p><a href="test.doc">word</a> </p>
<p><a href="test.xls">excel</a></p>
<p><a rel="external" href="http://www.test.com">website</a></p>
<p><a href="test.pdf">pdf</a></p>
<p><a rel="pdf" href="test">pdf2</a></p>
<p><a rel="xxpdfxx" href="test">pdf3</a></p>
 
</body>
</html>
Kapcsolódó bejegyzések:
  • Nem számít egy nagyon új dolognak a CSS segítségével megvalósított gomb, viszont a dinamikus szélességgel bíró gomb igenis új távlatokat nyit a weblapkészítésben …

  • Menüt listával? Sokaknak ez már régóta természetes, mások meg vakarják a fejüket, hogy most mi van? Pedig ha belegondolunk miről is van szó? egy menülistáról, a …

  • CSS alapú legördülő horizontális menü készítését sajátíthatod el a leírás segítségével.Stílus:body { padding: 0px; margin: 0px; behavior: ur …

  • Color: az adott elem színét adhatjuk meg vele. Pl.H1 { color: blue } H2 { color: #0000ff } H3 { color: #0c0 }Background Color: az adott elem háttérsz …

  • Ha olyasmi formázást szeretnél, melyek általában könyvekben lehet látni (tartalomjegyzék), akkor az alábbi kódot használd:tartalomjegyzék mintaol …

A cikket beküldte: Harder (http://blog.harder.hu)

Szólj hozzá
a Linkekhez alapértelmezett ikonok társítása c. bejegyzéshez

- Engedélyezett HTML elemek: <a> <em> <strong> <ul> <ol> <li>
- Forráskód beküldéséhez tedd a kódot ezek közé: <pre lang="php" line="1">Kódrészlet helye itt</pre>