HTML - Mapa de Imagens

Por -
No link http://www.criarweb.com/artigos/129.php é detalhado a criação de Mapa de Imagens.

Abaixo uma explicação resumida:

Explicamos detalhadamente o processo para criar mapas de imagens, ou seja, imagens que têm vários links associados em distintas áreas.Nos capítulos anteriores nos aprofundamos no elemento básico de navegação do web: O link hipertexto. Vimos que estes links são palavras, textos ou imagens que, ao clicar sobre eles, nos enviam a outras páginas ou zonas. 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 código, situado no interior da etiqueta , que delimitará por meio de linhas geométricas imaginárias cada uma das áreas dos links apresentados na imagem. As linhas geométricas que delimitan 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.


Cada área se indica com uma etiqueta , que tem os seguinte atributos: alt Para indicar um texto que será mostrado quando situarmos o mouse na área.
shape Indica o tipo de área.

"coords" As coordenadas que definem a área. Será um grupo de valores numéricos distintos dependendo do tipo de área (shape) que estivermos definindo.
href Para indicar o destino do link correspondente à área. Neste caso utilizamos umas áreas circulares (shape="CIRCLE"), que se definem indicando o centro do círculo - uma coordenada (X,Y) e o radio, que é um número inteiro que se corresponde com o número de pixels desde o centro até a borda do círculo.

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:



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:



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. De acordo com nosso desenho, a etiqueta de uma área circular teria esta forma:



Comentários

Postar um comentário

Postagens mais visitadas deste blog

Redação Ti Nota 10 - Klauss

Por -
Imagem
Neste post trago pra vocês a prova discursiva do Klauss Henry, que fechou a prova discursiva da área meio. Espero que ajude a nortear os estudos de vocês nessa parte discursiva. Pelo que vemos o importante é que apareça as palavras mágicas (Ishikawa, Pareto, análise de requisitos, metas gerais e específicas CMMI, PMO, BSC, missão institucional, Plano Diretor de TI, Alinhar TI e Negócios, Dominios COBIT - Aquisição e Implementação, Entrega e Suporte, Mon. e Avaliação e Planej e Organização, ISO 17799, CMMI, ITIL, ServiceDesk, as gerências do ITIL, PSI, GED), numa sequencia lógica coerente, detalhando apenas as partes mais relevantes, haja vista que o espeço é reduzido(20 linhas e 50 linhas). Abaixo a questão 3 e a redação da prova de TI área meio. Parabéns Klauss mais uma vez pela aprovação nas duas áreas!!!!! O cara é um monstrinho!!!! Abraços
Leia mais

Prova Discursiva nota 10 - Banca Cespe

Por -
Imagem
Procurando um pouco na internet chegamos até o site http://www.blogconcurseiradedicada.com/ que conseguiu resumir muito bem a prova discursiva nota 10 para a banca cespe. Vamos ao texto. Atendendo aos pedidos, a Concurseira Dedicada conseguiu uma Prova Discursiva nota 10 da banca Cespe, prova AJAJ TRT 10/2012. O espelho da discursiva e nota foi enviado pelo próprio candidato. Vamos à prova?? Um juiz do trabalho determinou, em ata de audiência, que o reclamado providenciasse o depósito de honorários prévios, como antecipação do numerário destinado ao perito e do numerário necessário ao pagamento das despesas com a perícia, que foi requerida pelo reclamante, não beneficiário de justiça gratuita, com o propósito de demonstrar seu direito à percepção, em sua remuneração, de adicional de periculosidade, dos reflexos dele decorrentes e de outros direitos. O advogado do reclamado registrou, em ata, o inconformismo de seu cliente em face do requerimento descrito, ...
Leia mais

Portugues - Orações

Por -
Diferença entre oração subordinada adverbial causal e coordenada (sindética explicativa ) Diferença entre oração subordinada adverbial causal e coordenada sindética explicativa É difícil, às vezes, distinguir uma oração subordinada adverbial causal de uma oração coordenada sindética explicativa. Eis alguns artifícios que podem auxiliar na distinção desses dois tipos de oração: a) Geralmente, a oração que antecede a oração coordenada explicativa tem o verbo no modo imperativo. "Fiquem quietos, que o professor já vem." Verbo no imperativo: fiquem. Oração coordenada sindética explicativa: que o professor já vem. b) A oração subordinada adverbial causal pode ser colocada no início do período, introduzida pela conjunção como, o que não ocorre com a coordenada sindética explicativa: "Não vim à aula PORQUE ESTAVA DOENTE." "COMO ESTAVA DOENTE, não vim à aula." Diferenças entre a concessiva e adversativa (Sintaxe ) A oração adv...
Leia mais