Como Inserir Um Link Em Um Banner

Índice:

Como Inserir Um Link Em Um Banner
Como Inserir Um Link Em Um Banner

Vídeo: Como Inserir Um Link Em Um Banner

Vídeo: Como Inserir Um Link Em Um Banner
Vídeo: 😄 Como Colocar Link no Banner do Canal Youtube 2024, Abril
Anonim

Se você tem um banner, mas não existe um código html pronto para inseri-lo na página, adicionar o link de que você precisa não é tão difícil. Mesmo que o banner seja feito em tecnologia flash. As opções possíveis para organizar links para banners em formatos gráficos e flash no código-fonte são descritas a seguir.

Como inserir um link em um banner
Como inserir um link em um banner

Instruções

Passo 1

Se o banner estiver em um dos formatos gráficos (gif, jpg, png, bmp), bastará colocar a tag da imagem dentro da tag do link, primeiro, forme a tag da imagem. Na linguagem de marcação de páginas da web (HTML - HyperText Markup Language - "linguagem de marcação de hipertexto"), sua versão mais simples se parece com esta: Aqui, o "endereço relativo" da imagem é especificado no atributo src. Nesta versão, o navegador irá assumir que a imagem está na mesma pasta em seu servidor onde a própria página está onde o banner foi inserido. Mas é melhor especificar um "endereço absoluto":

Passo 2

Existem mais alguns atributos para adicionar a esta tag. Dois atributos indicarão as dimensões do banner (altura e largura). Esses são atributos opcionais - a imagem será exibida sem eles se tudo correr bem quando a página for carregada do servidor para o navegador. Mas se a imagem por algum motivo não estiver carregada, a falta de dimensões pode levar ao fato de que todos os outros elementos de design ficarão fora do lugar. A etiqueta de tamanho será semelhante a esta:

etapa 3

Por padrão, o navegador desenha uma borda azul ao redor das imagens de link. Para evitar isso, adicione um atributo border com um valor nulo à tag do banner:

Passo 4

Adicione mais um atributo (título), que conterá o texto da dica de ferramenta quando você passar o cursor do mouse sobre o banner:

Etapa 5

Você preparou a tag da imagem com os atributos mais importantes, agora você precisa colocá-la dentro da tag do link. Cada hiperlink é formado por duas tags - abertura e fechamento: A tag de abertura contém o atributo href, que contém o endereço para envio da solicitação. Entre essas duas tags de link e insira a tag do banner: O código HTML do banner com o link está pronto, não se esqueça de substituir: - no atributo href: "https://kakprosto.ru" pelo endereço do seu link para o banner; - no atributo src: "https://kakprosto.ru/banner.gif" para o endereço da imagem do banner; - no atributo largura: "468" para a largura do seu banner; - no atributo de altura: "60" para a altura do seu banner; - no atributo de título: "É um banner!" texto pop-up para seu banner;

Etapa 6

Todos os itens acima se referem a banners de imagem, mas também existem banners feitos com tecnologia flash. Para inserir um link em um filme em flash de forma padrão, você precisa ter não apenas o banner em si, mas também seu código-fonte. Além disso, você pode editar o código-fonte e, em seguida, compilar o filme Flash apenas em um editor especializado - um editor de texto normal não é adequado para isso. No entanto, existe uma maneira de contornar todas essas dificuldades, limitando-se a editar apenas HTML e CSS (Cascading Style Sheets - "Cascading Style Sheets"). A linguagem CSS é usada para uma descrição mais detalhada (em comparação com HTML) da aparência dos elementos da página. Com sua ajuda, estruturas de múltiplas camadas bastante complexas podem ser construídas nas páginas. Usaremos isso colocando o banner em Flash na camada inferior e colocando a camada com o link acima dela. O código HTML do banner terá a seguinte aparência:

Não se esqueça de substituir os atributos de largura e altura nele (em dois lugares), o nome do banner banner.swf (em dois lugares) e o endereço do link https://kakprosto.ru (em um lugar). E o código SCC correspondente a este código HTML deve ser assim:

div.linkedFlashContainer {posição: relativa; índice z: 1; borda: 0px; largura: 468px; altura: 60px}

a.flashLink {posição: absoluta; índice z: 2; largura: 468px; altura: 60px; background: url (spacer.gif) sem repetição;}

Uma imagem transparente (de qualquer tamanho) chamada spacer

Recomendado: