Podsvícení tlačítek na webových stránkách je obvykle organizováno pomocí dvou obrázků. Když podržíte kurzor myši nad odpovídajícím prvkem dokumentu (odkaz nebo tlačítko), vygeneruje se událost, která v souladu s pokyny napsanými v jazyce CSS vyzve prohlížeč ke změně jednoho obrázku na jiný. Když se kurzor myši vzdálí od tlačítka, dojde k opačné výměně.
Nezbytné
Základní znalost jazyků HTML a CSS
Instrukce
Krok 1
Existuje několik možností implementace takového zvýrazňovacího mechanismu. Pro kteroukoli z nich můžete použít stejný kód HTML, přičemž změníte pouze odpovídající popis stylu. HTML kód tlačítka může vypadat takto: text na tlačítku Zde je identifikátor tohoto prvku stránky (id = "btnA"), ke kterému bude připojen popis stylu.
Krok 2
Chcete-li implementovat jednu z možností, musíte si připravit dva obrázky, z nichž jeden zobrazuje tlačítko v neaktivním stavu a druhý podsvícení. Budou použity jako obrázek na pozadí odkazu. Pokyny CSS pro toto tlačítko mohou vypadat takto:
a # btnA, a # btnA: navštíveno {
displej: blok;
šířka: 50px;
výška: 20px;
pozadí: url (btnA.gif) no-repeat;
ohraničení: 0;
}
a # btnA: hover {
pozadí: url (btnA_hover.gif) no-repeat;
ohraničení: 0;
}
Tady v prvním bloku jsou uvedeny rozměry obrázku zobrazujícího tlačítko (šířka: 50px; výška: 20px;). Musíte je nahradit rozměry vašeho obrázku. Názvy obrazových souborů by se měly měnit stejným způsobem: btnA.
Krok 3
Jednou z alternativ je spojit oba obrázky do jednoho obrázku. Může to být jeden nad druhým nebo může být vedle sebe. Bude také použit jako pozadí odkazu. Vzhledem k tomu, že velikosti tlačítek jsou specifikovány v popisu stylu tlačítka, nebude viditelné vše, co se do nich nevejde. V takovém případě by pokyny umístěné v popisu CSS měly při pohybu kurzoru myši posouvat obrázek na pozadí tak, aby oblast s obrázkem zvýrazněného tlačítka spadala do rámečku. U této možnosti musí být kód z předchozího kroku změněn následovně:
a # btnA, a # btnA: navštíveno {
displej: blok;
šířka: 50px;
výška: 20px;
pozadí: url (btnA.gif) no-repeat;
ohraničení: 0;
}
a # btnA: hover {
pozadí: url (btnA.gif) no-repeat 21px;
ohraničení: 0;
}
To předpokládá, že jste obrázky umístili nad sebe (zvýrazněné dole) a uložili do souboru s názvem btnA.gif. Výška tlačítek je 20 pixelů, šířka 50 pixelů - tyto hodnoty musíte nahradit vlastními.
