Se você não conseguir editar a wiki após o login, você precisará solicitar direitos de edição usando este formulário. Você será notificado assim que tais direitos de edição lhe forem concedidos.

Ajuda:Imagem mapas

Da wiki FamilySearch Wiki
Saltar para a navegação Saltar para a pesquisa

Este artigo fornece acesso a um editor de imagens de mapas e instruções passo a passo para a criação de vários links dentro de uma única imagem.


Help-content.png Este "artigo de ajuda" irá guiá-lo como você editar na Wiki. Veja Editar e contribuir para mais artigos de ajuda.

A extensão ImageMap para o software MediaWiki permite que você insira imagens com links clicáveis ​​em artigos na wiki. Com a extensão ImageMap, você pode fazer uma imagem inteira servir como um link para um artigo diferente, especificar uma determinada área dentro da imagem, ou você pode selecionar várias áreas dentro essa imagem para conectar-se a diferentes artigos. A extensão ImageMap é uma ferramenta poderosa e flexível, mas porque ele é codificado em HTML e define regiões através de coordenadas, muitos usuários podem achar que é difícil de usar no início. Este guia irá mostrar-lhe a maneira mais fácil de usar a extensão ImageMap para usar uma imagem para conectar-se a um outro artigo.

Nota:Não é necessário o uso de uma imagem para adicionar um link para uma imagem inteira, isso pode ser feito através da adição de um link de imagem.


Imagens de Mapas na Wiki são tão fáceis quanto 1-2-3![editar | editar código-fonte]

Isto é um   esboço condensado  deste artigo com links para os detalhes que se seguem. "


ONE. Usanfo o editor online

  • Copie o Localizador de Recurso Uniforme (URL) da página de imagem para uma imagem já enviada para a wiki. Use o mouse "clique direito" e escolha a opção "Copiar endereço da imagem". Não utilize a URL do navegador que não vai funcionar.
  • Abra o mapa de imagem externa editor e cole a URL copiada na caixa como mostrado na imagem abaixo para que sua imagem seja exibida no editor e o editor está pronto para aceitar sua entrada.
  • Definir as áreas da imagem que você deseja atuar como links. O uso adequado de um mapa de imagem poderia sugerir em qualquer lugar, pelo menos 2 e, possivelmente, centenas de tais áreas definida.
  • Digite ou cole a ligação informações (o destino do link e descrição) para o editor, por isso é adicionado à coordenada correta de codificação que é gerado pelo editor.
  • Repita conforme necessário até que todas as áreas de ligação estejam definidas.
Nota: Você não pode salvar a codificação dentro do próprio editor assim, sugere-se que, para grandes projetos com muitas áreas definidas que a codificação deve ser rotineiramente salvas na página de template ou a qualquer outro software, como um arquivo de bloco de notas ou Microsoft Word para se manter seguro.


TWO. Crie o template

  • Crie a template de mapa de imagem na wiki através da criação de um título e uma nova página em branco
  • Copie e cole o conteúdo do editor para esta nova página, bem como alguma importante codificação descrita nestas instruções.
  • Ajuste a tamanho da imagem do template ou para a máxima de 640px ou um tamanho mais pequeno se desejado.
Você pode fazer alguns ajustes de código menores, de modo que o tamanho da imagem seja mais fácil de ajustar em tempo real e isso codificação alternativa também irá eliminar a necessidade de fazer numerosos templates com cada imagem em tamanho diferente.

  • Salve o template e teste se os links estão funcionando corretamente. Corrija se necessário.


THREE. Adicione o template à página

  • Quando na página de destino, clique no link editar a página e vá para a área onde o mapa de imagem é para ser instalado
  • Instalar o mapa de imagem para a página de destino usando formato de template padrão
{{ (nome do template) }}

  • Clique no link mostra de pré-visualização na parte inferior da caixa de edição.
  • Verifique o posicionamento correto e o tamanho da imagem.
Nota: Se o mapa de imagem padrão de codificação foi utilizado e o tamanho da imagem necessita de ajuste, será necessário abrir outra aba do navegador, retornar à página do template, abri-lo para edição, ajustar o tamanho da imagem, salvar as alterações, retornar à página de edição de destino e clique no mostrar a pré-visualização novamente. Isto terá de ser repetido uma e outra vez até que o tamanho adequado (e você não tem que esperar que "alguém ajuste o tamanho da imagem no template para caber sua página").
Melhor ainda Se o codificação alternativa foi instalada quando o template foi criado, então, só é necessário ajustar o parâmetro de entrada do template, enquanto ainda na caixa de edição da página de destino ("este dimensionamento é independente do template").
{{ (nome do template) | (image size)px }}
Depois de mudar o tamanho, clique no "mostrar pré-visualização" novamente para verificar o tamanho e, em seguida, repetir se necessário. Esta nova codificação pode ser usada para atualizar os mapas de imagem mais antigos também.

  • Salve a página de destino.
  • Verifique se todos os links do mapa de imagem estão funcionando corretamente.







Confira este truque do comércio (um; método alternativo "MAIS FÁCIL" para o dimensionamento de mapas de imagem)

"

Você está cansado de ir e voltar entre a página que você está editando
e do template de mapa de imagem apenas para ajustar o tamanho da imagem?

"
"

Você quer evitar de fazer várias cópias do mesmo template, a fim de
usar o mesmo mapa de imagem em diferentes páginas com diferentes tamanhos de imagem?

"

Se assim for, vá para o novo truque do comércio neste artigo de ajuda para a solução.


Etapas para usar o editor de mapa de imagem[editar | editar código-fonte]

1. Carregar sua imagem[editar | editar código-fonte]

  • Carregue a imagem que você deseja transformar em um mapa de imagem na Wiki do FamilySearch.

2. Copie a URL para a imagem[editar | editar código-fonte]

  • Encontre o arquivo da imagem aprovada que agora está dentro da Wiki de Pesquisa buscando o nome da imagem ou usando ListFiles para verificar os arquivos enviados recentemente.
  • Clique com o lado direito do mouse sobre a imagem e escolha a opção "Copiar URL da imagem".
  • Observação não copie a URL da janela do navegador, não vai funcionar.

3. Abra o Editor de Mapa de Imagem[editar | editar código-fonte]

OBSERVAÇÃO: O link para o Editor de Mapa de Imagem anterior está indisponível no momento devido que a Conta de usuário expirou. A substituição seguinte é um editor alternativo. Estas instruções foram atualizados para refletir o novo editor. Por favor relate quaisquer problemas ou sugestões para outras opções de editor que também poderiam ser incluídas aqui.

www.maschek.hu/imagemap/imgmap

4. Coloque imagem no editor[editar | editar código-fonte]

  • Cole a URL (tal como obtido no Passo 2) na caixa de editor de "imagem na Internet".
  • Clique em "aceitar" (ou use a marca de seleção).
  • A imagem irá aparecer na caixa de imagem imediatamente abaixo.
  • Se a imagem não aparecer, você tem um problema com a URL e deve retornar para a Etapa 2.

5. Abra uma seção de área e selecione a forma desejada[editar | editar código-fonte]

  • No ícone "Área de Mapa da Imagem" do editor, clique no sinal de mais (+) para abrir uma nova seção de formato.
  • Nota: O icone menos (-) é usado para excluir a seção selecionada atualmente (um ponto preto no círculo à esquerda da seção de formato mostra a seleção atual).
  • Selecione o tipo de área que você deseja criar: Retângulo, Círculo ou Polígono.
  • Na maioria das vezes, você provavelmente estará usando Polygon como a maioria das imagens que você estará delineando não têm formas regulares.
Nota: Você não pode salvar a codificação dentro do próprio editor assim, sugere-se que, para grandes projetos com muitas áreas definidas que a codificação deve ser rotineiramente salvos na página de template ou a qualquer outro software, como um bloco de notas (Notepad) ou Microsoft Word para se manter seguro.

6. Defina as áreas dentro da imagem[editar | editar código-fonte]

Círculos e Retângulos[editar | editar código-fonte]
  • Volte-se para a caixa de imagem e clique com o botão esquerdo perto da área desejada na imagem.
  • Arraste o cursor para longe do ponto inicial (por círculos e retângulos) para ampliar a forma.
  • Nota: Mantenha pressionada a tecla "Shift" para alterar um retângulo em um quadrado.
  • Clique com o lado esquerdo - SEGURE dentro da forma para movê-la para o local adequado.
  • Mova o cursor sobre a borda da forma até que as setas apareçam em seguida, *Clique com o lado esquerdo - SUSTENTE para redimensionar a forma para cobrir a área desejada. Repita conforme necessário.
  • Nota: Para os círculos e retângulos as setas aparecerão na parte superior, inferior e laterais.
  • Nota: Você também pode digitar o número que muda diretamente na caixa de coordenadas, se desejar.
Polígonos[editar | editar código-fonte]
  • A criação de polígonos é um pouco mais complicada.
  • *Clique com o lado esquerdo sobre o ponto de partida da área a ser selecionada.
  • Clique sobre as várias partes da imagem que você quer que seja parte da área do polígono.
  • Conforme você progride ao longo das bordas, a área se tornará sombreada.
  • Para "fechar" o polígono mantenha pressionada a tecla shift' enquanto marcar o "segundo ao último" ponto no momento em que a borda vai ligar de volta ao ponto de partida.
  • Nota: Os polígonos não podem ser redimensionadas (devem ser redesenhados). Selecione a seção de forma apropriada clicando no círculo à esquerda da caixa de seleção da forma (ponto preto vai se mover para lá).
  • Mova o cursor para o novo ponto de partida na imagem e clique com o lado esquerdo uma vez os traços transversais do cursor estão visíveis. Isto irá apagar o antigo polígono quando o novo é iniciado.

7. Instale links e título[editar | editar código-fonte]

  • Coloque o link para o artigo na Wiki para a área que você está descrevendo para a caixa "Href:" para a seção de forma atual.
  • Ou use a URL para um site fora da wiki.
  • Em seguida, digite o título (dica de ferramenta de descrição) na caixa "Alt". Isso exibirá a dica de ferramenta que aparece quando o cursor é passado sobre essa área específica da imagem.
  • Se você tiver apenas uma área para instalar, clique em "Enter" depois de digitar, tanto nas caixas "Href:" e "Alt:", caso contrário, elas serão adicionadas quando você clica no botão + para adicionar a próxima área.

8. Verifique as coordenadas na caixa de Mapa de Imagem[editar | editar código-fonte]

  • Depois de ter acabado com a primeira área, vá até a caixa de código da extensão do Mapa de Imagem e você vai ver as coordenadas da área que você acabou delineando.
  • Observe que o link e seu nome está entre o conjunto de colchetes duplos [[]]. Se você não vê nada entre o [[]] volte para as caixas "Href:" e "Alt:" e digite o nome da dica de ferramenta e pressione sua tecla Enter.
  • Você também vai notar que a área que você tem delineado está agora sombreada assim você pode ver quais áreas já foram cobertas.

9. Criar a próxima área clicável[editar | editar código-fonte]

  • Para criar a próxima área clicável em sua imagem, clique no ícone de adição (+) para abrir uma nova seção.
  • Digite o próximo link e o título como foi feito anteriormente.

Repita os procedimentos acima (5-8) até que todas as áreas desejadas sejam marcadas.

  • Nota: Para sobrepor áreas do mapa, a primeira área desenhada terá precedência sobre quaisquer áreas de cliques pertinentes tirados depois (a mais antiga codificação tem prioridade).
DICA: Se você achar que a área da imagem errada está tomando precedência quando as áreas se sobrepõem, você pode corrigir esse problema ao invés de reiniciar o mapa de imagem de novo a partir do zero. Você pode reorganizar a codificação que você copiou no template movendo a linha desejada de codificação (a linha que contém o tipo de área, por exemplo, "círculo" e suas coordenadas) no topo da lista simplesmente usando as funções copiar / colar. Isso pode levar um pouco de tentativa e erro para obter o funcionamento correto.


  • Quando tiver terminado todas as áreas que pretende delinear, vá para o código de extensão do Mapa da Imagem (imagemap) de novo e copiar (Cntl C) todo o código na caixa incluindo <imagemap> e </imagemap>

10. Criar template de mapa de imagem (imagemap)[editar | editar código-fonte]

  • Abra uma nova aba do navegador (se preferir) e digite na caixa de pesquisa um nome para o template de mapa de imagem que pretende criar, por exemplo, Template: "Nome do seu mapa de imagem".
  • Se o nome que você selecionou não está sendo usado, ele aparecerá como um link vermelho. Se não é uma ligação vermelha então você deveria repetir o procedimento até que um nome único é identificado.
  • Clique no link vermelho e depois edite página para criar seu template.
  • Cole a codificação que você copiou do ImageMap extensão no editor de wikitexto ("não o Editor Rico").
  • IMPORTANTE
    Usando o editor de wikitexto instale esse código <noinclude>__NORICHEDITOR__ </noinclude> na parte superior da página. Isso vai impedir de alguém abrir o arquivo com o editor rico que irá destruir o seu código (isto é atualmente a única forma de contornar).
  • Uma vez que este editor de mapa de imagem não permitiu a adição do nome da imagem (ele usa as informações do link fornecido), o nome da imagem tem de ser corrigido no momento.
  • Também alterar o link da imagem de um link externo para uma ligação interna (remova os https ....).
    • Por exemplo, se a URL em seu código imagemap é " https://familysearch.org/wiki/en/images/3/3c/ Mexico_states-1000px.png? 1406320063521";,
    • Você precisa mudar isso para "Mexico_states-1000px.png".
  • Também inclua o seguinte código na parte inferior da página de edição para designar uma categoria para o template: <noinclude> [[Categoria:templates de mapa de imagem]] </noinclude>
  • Salve o template.
  • Você deverá ver a imagem e quando você coloca o mouse sobre as diferentes áreas que você selecionou, você deve ver uma dica de ferramenta com o título da área.
  • Clique em cada link que você criou para garantir que eles estão funcionando corretamente.
DICA: Se você está tendo dificuldade em trabalhar com um mapa que tem muitas pequenas áreas de esboço, quebre as entradas. Faça alguns itens e instale esta codificação no template que você está criando. Atualize o editor e coloque no mesmo mapa. Então, continue com novas áreas. Copie apenas o novo código e cole-o após a última área que aparece no template, mas antes da marca de fechamento </imagemap>.
Este novo editor de mapa de imagem também tem um recurso de zoom em que a imagem pode ser ampliada em 200% ou 300% (intervalo é de 25% a 300%) para que delineando áreas menores seja muito mais fácil.

11. Limitar o tamanho do mapa de imagem[editar | editar código-fonte]

  • A imagem será do tamanho como foi carregada.
  • Se você quiser limitar o tamanho da imagem, vá para o editor de wikitexto e instale um tubo"|" após o nome da imagem na parte superior da codificação seguido pelo tamanho em pixels, assim:
Image: Nome da Imagem.jpg |400px
  • Este tamanho especificado será o tamanho da imagem que será exibida na página de destino para o template.
Nota: Veja também o Truque do Comércio abaixo para uma forma alternativa de tamanho da imagem na página alvo sem retornar ao template cada vez.

12. Para instalar o seu mapa de imagem[editar | editar código-fonte]

  • Instale o mapa de imagem (o template) em uma página de destino como qualquer outro template.
  • Digite    {{ Nome do template de mapa de imagem }}    onde você quiser na página.
  • Se a imagem ainda é muito grande ou você quer mudar o tamanho, volte e edite o template, alterando o tamanho em pixels como no Passo 11 ou alterar o parâmetro de entrada, se foi utilizado o método de codificação alternativo (ver o Truque do Comércio ).
Nota: Um problema identificado, que pode ocorrer com o editor de mapa de imagem.

Alguns usuários têm encontrado uma falha incomum em que a informação "Href" e "Alt" não fica devidamente registrada no código wikitexto resultante quando adicionar polígonos. Este parece ser causado se o editor não está totalmente atualizado antes de cada utilização (ou se a página é atualizada ou o navegador é reiniciado com a página já aberta).

  • Neste momento, recomenda-se que o editor quer ser reaberto para cada utilização ou também pode ser atualizado utilizando o link "editor online"' encontrado na barra lateral esquerda na página de editor.
  • Se isso ocorrer durante o uso, as informações Href e Alt podem ser apagados e recolocadas corretamente o que deve colocá-la apropriadamente no código.
  • As informações Href e Alt poderiam também ser introduzidas manualmente depois de colar o código na página do template.
Por favor, continuem a informar que esta e todas as outras questões que são encontrados ao usar este novo editor. Você pode usar o página de discussão para relatar quaisquer problemas.


Predefinição:Submit Forms


Truque do comércio[editar | editar código-fonte]

Uma opção de codificação alternativa para a extensão imagemap

  • Você está cansado de ir e voltar entre a página que você está editando e o template de mapa de imagem apenas para ajustar o tamanho da imagem?
  • "Você quer evitar fazer várias cópias do mesmo template, a fim de usar o mesmo mapa de imagem em diferentes páginas com diferentes tamanhos de imagem?"

Ao fazer um pequeno ajuste para a codificação já gerada utilizando o editor de mapa de imagem, o tamanho da imagem pode ser selecionado enquanto na página editada ("alvo") usando um parâmetro de entrada em vez de acessar o template cada vez. Por exemplo, usando a chamada de template {{HubEightBullet1|400px}} vai transcludir o mapa de imagem HubEightBullet1 que é de 400 pixels de tamanho.

* Siga as instruções acima para criar o modelo de codificação usando o editor de mapa de imagem, copiando o código de editor para a página de template usando wikitexto (não o RichEditor).
  • Substituir o wikitexto inicial < imagemap > e a codificação Image:name.jpg|640px substituindo o seguinte.:
{{#tag:imagemap|
Image:name.jpg {{!}}{{{1|640px}}}

  • Substituir o fim '</ imagemap>' com os parenteses de fechamento }}

Neste exemplo esta codificação vai fazer o tamanho padrão 640px, se nenhum parâmetro for utilizado, permitindo que o tamanho da imagem seja alterado para vários tamanhos em várias páginas usando o parâmetro de entrada do template. Alterar o tamanho da imagem do mapa também pode ser alterado a qualquer momento, simplesmente alterando o valor do parâmetro de entrada na página que está sendo editado.

Ver o template "HubEightBullet1" como um exemplo das alterações de codificação. Dentro deste template há o código extra {{{1}}} para exibir o valor do parâmetro (este código não deve ser incluído no seu template de mapa de imagem).

Exemplo de múltiplos dimensionamento do mesmo template de mapa de imagem

Atualizando os templates existentes

Os templates mais antigos existentes também podem ser atualizados com a nova codificação e, se desejado, o tamanho da imagem utilizado anteriormente pode ser utilizado como o valor padrão. Por exemplo, para um tamanho de imagem real de 640 pixels, o parâmetro padrão ( Image:Nome da imagem.jpg {{!}}{{{1|640px}}} ) poderia ser especificada para ser o tamanho da imagem real que foi usada na codificação inicial. Isto assegura que as chamadas de template existentes não teria que ser modificadas, mas ainda pode ser alteradas a qualquer momento simplesmente adicionando um novo parâmetro de entrada.

Lembrete rápido: A entrada de parâmetro quando chamar o template deve incluir a px após o número do tamanho da imagem para o código funcionar corretamente. Isto é um pouco diferente do que a utilização convencional do parâmetro de entrada, que pode apenas requerer um número.

Predefinição:Submit Forms





Exemplo de Editor de Mapa de imagem[editar | editar código-fonte]

Nota: Este é um exemplo que foi feito usando o editor de mapa de imagem original.

Neste exemplo, você vai ter uma imagem da bandeira de Oregon e torná-la de modo que quando você clica na imagem, você é levado para a página do Oregon.

  1. Vá para File:Oregon flag.png, e em seguida, clique no link para o arquivo logo abaixo da imagem para trazê-lo para a página que mostra a URL completa para conectar-se a imagem.
  2. Clique com o botão direito na imagem e escolha a opção "Copiar URL da imagem."
  3. Vá para ImageMap Editor e cole a URL no campo URL da caixa "Carregar da URL". Digite o nome completo da imagem na caixa de nome. Neste exemplo, o nome completo da imagem é Oregon_flag.png.
  4. Clique carregar
  5. A imagem irá então carregar.
  6. Clique Retângulo na caixa de Novo Espaço.
  7. No campo de link da caixa Geral, digite Oregon.
  8. Depois, Você vai definir a área clicável que vai ligar com a página "Oregon". No canto superior direito da imagem, clique com o botão direito do mouse. No canto inferior esquerdo da imagem, clique com o botão esquerdo do mouse.
  9. na Caixa Configurações Globais, clique em nenhum.
  10. Cole seu código no local apropriado na página. Você deve ver algo como isto:

<imagemap>
Image:Oregon_flag.png|
rect 1 1 741 445 [[Oregon|Oregon]]
desc none
</imagemap>

Salve sua página e teste seu link. Se você seguiu as instruções para este código, você veria:

OregonOregon flag.png

Dicas[editar | editar código-fonte]

  • Você pode usar a extensão ImageMap e o editor ImageMap para definir várias regiões dentro de sua imagem que apontam para páginas diferentes.
  • Você pode aprender mais sobre algumas aplicações avançadas da extensão ImageMap em MediaWiki.
  • É uma boa idéia para se familiarizar com as novas ferramentas, jogando com eles na sandbox antes de experimentá-las em artigos completos. Se você é um usuário registrado, aqui está o link para Sua"' caixa de areia (caixa de testes).

Fontes e Citações[editar | editar código-fonte]


__NORICHEDITOR__

Predefinição:Auto-outdated