Ova JavaScript tehnika može se koristiti za mnoge efekte, uključujući opise alata i mape slika.
Interaktivna web-mjesta mogu korisnicima pružiti privlačnije iskustvo. Postoji mnogo načina na koje možete web stranicu učiniti interaktivnijom, poput dodavanja animacija, opisa alata ili drugih dodatnih efekata.
Neke web stranice također prikazuju informacije kada korisnik prijeđe pokazivačem iznad elementa na stranici. To uključuje karte ili druge vizualne podatke koji korisniku omogućuju da prijeđe pokazivačem iznad slike kako bi pogledao podatkovnu točku koristeći opis alata.
Ovaj učinak možete postići korištenjem HTML-a, CSS-a i JavaScripta koristeći određene CSS tehnike i JavaScript DOM koncepte.
Slike mogu biti koristan način za prenošenje informacija na vizualno privlačan način na web stranici. Također su korisni za dodavanje drugih zanimljivih učinaka kao što je jednostavna galerija slika.
Možete dodati opis alata preko slike u HTML-u koristeći CSS i JavaScript.
Kod korišten u ovom projektu dostupan je u ovom GitHub repo pod licencom MIT-a.
- U novoj datoteci pod nazivom index.html dodajte osnovnu strukturu HTML datoteke:
html>
<html>
<glava>
<titula>Primjer slikovnog opisatitula>
glava>
<tijelo>tijelo>
html> - Unutar oznake tijela dodajte spremnik div. Ovaj div će uključivati i sliku i elemente opisa alata:
<divrazreda="kontejner">div> - Unutar spremnika dodajte sliku. Provjerite nalazi li se slika s odgovarajućim nazivom datoteke u istoj mapi kao i vaša HTML datoteka:
<imgsrc="slika.jpg"razreda="slika"visina="420"širina="840"alt="Vaša slika"> - Ispod slike dodajte div da predstavlja opis alata:
<divrazreda="tooltip">div> - U oznaku za glavu dodajte oznaku stila. Unutar oznake stila dodajte neki stil za spremnik slike i opis alata:
<stil>
.kontejner {
položaj: relativna;
prikaz: inline-blok;
}
.opis {
položaj: apsolutni;
lijevo: 0;
prikaz: nikakav;
podstava: 5px;
boja pozadine: #000;
boja: #F F F;
veličina fonta: 12px;
}
stil> - Napravite novu oznaku skripte na dnu oznake tijela:
<tijelo>
Sadržaj vaše web stranice ovdje<skripta>
skripta>
tijelo> - Unutar oznake skripte, koristite selektor DOM funkcija, querySelector, za dobivanje HTML elemenata slike i opis alata:
konst slika = dokument.querySelector('.slika');
konst opis = dokument.querySelector('.tooltip'); - Dodajte slušatelja događaja za prelazak mišem događaj. Ova funkcija će se pokrenuti kada prijeđete mišem preko slike. Kada se to dogodi, na zaslonu će se prikazati opis alata:
image.addEventListener('prelazak mišem', () => {
tooltip.style.display = 'blok';
}); - Dodajte slušatelja događaja za mouseout događaj. Ova funkcija će se pokrenuti kada miš napusti sliku. Kada se to dogodi, opis će nestati sa zaslona:
image.addEventListener('mouseout', () => {
tooltip.style.display = 'ništa';
}); - Otvorite datoteku index.html u bilo kojem pregledniku i zadržite pokazivač iznad slike da biste vidjeli opis:
Kako izračunati i prikazati koordinate X i Y piksela slike
Sada kada je opis alata vidljiv na stranici, promijenite njegov položaj i tekst za prikaz X i Y koordinata miša.
- Promijenite CSS stil opisa alata tako da opis nije vidljiv prije nego što prijeđete pokazivačem iznad slike. To vas sprječava da vidite opis alata na dnu slike prije nego što skočite na lokaciju pokazivača:
.opis {
položaj: apsolutni;
vrh: -30px;
lijevo: 0;
prikaz: nikakav;
podstava: 5px;
boja pozadine: #000;
boja: #F F F;
veličina fonta: 12px;
} - Unutar oznake skripte dodajte još jednog slušatelja događaja za slušanje pomicanje miša događaj. Ova funkcija će se neprekidno izvršavati svaki put kada miš prijeđe iznad novog piksela. Dodajte parametar događaja koji će unijeti informacije o pomicanje miša događaj u funkciju. Ove informacije uključuju koordinate slike gdje se miš nalazi u toj točki:
image.addEventListener('pomak miša', (e) => {}); - Pomoću događaja promijenite vodoravni položaj opisa alata koristeći lijevo CSS svojstvo. Svaki put kada se miš pomakne, ovo će ažurirati vrijednost kako bi odgovarala X koordinatama kursora, pohranjenim u klijentX varijabla:
tooltip.style.left = e.clientX + 'px'; - Promijenite okomiti položaj opisa alata pomoću gornjeg CSS svojstva. KlijentY predstavlja y koordinate miša. The visina pomaka svojstvo uključuje sva dodatna ispuna ili obrube unutar opisa alata. Budući da ne želite da se opis alata nalazi izravno na mjestu pokazivača, možete ukloniti dodatnih 10 piksela s položaja:
tooltip.style.top = e.clientY - tooltip.offsetHeight - 10 + 'px'; - Promijenite tekstualni sadržaj opisa za prikaz koordinata:
tooltip.textContent = `X: ${e.offsetX}, Y: ${e.offsetY}`; - Otvorite datoteku index.html u bilo kojem pregledniku i zadržite pokazivač iznad slike da biste vidjeli ažurirani opis:
Dodavanje efekata vašoj interaktivnoj web stranici
Sada razumijete kako dodati interaktivni opis alata preko slike na vašoj web stranici. Možete nastaviti unapređivati svoje HTML i CSS vještine eksperimentirajući s drugim zanimljivim HTML efektima.
