Criar texto pop-up em imagens instrutíveis: 7 etapas

2024 Autor: John Day | [email protected]. Última modificação: 2024-01-30 11:39

As imagens no Instructables têm um recurso em que exibem um texto pop-up quando você move o mouse sobre as regiões contornadas das imagens. Isso é usado para rotular partes particularmente interessantes da imagem. É um recurso muito bom, e alguém perguntou exatamente como isso é feito. Então, aqui está um instrutível.:-)

Infelizmente, este Instructable é principalmente obsoleto

Etapa 1: Ponto de Partida

Aqui estamos nós em uma página "explorar" instrutível típica. Estou logado no meu

nome de usuário instructables, é claro. Clique no link "upload de imagens" para acessar sua biblioteca de imagens.

Etapa 2: vá para a biblioteca de imagens

Presumivelmente, você já carregou algumas imagens, com base em outras instrutíveis por 'alguma coisa'. Clique no link "biblioteca de imagens" para ir para a página que mostra os arquivos que você já enviou.

Etapa 3: Escolha uma imagem

Selecione e clique na imagem à qual deseja adicionar o texto pop-up.

Isso mudará o Instructables para o modo de "edição de imagem" na resolução padrão. Você estará no mesmo tipo de modo de "edição de imagem" quando adicionar uma imagem a um Instructable que está criando ou editando, então não precisa adicionar os pop-ups logo após o upload, separadamente de inserir um instructable. Na verdade, provavelmente faz mais sentido fazer isso como parte da criação instrutível (as etapas restantes são todas iguais), onde você tem o contexto de seu … texto.

Etapa 4: crie a área de passagem do mouse

Clique em um ponto e arraste para o outro canto de um retângulo contendo a parte da imagem onde você deseja ter o texto pop-up.

Etapa 5: adicione o texto

Quando você solta o botão do mouse, o editor de Instructables exibe uma caixa para você preencher com o texto.

Etapa 6: Pronto?

Clique em "salvar" quando terminar de inserir o texto. Ou clique em cancelar se decidir que a caixa está no lugar errado e quiser tentar novamente. Uma única imagem pode ter mais de uma área de passagem do mouse; Não sei se existe um limite real. A legibilidade requer um número relativamente pequeno. Acho útil tornar as caixas significativamente maiores do que o item que destacam. Isso as torna mais óbvias e fáceis de selecionar. As áreas podem se sobrepor, embora você praticamente tenha que selecionar uma de uma parte não sobreposta. E você não pode ter uma área totalmente dentro da outra; apenas a caixa externa funcionará. (Algumas das imagens neste instrutível podem parecer que têm uma caixa dentro da outra, mas na verdade são apenas uma caixa fora de uma captura de tela que inclui a imagem de uma caixa menor.)

Etapa 7: Isso não é legal?

O texto pop-up do mouseover deve estar funcionando neste ponto.

Observe que o texto pop-up está associado à IMAGEM, não a um instrutível específico. Se você tiver vários instructables contendo a mesma imagem, as áreas pop-up aparecerão em todos eles, seja ou não apropriado. Se você deseja ter a mesma imagem em lugares diferentes com texto pop-up diferente, você deve carregar a imagem várias vezes. (A imagem nesta etapa é um exemplo; também é usada na etapa de "introdução", onde o pop-up não é muito apropriado.)