<CENTER> <iframe src=" width=740 height=255> </iframe> </CENTER>

Tamanho: px

Começar a partir da página:

Download "<CENTER> <iframe src="http://www.universo.edu.br" width=740 height=255> </iframe> </CENTER>"

Afonso Vilarinho Mendes
7 Há anos
Visualizações:

1 6.4 iframes: Outra maneira mais elegante de inserir outras páginas dentro de nossos documentos HTML é através do comando <iframe>. Nesse caso, devemos especificar o tamanho do espaço que deverá ser aberto no documento para apresentação da outra página. Abaixo um exemplo, onde <iframe> foi colocado de forma a abrir uma página centralizada (iframe.html): <HTML> <HEAD> <TITLE>Exemplo de uso do iframe</title> </HEAD> <BODY> <CENTER> <iframe src=" width=740 height=255> </iframe> </CENTER> </BODY> </HTML> Atributos: ALIGN = LEFT RIGHT CENTER TOP MIDDLE BOTTOM Valores: o LEFT Moldura à esquerda e texto ao redor; o RIGHT Moldura à direita e texto ao redor; o CENTER Moldura no centro e texto ao redor; o TOP Texto alinhado com a parte superior do frame; o MIDDLE Texto alinhado com o centro do frame; o BOTTOM Texto alinhado com a parte inferior do frame; FRAMEBORDER = 1 0 HEIGHT = número % - Altura da moldura. MARGINHEIGHT = número % MARGINWIDTH = número % NAME = texto NORESIZE

2 SCROLLING = yes no auto SRC = URL WIDTH = número % - Largura da moldura. Exercício: Crie uma página html (iframe_exercicio.html) com um iframe de 120 pixels de largura, 148 pixels de altura, margem superior, inferior, direita e esquerda iguais a zero, border igual a zero e que não exiba a barra de rolagem, de modo que o iframe fique centralizado na página html criada Imagens Mapeadas e Cambiáveis: Imagens Mapeadas: Quando queremos criar um link para uma outra página HTML a partir de uma imagem, fazemos da seguinte maneira:... <a href="index.html"><img src="img/imagem.jpg"></a>... Seguindo a marcação acima, basta clicar em qualquer parte da imagem para irmos ao endereço que definimos. Porém, há momentos em que desejamos utilizar apenas parte da imagem. Para isso podemos utilizar o tag <map> cuja função é definir determinadas áreas da imagem para serem usadas como links, por exemplo. Existem 3 formas que podemos atribuir a uma área da imagem com o tag <map>: círculo, quadrado (ou retângulo) e polígono. O código abaixo mostra uma imagem mapeada com o formato de um círculo, onde podemos clicar. Pegue a imagem Koala.jpg que se encontra em "Amostra de Imagens" do Windows Explorer e coloque no mesmo diretório onde você salvará o arquivo imagens_mapeadas.html com o código fonte abaixo: <html>

3 <head> <title>imagens Mapeadas</title> </head> <body> <img src="koala.jpg" border="0" usemap="#urso"> <map name="urso"> <area shape="circle" coords="384,384,20" href=" alt="universo"> <area shape="circle" coords="662,427,20" href=" alt="google"> </map> </body> </html> Observe o valor atribuído a "shape". A palavra-chave "circle" significa que a área terá forma de círculo. Os valores atribuídos a "coords" indicam o local onde ficará o círculo e o tamanho dele. A tabela abaixo apresenta as formas e exemplos de como definir as coordenadas em uma imagem: Shape (formato) Coords (coordenadas) circle (círculo) 50,50,20 rect (retângulo) 100,150,200,140 poly (polígono) 566,206,450,339,625,343 Para o círculo as 3 coordenadas significam, respectivamente, distância da borda esquerda da imagem, distância do topo da imagem e diâmetro do círculo. Para o retângulo, os dois primeiros valores definem o canto superior esquerdo desse formato, e os dois últimos valores definem o canto inferior direito do formato. Já para o polígono, cada dupla de valores representa um canto desse formato. No caso das coordenadas apresentadas na tabela para o Shape poly, um triângulo é formado (3 pares de coordenadas)

4 Para definir as coordenadas desejadas, basta abrir a imagem no Paint e observar os valores apresentados pelo programa da posição do mouse. Observe a imagem abaixo: Ponteiro do mouse Coordenados do ponto Existem outros editores de imagens que também mostram as coordenadas da imagem, mas o Paint é o mais acessível, já que sempre vem junto com o Sistema Operacional Windows. Existem também editores e ferramentas de autoria e apoio ao desenvolvimento WEB que já mapeiam imagens, como por exemplo, o MapEdit já citado. Exercício: Mapeie a pata da imagem Koala.jpg, inserindo um link para o site no formato de um retângulo e a testa da imagem Koala.jpg, inserindo um link para o site no formato de um triângulo

5 Imagens Cambiáveis: Uma imagem cambiável é aquela que sofre algum tipo de mudança quando passamos com o mouse sobre ela. O famoso efeito OnMouseOver / OnMouseOut. Normalmente para conseguir tal feito, utiliza-se um código JavaScript, o que dificultava a vida de quem não tem facilidade com essa linguagem. Veja abaixo o código fonte (imagens_cambiaveis.html) do funcionamento de uma imagem cambiável: <html> <head> <title>imagens Cambiáveis</title> </head> <body> <img src="img_camb_1.jpg" onmouseover="this.src='img_camb_2.jpg'" onmouseout="this.src='img_camb_1.jpg'" /> </body> </html>

Documentos relacionados

DESENVOLVIMENTO WEB I - 7122

DESENVOLVIMENTO WEB I - 7122 6.2 - Formulários: Um dos recursos mais fascinantes da linguagem HTML é a possibilidade de criar formulários eletrônicos. Usando um formulário o usuário pode interagir com o servidor, enviando dados que