As janelas pop-up ou pop-under estão se tornando cada vez mais populares na Internet. Ou, mais simplesmente, imagens pop-up. Muitos proprietários de sites geralmente precisam criá-los para fins publicitários, mas nem todos conhecem o algoritmo para sua criação.
É necessário
- - Editor de HTML;
- - caderno;
- - hospedagem.
Instruções
Passo 1
Crie ou abra uma nova página da web em HTML ou em um editor de texto. Você pode usar programas populares como Dreamweaver, Expression Web e outros para essa finalidade. Se você está apenas dando os primeiros passos na linguagem de programação HTML, use um "bloco de notas" comum.
Passo 2
Cole o seguinte código entre as tags "head" e "/ head":
.thumbnail {posição: relativa; índice z: 0;}
.thumbnail: hover {background-color: transparent; índice z: 50;}
.thumbnail span {/ * CSS para imagem ampliada * / position: absolute; cor de fundo: amarelo-claro; preenchimento: 5px; esquerda: -1000px; borda: cinza tracejado de 1 px; visibilidade: oculto; cor preta; decoração de texto: nenhum;}
.thumbnail span img {/ * CSS para imagem ampliada * / border-width: 0; preenchimento: 2px;}
.thumbnail: hover span {/ * CSS para imagem ampliada em hover * / visibility: visible; topo: 0; esquerda: 65px; / * posição em que a imagem ampliada deve se deslocar horizontalmente * /}
etapa 3
Ajuste o deslocamento horizontal da imagem pop-up alterando o valor na última linha do código. Aloque um espaço entre as tags "body" e "/ body" onde deseja que a imagem apareça na página da web. Em seguida, copie e cole o seguinte código:
Exemplo de título de texto
Um exemplo de título de texto"
Passo 4
Substitua "folder / largepci1.jpg" pelo arquivo usado para a foto pop-up. Faça o mesmo com o segundo bloco de código. Altere a linha "Exemplo de título do texto" para o que deve ser escrito na imagem pop-up. Altere também os valores de altura e largura no código para ajustar o tamanho da imagem pop-up. Crie blocos de código adicionais para adicionar mais esboços. Insira outros atributos, tags e texto no documento HTML conforme necessário. Salve o arquivo HTML e carregue-o no servidor da web.
