4
respostas

Projeto com JS - Dicas

Bom dia pessoal,

Estou tentando fazer um projeto HTML, CSS e JS. Minha ideia é fazer uma imagem interativa.

Seria uma imagem fixa, como no google maps, onde eu possa dar zoom in e zoom out para selecionar o objeto com mais facilidade ou ter uma visão panorâmica.

Quando passa o ponteiro em cima do objeto gostaria de abrir uma caixa ao lado com umas informações, e quando clicasse abrisse outra página.

Queria ter uma dica como pesquisar? Eu tenho uma noção de JS, mas não sei nenhum framework ainda. Devo aprender algum framework primeiro?

4 respostas

Bom dia!

Não sei se entendi muito bem a funcionalidade que você está querendo. Porém, existem quase que infinitas possibilidades dentro do ecossistema javascript para fazer o que você está querendo. Eu aconselharia, você tentar fazer isso com javascript puro mesmo (vanilla), para que você já possa aperfeiçoar mais a linguagem, para ai sim, pensar em pegar algum framework.

Existe uma possibilidade tbm, que é a instalação de plugins de terceiros. Como não entendi muito bem a funcionalidade que você quer, não consigo te recomedar nenhum, tenta fazer uma busca descrevendo o que você quer, mas direcionando para um plugin.

Espero ter ajudado, abraços!

Coloquei uma imagem assim fica mais fácil.

Seria igual o google maps mesmo, porem em outra atividade, o resultado final seria o mesmo.

Tenho uma imagem, nela eu tenho várias imagens. Quando passo o mouse em cima do ponto abre um janela pequena com as informações.

Acho que agr fica mais fácil de entender.

Opa, a imagem não apareceu para mim. Mas ACHO que eu talvez tenha entendido.

Acho que você nem precisa usar o JS para fazer isso, apenas o CSS. Talvez apenas para pegar essas informações, caso elas sejam dinâmicas.

Dá uma olhada nesse pen que eu criei, estão com tamanhos todos fixos, e os apenas html e css, caso seja o que você procure, tente substituir por imagens.

Vê me fala se isso atende o que você precisa. https://codepen.io/JonathanLacerda/pen/dyJgZOe

Com link fica mais fácil a imagem.

https://drive.google.com/file/d/1Ug3sCp4LwqqpVBEZrfiYB3zgEGMvUEdy/view?usp=sharing

É exatamente isso que quero.

Legal vou salvar o seu como exemplo e vou explorar. No futuro compartilho o projeto com você

Obrigadão!!!