Vývoj webu je nedílnou součástí našeho života a v posledních několika letech prošel významnými změnami. Nyní můžeme vytvářet krásné a interaktivní webové stránky pomocí různých technologií a programovacích jazyků. Jednou z možností, kterou můžeme implementovat, je vytvoření vyskakovacích vodítek při najíždění na určité prvky.
V tomto článku se podíváme na to, jak vytvořit vyskakovací nápovědu nebo "tooltips", když najedete myší na obrázek pomocí značkovacího jazyka HTML. K tomu použijeme vestavěné atributy HTML, jako je title.
Je třeba poznamenat, že popisky v HTML jsou jednoduchým a pohodlným řešením pro přidání dalších informací k prvkům na webové stránce. Jsou zvláště užitečné, když je třeba vysvětlit, co konkrétní obrázek nebo text znamená, a lze je také použít ke zlepšení uživatelského zážitku a použitelnosti.
Vytvoření popisku v HTML při najíždění
Jedním ze způsobů, jak vytvořit vyskakovací tip v HTML, je použití atributu title. K tomu je třeba přidat atribut title k prvku, který by měl mít vodítko. Například u obrázku to může vypadat takto:
Výsledkem je, že když na daný obrázek najedete kurzorem, zobrazí se vyskakovací výzva s popisem.
Nicméně, atribut title má svá omezení. Neumožňuje použití značek a stylů k vytvoření složitějších vodítek. K vyřešení tohoto problému lze použít JavaScript nebo CSS. Například pomocí CSS a pseudoelementu ::after můžete vytvořit vlastní vyskakovací tip se svými styly a obsahem.
Zde je příklad kódu pomocí CSS:
.tooltip .tooltip::after .tooltip:hover::afterТекст с подсказкой
Výsledkem je, že když umístíte kurzor na text "text s výzvou", zobrazí se pop-up výzva s danými styly a obsahem.
To jsou jen dva jednoduché způsoby, jak vytvořit vyskakovací tip v HTML. V závislosti na požadavcích a složitosti úkolu lze použít i jiné přístupy, jako je JavaScript nebo knihovny třetích stran.
Tag ![]()
pro vložení obrázku
Syntaxe pro značku vypadá následovně:
Vlastnost src označuje cestu k obrazu, který může být absolutní (například "https://www..example.com/image.jpg") nebo relativní (např. " images/image.jpg").
Vlastnost alt definuje alternativní text, který se zobrazí, pokud obrázek Nelze stáhnout nebo pokud návštěvník používá čtečku obrazovky. Tento text také pomáhá vyhledávačům porozumět obsahu obrázku.
Tag může být doplněn různými atributy , jako je width , height, title a další, aby určil velikost, vodítka a další vlastnosti obrázku.
Příklad použití značky :
V tomto příkladu vložíme Obrázek " cat.jpg "s cestou" images / cat.JPG "a uvádíme alternativní text "obrázek kočky". Pokud nelze obrázek nahrát, návštěvník uvidí uvedený alternativní text.
Atribut title pro vytvoření nápovědy
Výstup pop-up nápovědy na obrázku je poměrně jednoduchý. Chcete-li to provést, musíte přidat atribut titulu ke značce img a zadat v ní text, který chcete zobrazit v nápovědě.
V tomto příkladu, pokud uživatel najede kurzorem na obrázek, zobrazí se v okně vyskakovací výzva popis obrázku.
Je důležité si uvědomit, že popisky vytvořené pomocí atributu title závisí na prohlížeči a operačním systému uživatele a lze je na různých zařízeních zobrazovat různými způsoby.
Návrh nápovědy
Při vytváření popisku pro obrázek v HTML je důležité věnovat pozornost jeho designu, aby byl srozumitelný a atraktivní pro uživatele. K tomu lze použít různé styly a designové prvky.
Jedním ze způsobů, jak vytvořit tip, je instalace atraktivního pozadí a rámečku pro oblast s výzvou. To lze provést pomocí CSS nastavením příslušných hodnot pro vlastnosti background a border.
Můžete také použít různá písma a barvy textu, abyste zvýraznili nápovědu a zviditelnili ji. Můžete nastavit vlastnosti font-family a color pro text uvnitř nápovědy.
Chcete-li vytvořit efektnější design, můžete nastavit animaci, když se objeví a skryje vodítko. Vlastnosti opacity a transition lze například použít k hladkému vzhledu a vymizení nápovědy.
Zdůraznění klíčových slov nebo frází v textu nápovědy může být užitečné pro uživatele, aby rychle našli požadované informace. K tomu můžete použít značky strong nebo em k zvýraznění těchto částí textu.
Je důležité si uvědomit, že návrh nápovědy musí být v souladu s celkovým designem stránky a nevytvářet nadměrné zatížení rozhraní. Aby bylo možné co nejvíce uspokojit potřeby uživatelů, doporučuje se testovat a shromažďovat zpětnou vazbu od uživatelů.
CSS styly pro pop-up tip
K vytvoření popisku v HTML, když přejedete na obrázek, můžete použít styly CSS. K tomu lze použít pseudoelementy a vlastnost position.
Následující příklad ukazuje, jak vytvořit vyskakovací výzvu:
.tooltip .tooltip .tooltiptext .tooltip:hover .tooltiptextТекст подсказки
Tento příklad používá kontejner s třídou "tooltip", ve kterém je umístěn obrázek a prvek s třídou" tooltiptext", který obsahuje text nápovědy. Stylizace se provádí prostřednictvím tříd CSS.
Pro kontejner s třídou tooltip je nastaveno relativní umístění a inline blokový typ zobrazení. Pro prvek třídy "tooltiptext" jsou nastaveny následující styly: neviditelnost nápovědy (vlastnost visibility), šířka, barva pozadí, barva textu, zarovnání do středu, zaoblení hranic, vnitřní odsazení, absolutní umístění vzhledem k nadřazenému kontejneru na spodní straně a střední zarovnání vzhledem k nadřazenému kontejneru.
Když umístíte kontejner s třídou "tooltip", prvek s třídou" tooltiptext " se zviditelní (změnou hodnoty vlastnosti visibility) a projeví se plynulá změna průhlednosti (pomocí vlastnosti opacity).