TVORBA.KVALITNE.CZ

NOVINKY | TVORBA WWW | GRAFIKA | KNIHA NÁVŠTEV


Tvorba www
Zdrojové kódy
Tipy a triky

Preklápanie obrázkov v menu

Pri tvorbe internetových stránok ste sa už možno stretli z tvorením menu pomocou preklápacích (menia sa pri nájdení na nich kurzorom) obrázkov. Je veľmi zdĺhavé vypisovanie jednotlivej premeny každého obrázku. Nielenže je to nepraktické, ale to aj zvyšuje veľkosť stránky a tým spomaľuje jej prenos cez internet. Pomocou tohto scriptu vyriešite obidva problémy naraz. Je potrebné označiť si obrázky v menu tak, že neaktívny obrázok bude mať na konci svojho názvu 0 (nulu), napríklad novinky0.jpg. Názov aktívneho obrázka sa musí končiť na 1 napr. novinky1.jpg. Odkaz z obrázka vytvoríme jednoducho - uzavrieme ho do párovej značky pre odkaz obohatený o parameter cesty. Ak sa v okolí preklápacích obrázkov vytvorí nepotrebný rámček odkazu, ktorý je vo väčšine prípadov neestetický, odstránime ho pridaním definície farby odkazov do značky tela dokumentu (body).

Tu si to môžete sami vyskúšať


Podržaním kurzoru nad obrázkom spustíte animovaný obrázok, ktorý je zároveň aj odkazom.

Zdrojový kód

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
<HEAD>
<TITLE>Menu</TITLE>
<script language="JavaScript">
<!--
function mn(meno) {meno.src=meno.id + "1.gif"}
function mp(meno) {meno.src=meno.id + "0.gif"}
-->
</script>
</HEAD>
<BODY>
<a href="novinky.html"><img src="novinky0.gif" id="novinky" onmouseover=mn(novinky) onmouseout=mp(novinky) border="0"></a>
<br>
<a href="novinky.html"><img src="grafika0.gif" id="grafika" onmouseover=mn(grafika) onmouseout=mp(grafika) border="0"></a>
</BODY>
</HTML>

Naposledy pridané
24. 4. 2003 Ako zvýšiť návštevnosť internetových stránok
30. 4 2003 Vlastná tvorba
1. 5. 2003 Ako vytvoriť jednoduchú animáciu

naspäť | navrch | novinky | tvorba HTML | grafika | kniha návštev | email