PARTE - 9 HTML Página 61 _______________________________________________________________________________ Índice Imagem com vários links (mapa de imagem) ............................................................. Imagem ............................................................................................................. Coordenadas....................................................................................................... Exemplo completo. .............................................................................................. Parte 1 ............................................................................................................ Parte 2 ............................................................................................................ Parte 3 ............................................................................................................ Parte 4 ............................................................................................................ Tipos de áreas: shape distintas. ............................................................................ Shape Rect ..................................................................................................... Shape Circle .................................................................................................... Shape Poly ...................................................................................................... 62 62 62 63 63 64 64 65 66 66 66 66 HTML Página 62 _______________________________________________________________________________ Imagem com vários links (mapa de imagem) Os mapas de imagem são uma nova exposição de navegação que incorpora uma série de links dentro de uma mesma imagem. Estes links são definidos por figuras geométricas e funcionam exatamente da mesma forma que os outros links. Um mapa de imagem é uma imagem com múltiplas áreas clicáveis (mais de um link), isto é, podemos interagir com várias outras páginas ou hiperlinks. Podemos utilizar estes mapas, por exemplo, em portais onde tornamos conhecida cada uma das sessões do site por meio de uma imagem. Também pode ser muito prático, em mapas geográficos onde cada cidade, estado ou ponto qualquer representa um link a uma página. Sendo assim, um mapa de imagem está composto por duas partes: A imagem propriamente dita que estará situada como de costume dentro da etiqueta <BODY> de nosso documento HTML. Um código, situado no interior da marcação <map>, que delimitará por meio de linhas geométricas imaginárias cada uma das áreas dos links apresentados na imagem. As linhas geométricas que delimitam os links, ou seja, as áreas dos links devem ser definidas por meio de coordenadas. Cada imagem é definida por umas dimensões de largura (X) e altura (Y) e cada ponto da imagem pode ser definido, portanto, dizendo a que altura (x) e largura (y) nos encontramos. Deste modo, a “esquina” superior esquerda corresponde à posição 0,0 e a “esquina” inferior direita corresponde às coordenadas X,Y. Se desejamos saber quais coordenadas correspondem a um ponto concreto de nossa imagem, o melhor é utilizar um programa de desenho gráfico como Photoshop ou Paint Shop_Pro. Imagem Em primeiro lugar precisamos de uma imagem apropriada para ser mapeada. Se a imagem possui áreas bem delimitadas, ela pode ser mapeada. Por exemplo, um mapa político com as unidades federativas. Coordenadas Uma vez escolhida a imagem, agora precisamos abrir esta imagem em um editor de imagens para encontrar as coordenadas que desejamos utilizar como link. Anotações: HTML Página 63 _______________________________________________________________________________ Exemplo completo. Parte 1 Vamos abrir o arquivo de imagem no Paint. Utilize a ferramenta retângulo ou selecionar do Paint para anotar a coordenada do vértice superior esquerdo e vértice inferior direito. Anotações: HTML Página 64 _______________________________________________________________________________ Parte 2 Ferramenta Retângulo Vértice superior esquerdo Coordenada As coordenadas aparecem na linha de status do Paint. Vértice inferior direito Coordenada Parte 3 Primeira parte do código Inserindo a imagem. O mapa da imagem exige um nome “interno”. Aqui estamos “desligando” a borda da imagem. HTML Página 65 _______________________________________________________________________________ Parte 4 Agora que já temos as coordenadas da imagem, vamos fazer o código completo. Segunda parte código shape = rect é o apelido para RECTANGLE ou retângulo. Para esta forma precisamos da coordenada do vértice superior direito e vértice inferior esquerdo. coords são as coordenadas que localizamos pelo Paint. href é onde indicamos o link de destino. alt indica um texto que será mostrado quando situarmos o mouse na área. Resultado HTML Página 66 _______________________________________________________________________________ Após salvar o arquivo com mapa.htm e executa-lo pelo navegador, posicione o cursor sobre o estado de São Paulo e observe que temos um link. Observe que na linha de status do navegador temos o link para o arquivo saopaulo.htm. Tipos de áreas: shape distintas. Existem três tipos de áreas distintas, suficientes para fazer quase qualquer tipo de figura. No desenho que acompanha estas linhas pode ser visto uma representação das áreas, que detalhamos a seguir. Shape Rect Cria uma área retangular. Para defini-la utilizam-se as coordenadas dos pontos da esquina superior esquerda e da esquina inferior direita. Tal como estão nomeadas tais coordenadas em nosso desenho, a área teria a seguinte etiqueta: <area shape="RECT" coords="X1,Y1,X2,Y2" href="#"> Shape Circle Cria uma área circular, que se indica com a coordenada do centro do círculo e o radio. De acordo com nosso desenho, a etiqueta de uma área circular teria esta forma: <area shape="CIRCLE" coords="X1,Y1,R" href="#"> Shape Poly Este tipo de área, poligonal, é a mais complexa de todas. Um polígono fica definido indicando todos seus pontos, mas atenção, pois temos que indicá-los em ordem, seguindo o caminho marcado pelo perímetro do polígono. Segundo nosso desenho e os nomes que demos aos pontos do polígono, a etiqueta <area> ficaria desta forma: <area shape="POLY" coords=" X1,Y1, X2,Y2, X3,Y3, X4,Y4" href="#"> Anotações:
Download
