Denne JavaScript-teknikken kan brukes til mange effekter, inkludert verktøytips og bildekart.

Interaktive nettsteder kan gi en mer engasjerende opplevelse for brukerne. Det er mange måter du kan gjøre et nettsted mer interaktivt på, for eksempel å legge til animasjoner, verktøytips eller andre ekstra effekter.

Noen nettsteder viser også informasjon når brukeren holder markøren over et element på siden. Dette inkluderer kart eller andre visuelle data som lar brukeren holde musepekeren over bildet for å se et datapunkt ved hjelp av et verktøytips.

Du kan oppnå denne effekten ved å bruke HTML, CSS og JavaScript ved å bruke visse CSS-teknikker og JavaScript DOM-konsepter.

Bilder kan være en nyttig måte å formidle informasjon på en visuelt tiltalende måte på en nettside. De er også nyttige for å legge til andre engasjerende effekter som en enkelt bildegalleri.

Du kan legge til et verktøytips over et bilde i HTML ved å bruke CSS og JavaScript.

Koden som brukes i dette prosjektet er tilgjengelig i denne GitHub repo under en MIT-lisens.

instagram viewer
  1. I en ny fil kalt index.html legger du til den grunnleggende strukturen til en HTML-fil:
    html>
    <html>
    <hode>
    <tittel>Eksempel på bildeverktøytipstittel>
    hode>
    <kropp>
    kropp>
    html>
  2. Legg til en beholder-div i body-taggen. Denne div vil inkludere både bildet og verktøytipselementene:
    <divklasse="container">
    div>
  3. Legg til et bilde inne i beholderen. Sørg for at et bilde med et samsvarende filnavn er i samme mappe som HTML-filen din:
    <imgsrc="image.jpg"klasse="bilde"høyde="420"bredde="840"alt="Ditt bilde">
  4. Under bildet legger du til en div for å representere verktøytipset:
    <divklasse="verktøytips">div>
  5. Legg til en stilkode i head-taggen. Inne i stiltaggen legger du til litt stil for bildebeholderen og verktøytipset:
    <stil>
    .container {
    posisjon: slektning;
    vise: inline-blokk;
     }

    .verktøytips {
    posisjon: absolutt;
    venstre: 0;
    vise: ingen;
    polstring: 5px;
    bakgrunnsfarge: #000;
    farge: #fff;
    skriftstørrelse: 12px;
     }
    stil>
  6. Opprett en ny skript-tag nederst i body-taggen:
    <kropp>
     Innholdet på nettsiden din her 
    <manus>
    manus>
    kropp>
  7. Inne i script-taggen, bruk DOM-velgeren funksjon, querySelector, for å få HTML-elementene til bildet og verktøytipset:
    konst bilde = dokument.querySelector('.bilde');
    konst verktøytips = dokument.querySelector('.verktøytips');
  8. Legg til en hendelseslytter for mus over begivenhet. Denne funksjonen vil kjøre når du holder musen over bildet. Når dette skjer, vil verktøytipset vises på skjermen:
    image.addEventListener('mus over', () => {
     tooltip.style.display = 'blokkere';
    });
  9. Legg til en hendelseslytter for museut begivenhet. Denne funksjonen vil kjøre når musen forlater bildet. Når dette skjer, forsvinner verktøytipset fra skjermen:
    image.addEventListener("museut", () => {
     tooltip.style.display = 'ingen';
    });
  10. Åpne index.html-filen i en hvilken som helst nettleser, og hold musepekeren over bildet for å se verktøytipset:

Hvordan beregne og vise X- og Y-pikselkoordinatene til bildet

Nå som verktøytipset er synlig på siden, endre posisjonen og teksten for å vise X- og Y-koordinatene til musen.

  1. Endre CSS-stilen til verktøytipset, slik at verktøytipset ikke er synlig før du holder musepekeren over bildet. Dette hindrer deg i å se verktøytipset nederst i bildet før du hopper til markørens plassering:
    .verktøytips {
    posisjon: absolutt;
    topp: -30 piksler;
    venstre: 0;
    vise: ingen;
    polstring: 5px;
    bakgrunnsfarge: #000;
    farge: #fff;
    skriftstørrelse: 12px;
    }
  2. Inne i skript-taggen legger du til en annen hendelseslytter for å lytte etter musebevegelse begivenhet. Denne funksjonen kjøres kontinuerlig hver gang musen svever over en ny piksel. Legg til hendelsesparameteren, som vil legge inn informasjon om musebevegelse hendelse inn i funksjonen. Denne informasjonen inkluderer bildekoordinatene der musen er på det punktet:
    image.addEventListener('mousemove', (e) => {
    });
  3. Bruk hendelsen til å endre den horisontale posisjonen til verktøytipset ved å bruke den venstre CSS-egenskapen. Hver gang musen beveger seg, vil dette oppdatere verdien slik at den samsvarer med X-koordinatene til markøren, lagret i klientX variabel:
    tooltip.style.left = e.clientX + 'px';
  4. Endre den vertikale plasseringen av verktøytipset ved å bruke den øverste CSS-egenskapen. klientY representerer y-koordinatene til musen. De offsetHøyde egenskapen inkluderer eventuell ekstra polstring eller kantlinjer inne i verktøytipset. Siden du ikke vil ha verktøytipset direkte der markøren er, kan du fjerne ytterligere 10 piksler fra posisjonen:
    tooltip.style.top = e.clientY - tooltip.offsetHeight - 10 + 'px';
  5. Endre tekstinnholdet i verktøytipset for å vise koordinatene:
    tooltip.textContent = `X: ${e.offsetX}, Y: ${e.offsetY}`;
  6. Åpne index.html-filen i en hvilken som helst nettleser, og hold musepekeren over bildet for å se det oppdaterte verktøytipset:

Legge til effekter på din interaktive nettside

Nå forstår du hvordan du legger til et interaktivt verktøytips over et bilde på nettsiden din. Du kan fortsette å forbedre HTML- og CSS-ferdighetene dine ved å eksperimentere med andre interessante HTML-effekter.