Această tehnică JavaScript poate fi utilizată pentru multe efecte, inclusiv pentru sfaturi cu instrumente și hărți imagine.

Site-urile web interactive pot oferi utilizatorilor o experiență mai captivantă. Există multe modalități prin care puteți face un site web mai interactiv, cum ar fi adăugarea de animații, sfaturi cu instrumente sau alte efecte suplimentare.

Unele site-uri web afișează și informații atunci când utilizatorul trece cu mouse-ul peste un element din pagină. Acestea includ hărți sau alte date vizuale care permit utilizatorului să treacă cu mouse-ul peste imagine pentru a vedea un punct de date folosind un balon explicativ.

Puteți obține acest efect folosind HTML, CSS și JavaScript folosind anumite tehnici CSS și concepte JavaScript DOM.

Imaginile pot fi o modalitate utilă de a transmite informații într-un mod atrăgător din punct de vedere vizual pe o pagină web. Sunt utile și pentru adăugarea altor efecte captivante, cum ar fi a galerie de imagini simplă.

Puteți adăuga un sfat explicativ peste o imagine în HTML folosind CSS și JavaScript.

instagram viewer

Codul folosit în acest proiect este disponibil în acesta Repoziție GitHub sub licență MIT.

  1. Într-un fișier nou numit index.html, adăugați structura de bază a unui fișier HTML:
    html>
    <html>
    <cap>
    <titlu>Exemplu de descrieri pentru imaginetitlu>
    cap>
    <corp>
    corp>
    html>
  2. În interiorul etichetei corporale, adăugați un container div. Acest div va include atât imaginea, cât și elementele tooltip:
    <divclasă="container">
    div>
  3. În interiorul recipientului, adăugați o imagine. Asigurați-vă că o imagine cu un nume de fișier care se potrivește se află în același folder cu fișierul HTML:
    <imgsrc=„image.jpg”clasă="imagine"înălţime="420"lăţime="840"alt="Imaginea ta">
  4. Sub imagine, adăugați un div pentru a reprezenta indicația:
    <divclasă=„balon instrument”>div>
  5. În eticheta head, adăugați o etichetă de stil. În interiorul etichetei de stil, adăugați un stil pentru containerul de imagine și sfatul instrument:
    <stil>
    .container {
    poziţie: relativ;
    afişa: inline-block;
     }

    .tooltip {
    poziţie: absolut;
    stânga: 0;
    afişa: nici unul;
    umplutura: 5px;
    culoare de fundal: #000;
    culoare: #fff;
    marimea fontului: 12px;
     }
    stil>
  6. Creați o nouă etichetă de script în partea de jos a etichetei body:
    <corp>
     Conținutul paginii dvs. web aici 
    <scenariu>
    scenariu>
    corp>
  7. În interiorul etichetei de script, utilizați selectorul DOM funcția, querySelector, pentru a obține elementele HTML ale imaginii și sfatul cu instrumente:
    const imagine = document.querySelector('.imagine');
    const tooltip = document.querySelector(„.tooltip”);
  8. Adăugați un ascultător de evenimente pentru mouse-ul peste eveniment. Această funcție va rula când treceți mouse-ul peste imagine. Când se întâmplă acest lucru, pe ecran se va afișa indicația:
    image.addEventListener('mouse-ul peste', () => {
     tooltip.style.display = 'bloc';
    });
  9. Adăugați un ascultător de evenimente pentru mouseout eveniment. Această funcție va rula când mouse-ul părăsește imaginea. Când se întâmplă acest lucru, balonul va dispărea de pe ecran:
    image.addEventListener('mouse out', () => {
     tooltip.style.display = 'nici unul';
    });
  10. Deschideți fișierul index.html în orice browser și plasați cursorul peste imagine pentru a vedea indicația:

Cum se calculează și se afișează coordonatele pixelilor X și Y ale imaginii

Acum că indicația este vizibilă pe pagină, schimbați-i poziția și textul pentru a afișa coordonatele X și Y ale mouse-ului.

  1. Schimbați stilul CSS al balonului cu instrumente, astfel încât acesta să nu fie vizibil înainte de a trece cu mouse-ul peste imagine. Acest lucru vă împiedică să vedeți sfatul instrument în partea de jos a imaginii înainte de a sări la locația cursorului:
    .tooltip {
    poziţie: absolut;
    top: -30px;
    stânga: 0;
    afişa: nici unul;
    umplutura: 5px;
    culoare de fundal: #000;
    culoare: #fff;
    marimea fontului: 12px;
    }
  2. În interiorul etichetei de script, adăugați un alt ascultător de eveniment, pentru a asculta mousemove eveniment. Această funcție se va executa continuu de fiecare dată când mouse-ul trece peste un nou pixel. Adăugați parametrul eveniment, care va introduce informații despre mousemove eveniment în funcție. Aceste informații includ coordonatele imaginii unde se află mouse-ul în acel punct:
    image.addEventListener("mousemouse", (e) => {
    });
  3. Folosind evenimentul, modificați poziția orizontală a balonului explicativ folosind proprietatea CSS din stânga. De fiecare dată când mouse-ul se mișcă, aceasta va actualiza valoarea pentru a se potrivi cu coordonatele X ale cursorului, stocate în clientX variabil:
    tooltip.style.left = e.clientX + „px”;
  4. Schimbați poziția verticală a balonului explicativ folosind proprietatea CSS de sus. ClientY reprezintă coordonatele y ale mouse-ului. The offsetHeight proprietatea include orice umplutură suplimentară sau chenare în interiorul descrierii. Deoarece nu doriți ca balonul cu instrumente direct acolo unde se află cursorul, puteți elimina încă 10px din poziție:
    tooltip.style.top = e.clientY - tooltip.offsetHeight - 10 + „px”;
  5. Schimbați conținutul text al balonului explicativ pentru a afișa coordonatele:
    tooltip.textContent = `X: ${e.offsetX}, Y: ${e.offsetY}`;
  6. Deschideți fișierul index.html în orice browser și plasați cursorul peste imagine pentru a vedea indicația actualizată:

Adăugarea de efecte la pagina dvs. web interactivă

Acum înțelegeți cum să adăugați un sfat explicativ interactiv peste o imagine de pe pagina dvs. web. Puteți continua să vă îmbunătățiți abilitățile HTML și CSS experimentând alte efecte HTML interesante.