Denne JavaScript-teknik kan bruges til mange effekter, herunder værktøjstip og billedkort.

Interaktive websteder kan give en mere engagerende oplevelse for brugerne. Der er mange måder, du kan gøre et websted mere interaktivt på, såsom at tilføje animationer, værktøjstip eller andre ekstra effekter.

Nogle websteder viser også information, når brugeren svæver over et element på siden. Dette inkluderer kort eller andre visuelle data, der gør det muligt for brugeren at holde markøren over billedet for at se et datapunkt ved hjælp af et værktøjstip.

Du kan opnå denne effekt ved hjælp af HTML, CSS og JavaScript ved hjælp af visse CSS-teknikker og JavaScript DOM-koncepter.

Billeder kan være en nyttig måde at formidle information på en visuelt tiltalende måde på en webside. De er også nyttige til at tilføje andre engagerende effekter såsom en enkelt billedgalleri.

Du kan tilføje et værktøjstip over et billede i HTML ved hjælp af CSS og JavaScript.

Koden brugt i dette projekt er tilgængelig i dette GitHub repo under en MIT-licens.

instagram viewer
  1. Tilføj den grundlæggende struktur for en HTML-fil i en ny fil kaldet index.html:
    html>
    <html>
    <hoved>
    <titel>Eksempel på billedværktøjstiptitel>
    hoved>
    <legeme>
    legeme>
    html>
  2. Tilføj en container-div inde i body-tagget. Denne div vil inkludere både billedet og værktøjstip-elementerne:
    <divklasse="beholder">
    div>
  3. Tilføj et billede inde i beholderen. Sørg for, at et billede med et matchende filnavn er i samme mappe som din HTML-fil:
    <imgsrc="image.jpg"klasse="billede"højde="420"bredde="840"alt="Dit billede">
  4. Tilføj en div under billedet for at repræsentere værktøjstippet:
    <divklasse="værktøjstip">div>
  5. Tilføj et stiltag i head-tagget. Inden i stiltagget skal du tilføje lidt styling til billedbeholderen og værktøjstip:
    <stil>
    .beholder {
    position: i forhold;
    Skærm: inline-blok;
     }

    .værktøjstip {
    position: absolut;
    venstre: 0;
    Skærm: ingen;
    polstring: 5px;
    baggrundsfarve: #000;
    farve: #fff;
    skriftstørrelse: 12px;
     }
    stil>
  6. Opret et nyt script-tag i bunden af ​​body-tagget:
    <legeme>
     Din websides indhold her 
    <manuskript>
    manuskript>
    legeme>
  7. Inde i script-tagget, brug DOM-vælgeren funktion, querySelector, for at hente HTML-elementerne i billedet og værktøjstip:
    konst billede = dokument.querySelector('.billede');
    konst værktøjstip = dokument.querySelector('.værktøjstip');
  8. Tilføj en begivenhedslytter til mus over begivenhed. Denne funktion kører, når du holder musen over billedet. Når dette sker, vises værktøjstip på skærmen:
    image.addEventListener('mus over', () => {
     tooltip.style.display = 'blok';
    });
  9. Tilføj en begivenhedslytter til museud begivenhed. Denne funktion vil køre, når musen forlader billedet. Når dette sker, forsvinder værktøjstippet fra skærmen:
    image.addEventListener('mouseout', () => {
     tooltip.style.display = 'ingen';
    });
  10. Åbn filen index.html i en hvilken som helst browser, og hold markøren over billedet for at se værktøjstip:

Hvordan man beregner og viser X- og Y-pixelkoordinaterne for billedet

Nu hvor værktøjstippet er synligt på siden, skal du ændre dets position og tekst for at vise musens X- og Y-koordinater.

  1. Skift CSS-stilen af ​​værktøjstippet, så værktøjstippet ikke er synligt, før du holder markøren over billedet. Dette forhindrer dig i at se værktøjstip i bunden af ​​billedet, før du hopper til markørens placering:
    .værktøjstip {
    position: absolut;
    top: -30px;
    venstre: 0;
    Skærm: ingen;
    polstring: 5px;
    baggrundsfarve: #000;
    farve: #fff;
    skriftstørrelse: 12px;
    }
  2. Tilføj en anden begivenhedslytter inden i script-tagget for at lytte efter musebevægelse begivenhed. Denne funktion vil køre kontinuerligt, hver gang din mus svæver over en ny pixel. Tilføj hændelsesparameteren, som vil indtaste oplysninger om musebevægelse begivenhed ind i funktionen. Disse oplysninger inkluderer billedkoordinaterne, hvor musen er på det tidspunkt:
    image.addEventListener('mousemove', (e) => {
    });
  3. Brug begivenheden til at ændre den vandrette position af værktøjstip ved hjælp af den venstre CSS-egenskab. Hver gang musen bevæger sig, vil dette opdatere værdien, så den passer til markørens X-koordinater, gemt i klientX variabel:
    tooltip.style.left = e.clientX + 'px';
  4. Skift den lodrette position af værktøjstip ved hjælp af den øverste CSS-egenskab. klientY repræsenterer y-koordinaterne for musen. Det offsetHøjde egenskaben inkluderer yderligere polstring eller kanter inde i værktøjstip. Da du ikke vil have værktøjstip direkte der, hvor markøren er, kan du fjerne yderligere 10px fra positionen:
    tooltip.style.top = e.clientY - tooltip.offsetHeight - 10 + 'px';
  5. Skift tekstindholdet i værktøjstippet for at vise koordinaterne:
    tooltip.textContent = `X: ${e.offsetX}, Y: ${e.offsetY}`;
  6. Åbn filen index.html i en hvilken som helst browser, og hold musemarkøren over billedet for at se det opdaterede værktøjstip:

Tilføjelse af effekter til din interaktive webside

Nu forstår du, hvordan du tilføjer et interaktivt værktøjstip over et billede på din webside. Du kan fortsætte med at fremme dine HTML- og CSS-færdigheder ved at eksperimentere med andre interessante HTML-effekter.