Tuto techniku JavaScriptu lze použít pro mnoho efektů, včetně popisků a obrazových map.
Interaktivní webové stránky mohou uživatelům poskytnout poutavější zážitek. Existuje mnoho způsobů, jak udělat web interaktivnějším, například přidáním animací, popisků nebo jiných extra efektů.
Některé webové stránky také zobrazují informace, když uživatel najede na prvek na stránce. To zahrnuje mapy nebo jiná vizuální data, která uživateli umožňují umístit ukazatel myši na obrázek a zobrazit datový bod pomocí popisku.
Tohoto efektu můžete dosáhnout pomocí HTML, CSS a JavaScriptu pomocí určitých technik CSS a konceptů JavaScript DOM.
Obrázky mohou být užitečným způsobem, jak sdělit informace na webové stránce vizuálně přitažlivým způsobem. Jsou také užitečné pro přidání dalších poutavých efektů, jako je a jednoduchá galerie obrázků.
Na obrázek v HTML můžete přidat popisek pomocí CSS a JavaScriptu.
Kód použitý v tomto projektu je k dispozici zde úložiště GitHub pod licencí MIT.
- Do nového souboru s názvem index.html přidejte základní strukturu souboru HTML:
html>
<html>
<hlava>
<titul>Příklad popisku obrázkutitul>
hlava>
<tělo>tělo>
html> - Do značky body přidejte kontejner div. Tento div bude obsahovat prvky obrázku i popisku:
<divtřída="kontejner">div> - Do kontejneru přidejte obrázek. Ujistěte se, že obrázek se shodným názvem souboru je ve stejné složce jako váš soubor HTML:
<imgsrc="obrazek.jpg"třída="obraz"výška="420"šířka="840"alt="Váš obrázek"> - Pod obrázek přidejte div, který bude představovat popisek:
<divtřída="popisek">div> - Do značky head přidejte značku stylu. Uvnitř značky stylu přidejte styl pro kontejner obrázku a popis:
<styl>
.kontejner {
pozice: relativní;
Zobrazit: inline-blok;
}
.popisek {
pozice: absolutní;
vlevo, odjet: 0;
Zobrazit: žádný;
vycpávka: 5px;
barva pozadí: #000;
barva: #fff;
velikost písma: 12px;
}
styl> - Vytvořte novou značku skriptu ve spodní části značky body:
<tělo>
Obsah vaší webové stránky zde<skript>
skript>
tělo> - Uvnitř značky skriptu použijte selektor DOM funkce querySelector, abyste získali HTML prvky obrázku a popis:
konst obrázek = dokument.querySelector('.obraz');
konst tooltip = dokument.querySelector('.tooltip'); - Přidejte posluchač události pro přejet myší událost. Tato funkce se spustí, když najedete myší na obrázek. Když k tomu dojde, na obrazovce se zobrazí nápověda:
image.addEventListener('přejet myší', () => {
tooltip.style.display = 'blok';
}); - Přidejte posluchač události pro mouseout událost. Tato funkce se spustí, když myš opustí obrázek. Když k tomu dojde, nápověda zmizí z obrazovky:
image.addEventListener('mouseout', () => {
tooltip.style.display = 'žádný';
}); - Otevřete soubor index.html v libovolném prohlížeči a umístěte ukazatel myši na obrázek, abyste zobrazili popisek:
Jak vypočítat a zobrazit pixelové souřadnice X a Y obrázku
Nyní, když je na stránce viditelná nápověda, změňte její polohu a text, aby se zobrazily souřadnice X a Y myši.
- Změňte styl CSS popisku tak, aby nebyl vidět, než najedete na obrázek. To vám zabrání vidět popisek ve spodní části obrázku před přechodem na místo kurzoru:
.popisek {
pozice: absolutní;
horní: -30 pixelů;
vlevo, odjet: 0;
Zobrazit: žádný;
vycpávka: 5px;
barva pozadí: #000;
barva: #fff;
velikost písma: 12px;
} - Do značky skriptu přidejte další posluchač události, který bude naslouchat pohyb myši událost. Tato funkce se bude provádět nepřetržitě pokaždé, když myš najede na nový pixel. Přidejte parametr události, který bude vkládat informace o pohyb myši událost do funkce. Tyto informace zahrnují souřadnice obrázku, kde se v daném bodě nachází myš:
image.addEventListener('mousemove', (e) => {}); - Pomocí události změňte vodorovnou polohu popisku pomocí vlastnosti left CSS. Při každém pohybu myši se hodnota aktualizuje tak, aby odpovídala souřadnicím X kurzoru uloženým v clientX proměnná:
tooltip.style.left = e.clientX + 'px'; - Změňte svislou polohu popisku pomocí vlastnosti top CSS. KlientY představuje souřadnice y myši. The offsetHeight vlastnost zahrnuje jakékoli další odsazení nebo ohraničení uvnitř popisku. Protože nechcete, aby byl popisek přímo tam, kde je kurzor, můžete z pozice odebrat dalších 10 pixelů:
tooltip.style.top = e.clientY - tooltip.offsetHeight - 10 + 'px'; - Změňte textový obsah popisku tak, aby zobrazoval souřadnice:
tooltip.textContent = `X: ${e.offsetX}, Y: ${e.offsetY}`; - Otevřete soubor index.html v libovolném prohlížeči a umístěte ukazatel myši na obrázek, abyste zobrazili aktualizovaný popis:
Přidání efektů na vaši interaktivní webovou stránku
Nyní rozumíte tomu, jak přidat interaktivní nápovědu přes obrázek na vaši webovou stránku. Můžete pokračovat ve zdokonalování svých dovedností HTML a CSS experimentováním s dalšími zajímavými HTML efekty.
