Mapa de imagem em HTML. Criando um mapa de imagem em atributos de tag HTML AREA

<А HREF=example.html >

Este HTML informa ao servidor que quando a imagem Mylmage.gif for clicada, um documento chamado example.html deverá ser retornado ao navegador.

Parâmetro ISMAP adicionado à tag para o exemplo dado, ativa o mapa de imagem. O link neste caso não é para um documento específico, mas para um arquivo de configuração do mapa de imagem contendo as coordenadas de todas as áreas ativas da imagem. O arquivo de configuração, geralmente com extensão MAP, é analisado por um programa CGI no servidor junto com as coordenadas do ponto de clique na imagem. Então, em vez da linha acima, você deve escrever:

<А HREF=MyImage.map>< IMG SRC=MyImage.gif ISMAP>< /A>

O link neste exemplo não é o endereço de outro documento HTML, mas sim um arquivo de configuração de mapa de imagem que contém coordenadas para cada área ativa da imagem, denominado Myimage.gif.

Observação

Ordem dos parâmetros da tag é arbitrário, entretanto, o parâmetro ISMAP geralmente é colocado por último.

O arquivo de configuração do mapa de imagem é normal arquivo de texto, que contém informações sobre as áreas ativas de uma determinada imagem. Cada imagem que será usada no modo mapa requer um arquivo de configuração separado.

Conselho

Cada cartão de imagem requer um arquivo de configuração separado. Crie o hábito de salvar o arquivo de configuração no mesmo diretório e com o mesmo nome da imagem associada a ele. Por exemplo: main_menu.gif e menu principal.map.

Existem dois formatos de arquivo de configuração de mapa de imagem, desenvolvidos pelo CERN e NCSA e que levam os nomes dessas organizações. Ambos os formatos contêm as mesmas informações, mas apresentam-nas de forma diferente. Ambos os casos utilizam os mesmos tipos de áreas, que são discutidos abaixo. Ao desenvolver mapas de imagens para uso em um servidor específico, você deve obter informações do administrador do sistema sobre o que foi aceito no servidor. este servidor maneira de suportar mapas de imagens.

Ambos os formatos utilizam áreas ativas na forma de retângulos, círculos e polígonos, podendo também especificar uma chamada área padrão, que caracteriza todos os pontos da área que não pertencem a nenhuma das áreas ativas. Se o usuário clicar dentro da imagem, mas fora de qualquer um dos pontos de acesso especificados, o URL será definido com o valor definido pelo tipo padrão.

Para cada área, é escrita uma URL no arquivo de configuração que será retornada ao usuário quando ocorrer um clique dentro daquela área. Este endereço pode ser escrito em forma relativa ou absoluta. Observe que o URL relativo deve ser definido em relação ao local do arquivo de configuração, não ao arquivo de imagem. A lista de áreas ativas no arquivo de configuração é lida a partir da primeira linha. Se dois escopos se sobrepuserem, o link cuja descrição do escopo aparece primeiro no arquivo de configuração será implementado.

Conselho

É recomendado sempre definir um link padrão no arquivo de configuração. O link padrão será implementado para áreas da imagem que não estão ativas. No caso mais simples, o URL padrão poderia simplesmente apontar para a página com informações úteis sobre como usar este cartão.

Formato CERN

O CERN é um centro científico europeu cujos temas de investigação são muito vastos. Foi aqui que se desenvolveu o conceito do sistema World Wide Web, que impulsionou todos os desenvolvimentos na área WWW. O CERN pode ser considerado o berço da Web. Quando surgiu a necessidade de desenvolver uma estrutura para arquivos de configuração de mapas de imagens, o CERN propôs o seguinte formato:

URL de coordenadas de tipo de área

Os valores dos pares de coordenadas X e Y são separados por vírgula e colocados entre parênteses. O formato CERN não permite comentários para explicar referências relacionadas a uma área específica. Os seguintes tipos de área podem ser usados: reta, círculo, polígono e padrão. Este formato permite que os nomes dos tipos de áreas sejam escritos de duas maneiras - tanto de forma abreviada quanto completa. Junto com os nomes de tipo fornecidos, os nomes retângulo, circ e polígono podem ser usados.

Aqui está um exemplo de registro de informações sobre áreas em um mapa de imagem no formato CERN:

rect (56.47) (357.265) http://www.anywhere.com/

circ (366.147) 109 http://www.anywhere.com/

polígono (534,62) (699,62) (698,236) (626,261) (534,235) (534,62)

http://www.anywhere.com/

Formato NCSA

O Centro Nacional para Aplicações de Supercomputação (NCSA) da Universidade de Illinois também fez contribuições significativas para o desenvolvimento da Web. O primeiro navegador gráfico popular, o programa Mosaic, foi criado aqui. A NCSA propôs um formato de arquivo de configuração que difere na forma de gravação do formato CERN. Este formato é assim:

coordenadas de URL area_type

Os seguintes tipos de área podem ser usados: retângulo, círculo, polígono, padrão e ponto.

As coordenadas X e Y são separadas por vírgulas, mas não estão entre parênteses. Este formato permite o uso de linhas de comentários. Qualquer linha que comece com um caractere # será tratada como um comentário e seu conteúdo será ignorado pelo analisador.

O formato NCSA oferece uma maneira ligeiramente diferente de definir áreas circulares (em comparação com o formato CERN e a versão cliente discutida abaixo). Uma área circular é definida pelas coordenadas de dois pontos - o centro e qualquer ponto situado no círculo.

Observação

O formato NCSA permite o uso de um tipo de área de ponto. Este tipo de área não é usado no formato CERN ou ao usar a versão cliente de mapas de imagem. A intenção dos criadores do formato era que se houvesse uma série de áreas pontilhadas, um clique do mouse ativasse o link mais próximo dos demais. Porém, a presença deste tipo de área entra em conflito essencialmente com o tipo de área padrão, pois ao utilizar o ponto e as áreas padrão simultaneamente, a implementação de um link definido pelo tipo de ponto só é possível se o mouse atingir exatamente o ponto determinado. Isto é bastante difícil e é improvável que crie condições confortáveis ​​​​ao trabalhar com tal documento. Atualmente, o tipo de ponto praticamente não é utilizado e a versão cliente dos mapas de imagens está cada vez mais desenvolvida.

Aqui está um exemplo de gravação de um arquivo de configuração no formato NCSA:

# Exemplo de gravação de um arquivo de configuração

reto http://www.anywhere.com/ 56.47 357.265

círculo http://www.anywhere.com/ 366.147 366.256

poli http://www.anywhere.com/ 534,62 699,62 698,236 626,261 534,235 534,62

Versão cliente do mapa de imagem

A versão cliente do cartão de imagem permite colocar todas as informações sobre a configuração do cartão em um arquivo HTML no qual a imagem está incorporada. No caso de utilizar a opção servidor, o navegador envia uma solicitação ao servidor para obter o endereço do link selecionado e aguarda uma resposta com as informações solicitadas. Isso pode exigir tempo de espera adicional. Com a versão cliente, o número de chamadas ao servidor diminui e a velocidade de acesso à informação aumenta. Nesta opção também não há necessidade de entrar em contato com o servidor para editar a configuração do mapa, portanto todo o trabalho de criação de um mapa de imagem pode ser feito localmente, simultaneamente à edição do arquivo HTML. Diferentemente da opção servidor, que exigia um arquivo de configuração separado para cada mapa de imagem, nesta opção a configuração do mapa pode ser localizada diretamente no mesmo documento HTML no qual o link da imagem de referência é especificado. Na maioria das vezes, é exatamente isso que eles fazem, embora seja aceitável salvar a configuração da placa em um arquivo separado e fornecer um link para ela.

Para indicar que uma imagem incorporada é uma imagem de referência para o mapa, use o parâmetro tag USEMAP . O valor do parâmetro USEMAP é uma referência a uma descrição da configuração do mapa.

Observação

O navegador Netscape não permite um arquivo separado para descrever a configuração da placa.

Por exemplo:

Neste exemplo, a imagem armazenada em um arquivo chamado logo.gif é a imagem de referência para o mapa de imagens do lado do cliente.

A descrição da configuração do hotspot deve estar localizada no mesmo arquivo desta linha de código HTML e, para este exemplo, denominada logo.

Marcação<МАР>

Uma tag especial é usada para descrever a configuração das áreas do mapa de imagem<МАР>, cujo único parâmetro é NAME. O valor do parâmetro NAME especifica o nome que deve corresponder ao nome em USEMAP. Marcação<МАР>requer uma tag de fechamento. Dentro deste par de tags deve haver descrições de áreas ativas do mapa, para as quais uma tag especial é usada .

Marcação

Cada etiqueta individual especifica uma região ativa. A tag final não é obrigatória. As regiões ativas podem se sobrepor. Se um determinado ponto pertencer simultaneamente a várias áreas ativas, será implementado o link cuja descrição se encontra em primeiro lugar na lista de áreas.

Parâmetros de etiqueta são SHAPE, COORDS, HREF, NOHREF, TARGET e ALT. Consideremos a finalidade desses parâmetros.

Parâmetro FORMA

O parâmetro SHAPE determina a forma da área ativa. Os valores válidos são retângulo, círculo, poli, padrão. Esses valores definem áreas na forma de retângulo, círculo ou polígono. O último valor – padrão – define todos os pontos da área. Se o parâmetro SHAPE for omitido, o valor padrão é rect, ou seja, uma área em forma de retângulo.

Aviso

Não confunda a área do tipo default, que descreve todos os pontos da imagem, e o valor padrão do parâmetro SHAPE, que é reto.

Observação

Diferentemente da versão servidor, onde a área padrão define todos os pontos da imagem que não pertencem a nenhuma área ativa, para a opção cliente a área padrão define todos os pontos da imagem. Portanto, neste caso, a descrição da área padrão deverá estar localizada em último lugar na lista de áreas ativas. Se, por exemplo, a descrição da área padrão for colocada primeiro, então o link definido por esta área será sempre implementado para a versão cliente, e todos os outros links serão ignorados (é assim que este tipo de área é implementado no Netscape ). Para a versão do servidor, a localização da descrição da área padrão não importa. Essa diferença é levada em consideração nos exemplos dados no final do capítulo.

Conselho

Observe também que nem todos os navegadores suportam o tipo de área padrão. Em particular, o Microsoft Internet Explorer não permite esse tipo de escopo. Portanto, em vez de uma área do tipo padrão, podemos recomendar definir uma área retangular com dimensões iguais ao tamanho de toda a imagem. Naturalmente, tal área deve ser descrita por último. Isso é exatamente o que alguns programas de edição de mapas de imagens fazem, o que será discutido a seguir.

Parâmetro COORDES

O parâmetro COORDS especifica as coordenadas de uma única área ativa. O valor do parâmetro é uma lista de coordenadas dos pontos que definem a área ativa, separadas por vírgulas. As coordenadas são escritas como números inteiros não negativos. A origem está localizada no canto superior esquerdo da imagem, que corresponde ao valor 0,0. O primeiro número determina a coordenada horizontal, o segundo - a vertical. A lista de coordenadas depende do tipo de área.

Para uma área do tipo retângulo, as coordenadas dos cantos superior esquerdo e inferior direito do retângulo são especificadas.

Para uma área do tipo círculo, três números são especificados - as coordenadas do centro do círculo e o raio.

Para uma área do tipo poli, as coordenadas dos vértices do polígono são especificadas na ordem necessária. Observe que o último ponto da lista de coordenadas não precisa coincidir com o primeiro. Se não corresponderem, o navegador conectará automaticamente o último ponto ao primeiro ao interpretar os dados para aquela forma de região. Diferentes editores de mapas de imagens funcionam de maneira diferente nesse aspecto - alguns adicionam o primeiro ponto ao final da lista, enquanto outros não. As restrições quantitativas quanto ao número de vértices são bastante grandes e cobrem quase todas as necessidades concebíveis. Pelo menos um polígono com 100 vértices é processado de forma confiável por todos os principais navegadores. Existe uma limitação associada à própria linguagem HTML, segundo a qual uma lista não pode conter mais de 1024 valores. O polígono pode muito bem ser não convexo.

A área de texto padrão não requer a especificação de coordenadas.

Parâmetros HREF e NOHREF

As opções HREF e NOHREF são mutuamente exclusivas. Se nenhum desses parâmetros for especificado, considera-se que a região não possui link. A mesma coisa define explicitamente o parâmetro NOHREF, que não requer um valor. O parâmetro HREF especifica o endereço do link, que pode ser escrito de forma absoluta ou relativa. As regras para escrever coincidem completamente com as regras para escrever links em uma tag<А>.

O parâmetro NOHREF é útil para excluir parte da região ativa. Deixe, por exemplo, você precisar criar uma área ativa na forma de um anel. Este tipo de área não está incluída na lista de áreas possíveis, mas pode ser implementada especificando duas áreas circulares. Para fazer isso, você deve primeiro definir uma área de raio menor e especificar NOHREF como parâmetro. Em seguida, você precisa especificar uma área de raio maior com o centro no mesmo ponto e especificar o link desejado. Então a área dentro do anel, definida por dois círculos de raios diferentes, terá a ligação necessária. Usar uma abordagem baseada na sobreposição mútua de áreas permitirá construir áreas de formas muito diversas.

Parâmetro TARGET

O parâmetro TARGET é usado ao trabalhar com quadros. Sua finalidade é indicar o nome do quadro onde será colocado o documento baixado neste link. Para obter mais informações sobre como usar esta opção, consulte o capítulo sobre como trabalhar com quadros.

Parâmetro Alt

O parâmetro ALT permite escrever um texto alternativo para cada uma das áreas ativas da imagem. Essencialmente, este texto desempenhará apenas o papel de um comentário para o criador do documento. Se o texto alternativo escrito para toda a imagem (na tag ), é usado para exibi-lo na tela ao trabalhar com o carregamento de imagem desabilitado, então o texto alternativo para áreas ativas nunca aparecerá na tela.

Aqui está um exemplo de especificação de áreas de vários tipos:

<МАР NAME="logo">

!}

HREF="p.htm" ALT="Polígono"> !}

Este trecho de código é colocado em um arquivo HTML. Freqüentemente, todas as descrições do mapa de imagem de um documento são reunidas e colocadas no início da seção documento. Essa abordagem está próxima dos programadores, que geralmente, ao escrever programas, separam a parte descritiva do programa da parte executável, o que simplifica a compreensão do código escrito e às vezes é determinado pelos requisitos do compilador.

Combinação de opções de cliente e servidor

É aceitável utilizar uma opção combinada, em que ambos os parâmetros - USEMAP e ISMAP - sejam definidos para a mesma imagem, o que implica a utilização desta imagem como referência tanto para a opção cliente quanto para a opção servidor. USEMAP é o parâmetro dominante. Isso significa que um navegador que suporte a opção cliente usará USEMAP, ignorando as instruções do parâmetro ISMAP. Aqueles navegadores que não suportam a opção cliente e não entendem a finalidade do parâmetro USEMAP, de acordo com as regras gerais do HTML, irão ignorar sua presença e implementarão a opção servidor quando detectarem a presença do parâmetro ISMAP. A opção combinada é mais confiável, mas requer dados para configurar áreas para ambas as opções. Hoje em dia, a necessidade de utilizar a opção combinada é cada vez menor, uma vez que todos os principais navegadores suportam a opção cliente. No entanto, as páginas iniciais do Netscape, que provavelmente qualquer usuário do navegador Netscape já encontrou, são feitas em uma versão combinada.

Aqui está um exemplo de uma opção combinada:

<А HREF="http://www.anywhere.com/testmap/logo.map">

Observação

O parâmetro USEMAP também é dominante sobre o link definido pela tag<А>. Portanto, se a imagem usada para implementar o conceito de mapa de imagem na versão cliente for escrita dentro do escopo da tag<А HREF>, o link identificado pela última tag será ignorado pelos navegadores que suportam a opção do lado do cliente. Tenhamos, por exemplo, o seguinte fragmento:

<А HREF=NoMaps.htm> .

Por um lado, a imagem inteira é um link para um documento denominado NoMaps.htm. Por outro lado, a presença do parâmetro USEMAP define esta imagem como a imagem de referência para o mapa de imagens correspondente. A referência ao documento NoMaps.htm será ignorada devido à presença do parâmetro USEMAP e independentemente de outros fatores.

Recursos de uso de mapas de imagens

Observemos algumas funcionalidades na utilização de mapas de imagens na versão cliente. Quando o usuário move o mouse dentro de uma imagem que implementa uma opção do lado do cliente, a URL correspondente é exibida na barra de status na parte inferior do navegador Netscape. Na opção server-side, a URL não é exibida porque as informações estão hospedadas em um servidor, que não fica acessível até que o usuário clique na imagem. A primeira opção é mais informativa, pois o usuário vê os endereços dos links e também pode determinar a localização da imagem sem links. A versão do servidor exibe números que são coordenadas relativas do mouse na imagem e não fornece nenhuma informação sobre os links e sua presença.

Meios alternativos de navegação

O uso de mapas de imagens tornou-se comum, mas não devemos esquecer que nem todos os usuários da Web podem utilizar gráficos ou desejam trabalhar com o carregamento de imagens desabilitado para reduzir o tempo de transferência de arquivos. Portanto, você precisa fornecer algum outro meio alternativo de navegação na página para eles. Caso contrário, os usuários não conseguirão encontrar na página e, consequentemente, implementar os links que são definidos apenas pelo mapa de imagem.

Como alternativa, você pode criar uma seção separada com uma descrição de texto dos links e URLs correspondentes. Você também pode criar um link para menu de texto, que possui as mesmas conexões do mapa de imagem. Qualquer que seja a abordagem escolhida, você precisa ter certeza de que todos os links estão disponíveis para o modo de texto do navegador.

Vamos dar um exemplo de documento da vida real em que essas questões são resolvidas. Em uma das páginas da conhecida empresa Hewlett-Packard, é mostrado um fragmento que contém um mapa de imagens. No meio da página há uma lista de dez tipos diferentes de equipamentos, cada um deles com um link para o documento correspondente. Na verdade, há uma imagem na página, que é a imagem de referência do mapa. Nesta imagem estão destacadas dez zonas retangulares, que são regiões ativas.

Se você carregar esta página com o modo de carregamento de imagens desabilitado, você verá uma imagem onde, em vez de um mapa de imagens, há apenas um pequeno ícone mostrando a localização da imagem e. texto que foi definido como um texto alternativo para toda a imagem fornecida. Obviamente, você não poderá usar os links aqui. Para solucionar este problema, abaixo da imagem existe um menu de texto normal, que repete completamente a lista mostrada na imagem, com os links correspondentes. Portanto, se o carregamento da imagem estiver desabilitado, o usuário ainda poderá implementar as transições de link necessárias utilizando o menu de texto duplicado. Ao carregar uma imagem, o menu de texto apenas duplica as opções de seleção de links.

Ferramentas de mapeamento de imagens

A criação de mapas de imagens requer duas etapas: preparar uma imagem de referência na qual as regiões ativas serão posteriormente definidas e desenvolver um arquivo de configuração que descreva os parâmetros geométricos das regiões ativas. Preparar uma imagem que servirá de base para um mapa de imagens não é diferente de preparar imagens normais incorporadas em páginas da Web. Para fazer isso, você pode usar qualquer editor gráfico ou usar uma imagem pronta.

Na segunda etapa, você precisa marcar as áreas ativas na imagem e combiná-las com os endereços dos links correspondentes. Preparar o arquivo de configuração é a etapa mais difícil na criação de mapas de imagens. Em princípio, é possível definir manualmente os limites das áreas ativas na imagem. Por exemplo, ao trabalhar em um editor gráfico, você pode marcar pontos individuais, registrar suas coordenadas e, em seguida, criar um arquivo que descreva os parâmetros geométricos das áreas selecionadas. No entanto, esta abordagem é extremamente inconveniente e complicada.

Para automatizar o processo de marcação de áreas em uma imagem, existem vários programas, muitos deles muito semelhantes entre si. Eles permitem criar e modificar arquivos de configuração trabalhando diretamente com a imagem na tela. A maioria dos programas são utilitários independentes que operam de forma independente e são essencialmente complementos para editores HTML. Esses programas permitem salvar o arquivo de configuração gerado na área de transferência do Windows ou em um arquivo no disco. No primeiro caso, uma opção típica é a operação conjunta de um programa de edição de mapas de imagens e algum tipo de editor HTML ou editor de texto normal. Se o programa permitir que você salve o arquivo de configuração no disco, ele poderá ser usado de forma totalmente autônoma. Todos os programas permitem marcar áreas de três tipos principais em uma imagem - reto, círculo e poli. Alguns editores suportam o tipo padrão. Talvez o único critério para escolher um programa de edição de mapas de imagens seja a facilidade de uso, já que todos os programas são muito semelhantes em propriedades funcionais. Se a interface do programa lhe parecer inconveniente, você pode parar de usá-lo e escolher outra.

Vejamos alguns dos programas existentes.

Programa MapEdit

Um dos programas mais simples e famosos para edição de arquivos de configuração é o utilitário MapEdit, desenvolvido por Thomas Boutell. Este programa existe há vários anos e foi implementado para várias plataformas. Em particular, existem versões para Windows 3.x e Windows 95/98/NT. Tal como acontece com a maioria dos programas, havia várias versões deste utilitário. Atualmente a versão mais recente disponível para Windows 95/98/NT é a versão 2.6 (setembro de 1999). Informações sobre o programa podem ser obtidas em:

http://www.boutell.cora/mapedit/

MapEdit é shareware e tem um período de avaliação de 30 dias, após o qual é necessário registro. O programa é pequeno - a distribuição ocupa cerca de 300 KB e ao mesmo tempo possui quase todos os recursos necessários.

O programa permite editar arquivos de configuração tanto para a versão do servidor (nos formatos NCSA e CERN) quanto para a versão do cliente. É possível criar visualmente áreas ativas na forma de retângulos, círculos e polígonos, bem como definir o endereço do link para a área padrão.

Vamos dar uma breve olhada nas principais características deste programa. Após iniciar o MapEdit, a janela principal aparece, contendo uma tela inicial (Fig. 6.3) e um menu. É possível editar arquivos existentes para versões de mapas de imagens de servidor e cliente. Também é possível criar um novo arquivo de configuração, mas isso só se aplica à versão do servidor. A versão cliente requer um arquivo HTML fonte com links para imagens incorporadas que serão usadas como referência para mapas de imagens.

Observação

A incapacidade de criar um novo arquivo HTML usando MapEdit pode ser facilmente contornada. Para fazer isso, você deve executar o programa no modo de criação de arquivo em um dos formatos do lado do servidor (NCSA e CERN), realizar todas as ações necessárias e, em seguida, salvar os resultados no modo Salvar como, especificando o formato do Mapa do Lado do Cliente. Será criado um arquivo HTML, que posteriormente poderá ser usado como um fragmento pronto de um documento HTML.

Suponha que precisemos criar um novo arquivo de configuração para a versão do servidor dos mapas de imagens. Selecione Abrir/Criar Mapa no menu

Arquivo. Uma caixa de diálogo aparecerá (Fig. 6.4), na qual você deverá especificar o nome do arquivo de configuração a ser criado (por exemplo, Blazons.map), especificar um arquivo de imagem existente e o formato do arquivo criado (NCSA ou CERN ). O arquivo de imagem pode estar no formato GIF, JPG ou PNG.

Arroz. 6. 3 . Tela inicial do MapEdit

Arroz. 6. 4 . Caixa de diálogo Abrir/Criar Mapa para criar um arquivo de configuração

Observação

Muitos dos programas de interpretação de arquivos de configuração do lado do servidor exigem que o arquivo tenha uma extensão MAP. Recomenda-se sempre seguir esta regra.

O programa carregará o arquivo de imagem selecionado, no qual será possível marcar as áreas ativas (Fig. 6.5).

Para fazer isso, selecione a forma da área ativa - retângulo, círculo ou retângulo clicando no ícone correspondente ou selecionando o item desejado no menu Ferramentas (Fig. 6.6).

Outras ações são realizadas diretamente na imagem marcando pontos com o mouse. Para uma área retangular, os cantos superior esquerdo e inferior direito são marcados, para uma área circular - o centro e um dos pontos do círculo, para um polígono seus vértices são especificados. Por exemplo na Fig. A Figura 6.5 mostra o caso em que três áreas ativas de formatos diferentes já estão marcadas na imagem. Observe que as linhas que limitam as áreas ativas servem apenas para visualizá-las ao trabalhar no editor e não alteram em nada o arquivo de imagem. A imagem neste exemplo contém essencialmente três imagens separadas (são representados os brasões das cidades de São Petersburgo, Tomsk e Yakutsk), o que geralmente não é típico de imagens realistas. Porém, para imagens contendo, por exemplo, um conjunto de botões de controle, esta situação é bastante típica.

Arroz. 6. 5 . Uma imagem com diferentes tipos de pontos de acesso rotulados

Arroz. 6. 6 . Menu Ferramentas

Arroz. 6. 7 . Caixa de diálogo URL do objeto para especificar um URL e um comentário opcional

Após marcar qualquer uma das áreas, deverá especificar o endereço do link correspondente a esta área, bem como informações de comentários (Fig. 6.7). Você pode definir um endereço de link padrão para a área, que será implementado para a parte da área da imagem que não está incluída em nenhuma das áreas ativas (Fig. 6.8).

Após marcar as áreas, você pode inspecionar visualmente ou alterar as áreas ativas criadas usando o item Teste do menu Editar. O último passo é salvar os resultados como um arquivo de configuração (item Salvar no menu Arquivo). Você também pode usar o item Salvar como, no qual você especifica o formato necessário para salvar o arquivo (Fig. 6.9).

Arroz. 6. 8 . Caixa de diálogo URL padrão para definir o URL padrão para o escopo

Arroz. 6. 9 . Caixa de diálogo Salvar como comando

Observação

Versões mais antigas do MapEdit continham um pequeno bug relacionado à definição do formato do arquivo de configuração salvo. Se o formato CERN foi especificado ao criar o arquivo, ao salvar os dados no modo Salvar, o arquivo ainda será salvo no formato NCSA. É possível criar um arquivo no formato CERN somente ao usar o modo Salvar como e especificar o formato necessário.

Para este exemplo será criado um arquivo chamado Blazons.map contendo as seguintes informações (formato NCSA):

#Brasão da cidade de Tomsk

rect www.ifmo.ru/sergeev/tomsk.htm 35.58 187.244

#Brasão da cidade de Yakutsk

círculo www.ifmo.ru/sergeev/jakutsk.htm 364.150 468.150

#Brasão da cidade de São Petersburgo

poli www.ifmo.ru/sergeev/Spb.htm 537,61 700,61 700,230 618,256 537,231

Os mesmos dados salvos pelo editor no formato CERN ficarão assim:

reto (35,58) (187,244) www.ifmo.ru/sergeev/tomsk.htm círculo (364,150) 104 www.ifmo.ru/sergeev/jakutsk.htm poli (537,61) (700,61) (700,230) (618.256) (537.231) www.ifmo.ru/sergeev/Spb.htm

Observe que comentários não são permitidos neste formato, portanto essas informações serão perdidas quando o arquivo for salvo.

Vamos considerar a tarefa de criar uma versão cliente de um mapa de imagem. Para resolver este problema, você deve ter um arquivo fonte HTML contendo pelo menos uma imagem incorporada. Este arquivo fonte pode ser criado antecipadamente com qualquer editor de texto ou editor HTML especial. Digamos que exista um arquivo chamado CSIM.HTM contendo o seguinte código:

Este arquivo deverá ser aberto no editor MapEdit (Fig. 6.10). Diferentemente da opção em que o arquivo de configuração foi criado, aqui não é necessário especificar o nome do arquivo de imagem no item de menu Abrir/Criar Mapa.

Arroz. 6.1 0 . Caixa de diálogo Abrir/Criar Mapa para abrir um arquivo HTML existente

Arroz. 6.1 1 . Caixa de diálogo Selecionar imagem embutida

Após abrir o arquivo HTML de origem, o editor exibirá uma caixa de diálogo com uma lista de todas as imagens integradas, da qual você precisa selecionar a que deseja (Fig. 6.11). Claro que o arquivo com a imagem selecionada deve existir.

O trabalho posterior na marcação de áreas ativas é completamente idêntico ao caso anterior. Depois de salvar os resultados da marcação, o arquivo de origem será alterado e, no exemplo dado, ficará assim:

href="tomsk.htm">

href="jakutsk.htm">

coords="537,61,700,61, 700, 230, 618, 256, 537,231" href="Spb.htm">

Observe que o editor atribui automaticamente um nome para descrever o mapa de imagem que corresponde ao nome do arquivo de imagem de referência. Para este exemplo, o arquivo com a imagem foi denominado Blazons.gif, portanto o parâmetro name da tag<тар>foi atribuído o valor "Blazons".

Observação

O editor MapEdit não funciona corretamente com caracteres do alfabeto russo. Algumas letras russas desaparecem quando o arquivo é salvo e espaços aparecem em seu lugar. A maneira mais fácil de sair dessa situação é adicionar texto em russo após terminar o trabalho no editor.

Mapeie ISTO!

Outro utilitário para criação e edição de arquivos de configuração de mapas de imagens é o programa Map THIS!, cujas informações podem ser obtidas em:

http://galadriel.ecaetc.ohio-state.edu/tc/mt/.

Trabalhar com este programa é ideologicamente semelhante ao programa MapEdit. A base do trabalho com o programa é o desenho visual das áreas ativas com posterior salvamento dos resultados em um arquivo em um dos formatos selecionados. O editor suporta formatos de mapa de imagem do lado do servidor e do lado do cliente (NCSA e CERN). As imagens podem ser carregadas de arquivos GIF e JPG.

Aqui estão exemplos de arquivos de configuração criados por este programa. Para o exemplo dado na seção anterior, o arquivo salvo no formato NCSA ficaria assim:

#$MTIMFH

#$-:Arquivo de mapa de imagem criado por Map THIS!

#$-:Mapeie ISTO! editor de mapas de imagens gratuito por Todd C. Wilson

#$-:Por favor, não edite linhas que começam com "#$"

#$VERSÃO:1.30

#$TITLE: Brasões

#$DESCRIPTION:Versão do servidor do mapa de imagem

#$DATE:Terça-feira, 14 de setembro, 12:10:42, 1999

#$PATH:C:\Arquivos de Programas\Mapthis\

#$GIF:Brasões.gif

#$FORMAT:ncsa

#$EOH

padrão padrão.htm

# Brasão da cidade de Tomsk

reto Tomsk.htm 33.60 191.246

# Brasão da cidade de Yakutsk

círculo Jakutsk.htm 366.147 366.256

# Brasão da cidade de São Petersburgo

poli Spb.htm 534,62 699,62 698,236 626,261 534,235 534,62

Ao contrário do programa MapEdit, este editor grava muitas informações de comentários no arquivo de saída, incluindo breves informações sobre o próprio programa, a data em que o arquivo foi criado, etc. linha, o editor adiciona um símbolo $ para linhas de comentário, criado pelo próprio editor. Preste atenção na quarta linha do código acima, que pede para você não editar os comentários inseridos pelo editor.

O mesmo exemplo salvo no formato CERN ficaria assim:

rect (4096.4096) (4096.4096) mt:#$MTIMFH

rect (4096,4096) (4096,4096) mt:#$-:Arquivo de mapa de imagem criado por Map THIS!

rect (4096,4096) (4096,4096) mt:#$-:Mapeie ISTO! editor de mapas de imagens gratuito

por Todd C. Wilson

rect (4096,4096) (4096,4096) mt:#$-:Por favor, não edite as linhas que começam

com "#$"

rect (4096.4096) (4096.4096) mt:#$VERSÃO:1.30

rect (4096,4096) (4096,4096) mt:#$TITLE: Brasões

rect (4096,4096) (4096,4096) mt:#$DESCRIPTION: Versão do servidor

mapas de imagens

rect (4096.4096) (4096.4096) mt:#$

rect (4096.4096) (4096.4096) mt:#$DATA:Terça-feira, 14 de setembro, 12:10:42, 1999

rect (4096,4096) (4096,4096) mt:#$PATH:C:\Arquivos de Programas\Mapthis\

rect (4096.4096) (4096.4096) mt:#$GIF:Blazons.gif

rect (4096.4096) (4096.4096) mt:#$FORMAT:cern

rect (4096.4096) (4096.4096) mt:#$EOH

padrão padrão.htm

rect (4096,4096) (4096,4096) mt:# Brasão da cidade de Tomsk

retângulo (33,60) (191.246) Tomsk.htm

rect (4096,4096) (4096,4096) mt:# Brasão da cidade de Yakutsk

circ (366.147) 109 Jakutsk.htm

rect (4096,4096) (4096,4096) mt:# Brasão da cidade de São Petersburgo

polígono (534,62) (699,62) (698,236) (626,261) (534,235) (534,62) Spb.htm

Como você pode ver no código acima, o editor utiliza uma técnica um tanto artificial para armazenar comentários, tanto inseridos pelo usuário quanto gerados pelo próprio programa. Lembramos que o formato CERN não permite especificar linhas de comentários, então o editor cria uma linha como

reto (4096.4096) (4096.4096),

no final do qual você pode colocar qualquer texto. Em essência, tal linha descreve um retângulo, que está obviamente localizado fora da tela, portanto sua presença não importa. É claro que, neste caso, o texto do arquivo de configuração torna-se muito mais complicado e inconveniente de ler, o que, no entanto, não interfere no funcionamento dos programas. Esta técnica de salvar comentários pode ser adotada.

O mesmo exemplo, salvo como um arquivo HTML (para a versão cliente dos mapas de imagens), terá a seguinte aparência:

<МАР NAME="Blazons">

ALT="Brasão da cidade de Tomsk"> !}

ALT="Brasão da cidade de Yakutsk"> !}

HREF="Spb.htm" ALT="Brasão de armas da cidade de São Petersburgo"> !}

Aqui, ao contrário do programa MapEdit, o nome do mapa da imagem deve ser especificado manualmente, portanto pode não coincidir com o nome do arquivo com a imagem de referência.

Programa Cross Eye

Programa editor de arquivos de configuração CrossEye, criado pela famosa empresa australiana Sausage Software. Este programa será bem recebido pelos fãs do popular editor HTML HotDog, já que foi criado pela mesma empresa e possui uma interface muito atrativa e bem-humorada.

Informações sobre o pacote CrossEye podem ser obtidas em:

http://www.sausage.com.au.

As características distintivas do programa são o tamanho bastante grande do kit de distribuição (cerca de 2,5 MB), bem como o curto período de tempo (14 dias) durante o qual pode ser usado em modo de avaliação. Tamanho grande programas são típicos para tudo programas, criado pela Sausage Software, o que aparentemente se deve à escolha das ferramentas utilizadas para o desenvolvimento (Visual Basic).

Infelizmente, o programa não possui várias propriedades necessárias. Por exemplo, não há capacidade de ler um arquivo HTML existente, portanto é impossível editar um mapa de imagem existente que foi criado anteriormente. Também não é possível salvar seu trabalho diretamente em um arquivo HTML. Salvar os resultados só é possível em um arquivo com extensão especial EYE, que possui formato binário e poderá ser utilizado futuramente apenas neste editor. O código HTML gerado é gravado na área de transferência do Windows, de onde pode ser copiado para qualquer editor de texto.

Como em todos os editores descritos acima, a criação e edição das áreas ativas são feitas diretamente na imagem, mas a imagem é carregada em uma janela cujo tamanho, por motivos desconhecidos, não pode ser alterado. Se a imagem for maior que a janela, você poderá rolar para visualizar a imagem, mas não poderá definir uma área ativa que se estenda além da janela de visualização.

Para o mapa de imagem do lado do cliente, o editor não oferece a definição de um URL padrão para a área. Isso pode ser feito propositalmente, pois nem todos os navegadores suportam o tipo de área padrão. No entanto, os editores descritos acima resolvem este problema de forma muito elegante, substituindo automaticamente a área padrão por uma área retangular com dimensões iguais às dimensões da imagem.

As deficiências são, de certa forma, compensadas por certos recursos adicionais do editor. Em particular, você pode descobrir que o papagaio, visível no canto superior direito da imagem acima, se chama Polly. Ele é bastante falante e os usuários que trabalham em um computador equipado com placa de som, de vez em quando ouvirão as exclamações de um papagaio, que, no entanto, nada têm a ver com as ações que estão sendo realizadas. E em um deles caixas de diálogo As configurações do editor possuem até um item especial que permite calar a boca do pobre papagaio. Aqui está um exemplo de serviço de primeira linha. Aparentemente, graças às propriedades listadas, a classificação deste editor é estimada http://www.tucows.com, é muito elevado, o que não se pode dizer dos dois programas acima descritos.

Em última análise, a escolha do editor para criar mapas de imagens fica a critério do usuário.

Prós

• Os mapas de imagens permitem definir qualquer formato para a área de referência, o que é especialmente útil para indicar uma área geográfica. Portanto, os mapas de imagens são mais frequentemente usados ​​em áreas geográficas.
• É mais conveniente trabalhar com uma imagem - você não precisa se preocupar em juntar fragmentos individuais ao cortar, e a imagem pode ser facilmente colocada no lugar certo.

Contras

• Quando a área do link tem um formato complexo, a quantidade de código HTML aumenta. O contorno é aproximado por um conjunto de segmentos retos, para cada ponto de tal segmento, duas coordenadas devem ser especificadas, e o número total de tais pontos pode ser bastante grande.
• Conseqüentemente, a complexidade da especificação de coordenadas aumenta. Não é conveniente especificá-los manualmente, então você tem que usar programas especiais, que mostram áreas visualmente e permitem editá-las.
• Ao alterar a imagem, por exemplo, ao aumentar a escala, será necessário redefinir as coordenadas de todas as áreas de referência.
• Vários efeitos disponíveis ao cortar uma imagem em fragmentos não podem ser aplicados a cartões de imagem: efeito de rolamento, animação parcial, otimização individual de imagens para carregamento rápido.
• Não há limites de link claramente definidos. Portanto, esses limites devem ser destacados por diferentes meios diretamente na imagem. Se a imagem não carregar por algum motivo, a compreensão do conjunto de links se tornará muito problemática.

Do ponto de vista da conveniência do usuário, os mapas de imagens têm apenas uma vantagem - a inclusão de links de vários formatos. Isso adiciona clareza à apresentação das informações - não estamos limitados ao formato retangular do link e podemos usar links de configuração complexa para nossos próprios propósitos.

Os cartões de imagem são implementados em dois várias opções- servidor e cliente. Ao utilizar a opção servidor, o navegador envia uma solicitação ao servidor para obter o endereço do link selecionado e aguarda uma resposta com as informações necessárias. Esta abordagem requer mais tempo para esperar pelo resultado e arquivos separados para cada cartão de imagem.

Na versão cliente, o mapa está localizado no mesmo documento HTML que o link para a imagem. Para indicar que uma imagem é um mapa, use o atributo usemap do elemento . O valor é um ponteiro para a descrição da configuração do cartão, que é definida usando o elemento

Exemplo 1: Criando um mapa de imagem

Dentro do contêiner

Elemento tem os seguintes atributos.

• shape - define o formato da área ativa. A forma pode ter a forma de um círculo (círculo), retângulo (retângulo), polígono (poli).
• alt – Adiciona texto alternativo para cada área. Serve apenas como comentário ao link, pois não é exibido na tela. Atributo obrigatório se href estiver presente.
• título - exibe uma dica de ferramenta quando você passa o mouse sobre uma área.
• href - especifica o endereço do documento para onde ir; seu efeito é semelhante a um atributo de elemento semelhante; .
• coords - define as coordenadas da área ativa. As coordenadas são medidas em pixels a partir do canto superior esquerdo da imagem, que corresponde ao valor 0, 0. O primeiro número é a coordenada horizontal, o segundo é a coordenada vertical. A lista de coordenadas depende do formato da área.

Para um círculo, três números são indicados - as coordenadas do centro do círculo e o raio.