Smitka development

OnMouseOver efekt bez OnMouseOver, ale s CSS

Tento článek napsal maara
Kdysi mě hodně zajímalo, jak by se dalo udělat měnící se menu rychle a elegantně. Našel jsem přehršle
návodů, jak to udělat pomocí JavaScriptu, ale co když bude mít uživatel tuto věc vypnutou? Co pak?
Jak bude vypadat stránka?

Po těchnto několika otázkách jsem JS zavrhnul a jal jsem se vymýlet lepší řešení pomoci CSS. U CSS totiž
také existuje "hover" a dá se krásné použít i pro položku v menu.

Jak tedy na to?

Tohle bude v neco.html (nebo jak budete chtít vy :)

<div id="menu">  <div><h3>MENU</h3></div>   <div>    <a href="neco.html" title="Popisek odkazu">Odkaz v menu</a>  </div> </div>
Zde vidíme DIV s id=menu, které nám ucelí naše menu.
Dále pak kýčovitý nadpis MENU, kdyby někdo nevěděl, kam to vlastně kouká :D
.
A nakonec DIV s vlastním odkazem. Jedna se o klasický blok, kde je odkaz s popiskem.

A tohle bude v CSS ať už lokálně nebo v externím souboru (lepší varianta)

#menu A        {                DISPLAY: block;                background-image: url(uvodni_obrazek.jpg)                } #menu a:hover  {                DISPLAY: block;                background-image: url(obrazek_po_prejeti_mysi.jpg)                } Tak a teď popis CSS zdroje. Menu je identifikátor, kde "A" značí, že všechny odkazy v tomto bloku se budou chovat podle daných pravidel. Důležitý je parametr "background-image: url(*). V druhém bloku vidíme parametr "a:hover", což nám vlastně říká, co se stane po přejetí (hover) myší po odkazu. Celá tato varianta se dá použít na obrázek, který bude na pozadí odkazu. Ten umístíme do závorek. Nebo to můžeme použít jen pro změnu barvy písma a tak dále. Záleží na Vaší fantazii. Určitě to můžete použít, jak budete chtít a ne jen na odkazy :-)
komentáře komentáře (1)


Kolik je 4+3?

Prdelka - 19.02.2009 08:55
Sikovnej Marecek :-*

linkuj.czjagg.czpošli na vybrali.sme.skdeliciousTopČlánky.cz
Nahoru HOME PC•Elektro Programování Blog Autor Lynt Speciální backlink: Šulislav
© 2006 Smitka development