Essa técnica JavaScript pode ser usada para muitos efeitos, incluindo dicas de ferramentas e mapas de imagem.

Sites interativos podem fornecer uma experiência mais envolvente para os usuários. Há muitas maneiras de tornar um site mais interativo, como adicionar animações, dicas de ferramentas ou outros efeitos extras.

Alguns sites também exibem informações quando o usuário passa o mouse sobre um elemento da página. Isso inclui mapas ou outros dados visuais que permitem ao usuário passar o mouse sobre a imagem para visualizar um ponto de dados usando uma dica de ferramenta.

Você pode obter esse efeito usando HTML, CSS e JavaScript usando certas técnicas de CSS e conceitos de JavaScript DOM.

As imagens podem ser uma maneira útil de transmitir informações de maneira visualmente atraente em uma página da web. Eles também são úteis para adicionar outros efeitos envolventes, como um galeria de imagens simples.

Você pode adicionar uma dica de ferramenta sobre uma imagem em HTML usando CSS e JavaScript.

instagram viewer

O código utilizado neste projeto está disponível neste repositório GitHub sob uma licença do MIT.

  1. Em um novo arquivo chamado index.html, adicione a estrutura básica de um arquivo HTML:
    html>
    <html>
    <cabeça>
    <título>Exemplo de dica de ferramenta de imagemtítulo>
    cabeça>
    <corpo>
    corpo>
    html>
  2. Dentro da tag body, adicione um container div. Este div incluirá a imagem e os elementos da dica de ferramenta:
    <divaula="recipiente">
    div>
  3. Dentro do contêiner, adicione uma imagem. Certifique-se de que uma imagem com um nome de arquivo correspondente esteja dentro da mesma pasta que seu arquivo HTML:
    <imgorigem="imagem.jpg"aula="imagem"altura="420"largura="840"alternativo="Sua imagem">
  4. Abaixo da imagem, adicione um div para representar a dica de ferramenta:
    <divaula="dica de ferramenta">div>
  5. Na tag head, adicione uma tag de estilo. Dentro da tag de estilo, adicione um pouco de estilo para o contêiner da imagem e a dica de ferramenta:
    <estilo>
    .recipiente {
    posição: relativo;
    mostrar: bloco em linha;
     }

    .dica de ferramenta {
    posição: absoluto;
    esquerda: 0;
    mostrar: nenhum;
    preenchimento: 5px;
    cor de fundo: #000;
    cor: #fff;
    tamanho da fonte: 12px;
     }
    estilo>
  6. Crie uma nova tag de script na parte inferior da tag body:
    <corpo>
     O conteúdo da sua página da web aqui 
    <roteiro>
    roteiro>
    corpo>
  7. Dentro da tag de script, use o seletor DOM função, querySelector, para obter os elementos HTML da imagem e a dica de ferramenta:
    const imagem = documento.querySelector('.imagem');
    const dica = documento.querySelector('.dica');
  8. Adicione um ouvinte de evento para o passe o rato por cima evento. Esta função será executada quando você passar o mouse sobre a imagem. Quando isso ocorrer, a dica de ferramenta será exibida na tela:
    image.addEventListener('passe o rato por cima', () => {
     tooltip.style.display = 'bloquear';
    });
  9. Adicione um ouvinte de evento para o mouseout evento. Esta função será executada quando o mouse sair da imagem. Quando isso ocorrer, a dica de ferramenta desaparecerá da tela:
    image.addEventListener('mouseout', () => {
     tooltip.style.display = 'nenhum';
    });
  10. Abra o arquivo index.html em qualquer navegador e passe o mouse sobre a imagem para ver a dica:

Como calcular e exibir as coordenadas de pixel X e Y da imagem

Agora que a dica de ferramenta está visível na página, altere sua posição e seu texto para exibir as coordenadas X e Y do mouse.

  1. Altere o estilo CSS da dica de ferramenta, para que ela não fique visível antes de você passar o mouse sobre a imagem. Isso evita que você veja a dica de ferramenta na parte inferior da imagem antes de pular para o local do cursor:
    .dica de ferramenta {
    posição: absoluto;
    principal: -30px;
    esquerda: 0;
    mostrar: nenhum;
    preenchimento: 5px;
    cor de fundo: #000;
    cor: #fff;
    tamanho da fonte: 12px;
    }
  2. Dentro da tag script, adicione outro event listener, para escutar o mousemove evento. Esta função será executada continuamente toda vez que o mouse passar sobre um novo pixel. Adicione o parâmetro de evento, que irá inserir informações sobre o mousemove evento na função. Esta informação inclui as coordenadas da imagem onde o mouse está naquele ponto:
    image.addEventListener('mover o mouse', (e) => {
    });
  3. Usando o evento, altere a posição horizontal da dica de ferramenta usando a propriedade CSS da esquerda. Cada vez que o mouse se mover, isso atualizará o valor para corresponder às coordenadas X do cursor, armazenadas no clienteX variável:
    tooltip.style.left = e.clientX + 'px';
  4. Altere a posição vertical da dica de ferramenta usando a propriedade CSS superior. ClienteY representa as coordenadas y do mouse. O offsetHeight A propriedade inclui qualquer preenchimento ou bordas adicionais dentro da dica de ferramenta. Como você não quer a dica de ferramenta diretamente onde o cursor está, você pode remover 10px adicionais da posição:
    tooltip.style.top = e.clientY - tooltip.offsetHeight - 10 + 'px';
  5. Altere o conteúdo do texto da dica de ferramenta para exibir as coordenadas:
    tooltip.textContent = `X: ${e.offsetX}, Y: ${e.offsetY}`;
  6. Abra o arquivo index.html em qualquer navegador e passe o mouse sobre a imagem para visualizar a dica de ferramenta atualizada:

Adicionando efeitos à sua página da Web interativa

Agora você sabe como adicionar uma dica de ferramenta interativa sobre uma imagem em sua página da web. Você pode continuar aprimorando suas habilidades em HTML e CSS experimentando outros efeitos HTML interessantes.