Deze JavaScript-techniek kan voor veel effecten worden gebruikt, waaronder tooltips en afbeeldingskaarten.
Interactieve websites kunnen gebruikers een meer boeiende ervaring bieden. Er zijn veel manieren waarop u een website interactiever kunt maken, zoals het toevoegen van animaties, tooltips of andere extra effecten.
Sommige websites geven ook informatie weer wanneer de gebruiker met de muis over een element op de pagina beweegt. Dit omvat kaarten of andere visuele gegevens waarmee de gebruiker met behulp van knopinfo over de afbeelding kan bewegen om een gegevenspunt te bekijken.
U kunt dit effect bereiken met behulp van HTML, CSS en JavaScript met behulp van bepaalde CSS-technieken en JavaScript DOM-concepten.
Afbeeldingen kunnen een handige manier zijn om informatie op een visueel aantrekkelijke manier over te brengen op een webpagina. Ze zijn ook handig voor het toevoegen van andere boeiende effecten, zoals een eenvoudige afbeeldingengalerij.
U kunt een tooltip toevoegen aan een afbeelding in HTML met behulp van CSS en JavaScript.
De code die in dit project wordt gebruikt, is hierin beschikbaar GitHub-opslagplaats onder een MIT-licentie.
- Voeg in een nieuw bestand met de naam index.html de basisstructuur van een HTML-bestand toe:
html>
<html>
<hoofd>
<titel>Voorbeeld tooltip afbeeldingtitel>
hoofd>
<lichaam>lichaam>
html> - Voeg binnen de body-tag een container-div toe. Deze div bevat zowel de afbeelding als de tooltip-elementen:
<divklas="houder">div> - Voeg een afbeelding toe in de container. Zorg ervoor dat een afbeelding met een overeenkomende bestandsnaam zich in dezelfde map bevindt als uw HTML-bestand:
<imgsrc="afbeelding.jpg"klas="afbeelding"hoogte="420"breedte="840"alt="Jou foto"> - Voeg onder de afbeelding een div toe om de tooltip weer te geven:
<divklas="knopinfo">div> - Voeg in de head-tag een stijltag toe. Voeg binnen de style-tag wat styling toe voor de afbeeldingscontainer en de tooltip:
<stijl>
.container {
positie: familielid;
weergave: inline-blok;
}
.knopinfo {
positie: absoluut;
links: 0;
weergave: geen;
opvulling: 5px;
Achtergrond kleur: #000;
kleur: #fff;
lettertypegrootte: 12px;
}
stijl> - Maak een nieuwe scripttag aan onder aan de body-tag:
<lichaam>
Uw webpagina-inhoud hier<script>
script>
lichaam> - Binnen de scripttag, gebruik de DOM-kiezer functie, querySelector, om de HTML-elementen van de afbeelding en de knopinfo te krijgen:
const afbeelding = document.querySelector('.afbeelding');
const tooltip = document.querySelector('.tooltip'); - Voeg een gebeurtenislistener toe voor de mouseover evenement. Deze functie wordt uitgevoerd wanneer u met de muis over de afbeelding beweegt. Wanneer dit gebeurt, wordt de tooltip op het scherm weergegeven:
afbeelding.addEventListener('mouseover', () => {
tooltip.style.display = 'blok';
}); - Voeg een gebeurtenislistener toe voor de muis uit evenement. Deze functie wordt uitgevoerd wanneer de muis de afbeelding verlaat. Wanneer dit gebeurt, verdwijnt de tooltip van het scherm:
afbeelding.addEventListener('mouseout', () => {
tooltip.style.display = 'geen';
}); - Open het bestand index.html in een willekeurige browser en plaats de muisaanwijzer op de afbeelding om de tooltip te bekijken:
Hoe de X- en Y-pixelcoördinaten van de afbeelding te berekenen en weer te geven
Nu de tooltip zichtbaar is op de pagina, wijzigt u de positie en de tekst om de X- en Y-coördinaten van de muis weer te geven.
- Wijzig de CSS-stijl van de tooltip, zodat de tooltip niet zichtbaar is voordat u de muisaanwijzer op de afbeelding plaatst. Dit voorkomt dat u de tooltip onder aan de afbeelding ziet voordat u naar de locatie van de cursor springt:
.knopinfo {
positie: absoluut;
bovenkant: -30px;
links: 0;
weergave: geen;
opvulling: 5px;
Achtergrond kleur: #000;
kleur: #fff;
lettertypegrootte: 12px;
} - Voeg binnen de scripttag nog een gebeurtenislistener toe om te luisteren naar de muisbeweging evenement. Deze functie wordt continu uitgevoerd telkens wanneer uw muis over een nieuwe pixel beweegt. Voeg de gebeurtenisparameter toe, die informatie invoert over de muisbeweging gebeurtenis in de functie. Deze informatie omvat de afbeeldingscoördinaten waar de muis zich op dat punt bevindt:
afbeelding.addEventListener('muisbewegen', (e) => {}); - Gebruik de gebeurtenis om de horizontale positie van de tooltip te wijzigen met behulp van de linker CSS-eigenschap. Elke keer dat de muis beweegt, wordt de waarde bijgewerkt zodat deze overeenkomt met de X-coördinaten van de cursor, opgeslagen in de klantX variabele:
tooltip.style.left = e.clientX + 'px'; - Wijzig de verticale positie van de tooltip met behulp van de bovenste CSS-eigenschap. klantY vertegenwoordigt de y-coördinaten van de muis. De offsetHoogte eigenschap bevat eventuele extra opvulling of randen binnen de tooltip. Omdat je de tooltip niet direct op de plaats van de cursor wilt hebben, kun je een extra 10px van de positie verwijderen:
tooltip.style.top = e.clientY - tooltip.offsetHeight - 10 + 'px'; - Wijzig de tekstinhoud van de tooltip om de coördinaten weer te geven:
tooltip.textContent = `X: ${e.offsetX}, J: ${e.offsetY}`; - Open het bestand index.html in een willekeurige browser en plaats de muisaanwijzer op de afbeelding om de bijgewerkte tooltip te bekijken:
Effecten toevoegen aan uw interactieve webpagina
U begrijpt nu hoe u een interactieve tooltip over een afbeelding op uw webpagina kunt toevoegen. U kunt uw HTML- en CSS-vaardigheden blijven verbeteren door te experimenteren met andere interessante HTML-effecten.
