[HTML/CSS] Hover obrázku v odkazu

Kupa · October 21, 2011

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.

Edited October 21, 2011 by Kupa

Wolf Officious · October 21, 2011

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)

To je fajn, ale co s tím? Existuje Google a japsatweb. :teehee: http://www.jakpsatweb.cz/odkazy.html#hover

EDIT: Tak to pak jo. Bylo to suchý a teď je to alespoň vlhký.

Edited October 21, 2011 by Wolf Officious

Kupa · October 21, 2011

To je fajn, ale co s tím? Existuje Google a japsatweb. http://www.jakpsatweb.cz/odkazy.html#hover

Promiň, při náhledu na příspěvek jsem dal už přidat příspěvek, už jsme to upravil.

Hookyns · October 21, 2011

Zbytečně obsáhlé a tím pádem je zde i více chyb.

Lidem, kteří s weby pracují, to stačí stručně, třeba jako jsem psal ZDE.

A těm, kteří s weby nepracují, je to k ničemu.

Ale jinak chválím snahu, že se ti to všechno chtělo psát.

Kupa · October 21, 2011

Zbytečně obsáhlé a tím pádem je zde i více chyb.

Lidem, kteří s weby pracují, to stačí stručně, třeba jako jsem psal ZDE.

A těm, kteří s weby nepracují, je to k ničemu.

Ale jinak chválím snahu, že se ti to všechno chtělo psát.

Děkuji za kritiku a taky tě musím pochválit za snahu okopírovat tvůj topic viz zde z jak psát web. Jinak mi stručně vysvětli k čemu to je k ničemu ? Jsou i začátečníci kteří, tohle neumí. Jak tě tady na fóru sleduju, tak si asi dost zakládáš na svém egu. Ale budiš tvému názoru.

Hookyns · October 21, 2011

Děkuji za kritiku a taky tě musím pochválit za snahu okopírovat tvůj topic viz zde z jak psát web. Jinak mi stručně vysvětli k čemu to je k ničemu ? Jsou i začátečníci kteří, tohle neumí. Jak tě tady na fóru sleduju, tak si asi dost zakládáš na svém egu. Ale budiš tvému názoru.

[OT]Mě ten můj topic rozhodně okopírovaný nepříjde. Bude to tím, že okopírovaný není.

Jak psát web ani nemám v oblibě, když už něco sháním, tak na zahraničním serveru.[/OT]

Tak ještě jednou vysvětlení zbytečnosti takového dlouhého textu, který mohl být shrnut do jedné věty + ukázka.

Každý, alespoň trochu inteligentní, člověk, který už s (X)HTML a CSS pracoval by to z té jedné věty pochopil.

Takhle dlouhý topic by se dle mého hodil jen pro někoho, kdo teprve dnes začal s tvorbou stránek a hned chce mít "PROFI" web.

Takový člověk vůbec nic neví o CSS ani o HTML a všechno kopíruje. V tom případě je všechna šlehačka okolo užitečná.

Nedávám ti za zlé, že si se rozeptal, možná i naopak. Jen podotýkám na zbytečnost takového množství textu kolem.

PS: Možná působím arogantně, ale to bude tím, že už nějaké ty znalosti či zkušenosti mám. Je jen pár lidí, které uznávám a k nim se tak nechovám.

Jeden z nich je dokonce 14-ti letý klučina. Je o dost mladší než já, ale jeho schopností si vážím.

Sign In

Announcements

Pravidlo pro postování v TTT

Seznam návodů a důležitých témat v této sekci

Příspěvky tam, kde nemají co dělat

Používání spoilerů

[HTML/CSS] Hover obrázku v odkazu

Recommended Posts

Kupa 2

Share this post

Link to post

Share on other sites

Wolf Officious 1382

Share this post

Link to post

Share on other sites

Kupa 2

Share this post

Link to post

Share on other sites

Hookyns 86

Share this post

Link to post

Share on other sites

Kupa 2

Share this post

Link to post

Share on other sites

Hookyns 86

Share this post

Link to post

Share on other sites

Create an account or sign in to comment

Create an account

Sign in

Browse

More