Zdravím,
jak už název napovídá, tak vám napíšu jak se dělá hover(změna) obrázku v odkazu.
Je to velmi jednoduché, není co moc dělat je to taková chvilková prácička.
Každý zná, teda ti co tohle dělají tak ví, že hover se skládá ze dvou obrázku někdy i více. Jeden obrázek slouží proto aby byl neaktivní("a" v CSS), čili když nemáme na něm kurzor nic se neděje, pote aktivní("a:hover"), to je obrázek který, se nám ukáže když projedeme po něm kurzorem ale také jsou také obrázky které učují, jestli byl odkaz navštíven(a:link) a jestli nebyl navštíven (a:visited)
Vytvoříme si soubor s Kaskádovými styly, třeba style.css, a také soubor kde budeme psát html kód index.html.
Nejdřív si otevřeme index.html:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>Titulek stránky</title>
<link rel="stylesheet" href="style.css" type="text/css">
</head>
<body>
<div id="zmena_obrazku">
<ul>
<li><a href="." class="zmenimeto" title="Simple image">Sipmle Image</a></li>
<li><a href="." class="zmenimetodve" title="Simple image 2">Sipmle Image 2</a></li>
</ul>
</div>
</div>
</body>
</html>
Takže si otevřeme soubor s CSS styly a napíšeme tam:
#zmena_obrazku {
float:right;
}
float - je zarovnaní celého objektu(nemusíte používat mam to v designu)
Hned pod to přidáme:
#zmena_obrazku ul {
margin: 0px;
padding: 0px;
}
margin - Tohle znamená že margin, teda mezery kolem tagu ul změníme na 0,
abychom neměli mezery mezi brázky.
padding - Taktéž nastavíme 0, jelikož pokud budete používat obrázek s textem,
tak aby se text vlezl(taktéž záleží na délce věty).
Upravíme párový tág <li></li> :
#zmena_obrazku ul li {
display: block;
float: left;
}
display - Toto má za to, že se nám ztratí ta ošklivá tečka.
float - pokud budete dělat více obrázku, které dělat budeme,
zarovnáme obrázky vedle sebe, ve směru z levé strany do pravé strany.
Upravíme párový tág <a></a> :
#zmena_obrazku ul li a {
width: 54px;
height: 35px;
display:block;
}
width - šířka obrázku
height - výška obrázku
display - Bez tohoto by tág <a></a> ignoroval nastavenou
šířku a výšku.
Bezva, se styly ještě nejme tak hotoví, v photoshopu si uděláme takovéto 2 obrázky:
http://imageshack.us/photo/my-images/707/youtubero.png
http://imageshack.us/photo/my-images/651/twitterkq.png
Dobře si obrázky prohlédněte, obrázky mají v sobě aktivní a neaktivní obrázek v jednom, to nám ušetří místo ve složce, místo 2 obrázku budeme potřebovat pouze jeden, taky bude načítání v prohlížeči rychlejší, jelikož to má menší velikost.
Takže si napíšeme kód, pro jednotlivé obrázky.
> Neaktivní:
#zmena_obrazku ul li a.zmenimeto {
background: url(youtube.png) top center;
text-indent: -10000px;
}
Background:
url - cesta k obrázku
top & center - pozice obrázku čili nahoře(top) a uprostřed(center)
text-indent - text který jste psali v HTML do tágu a, se nám stratí
zůstane čisty obrázek bez textu.
Top a Center, proč ?
Pokud jste si všimli, obrázek má nahoře černo bílý neaktivní obrázek, který
bude konstantně stejný doku na něm nebude kurzor. Hned pod ním je aktivní obrázek
který, se objeví až na něj uživatel projede kurzorem.
Poslední krok:
#zmena_obrazku ul li a.zmenimeto:hover {
background: url(youtube.png) bottom center;
}
Background
url - cesta k obrázku
bottom - onen věc která, je klíčová pro to aby byl obrázek aktivní a barevný.
center - zarovnáni obrázku na střed.
Taktéž to uděláme s jinými obrázky, jen změníme nazev třídy(class) obrázek a v HTML taktež.
Děkuji za přečtení, doufám že jste můj návod pochopili a líbil se vám.