Criando um mapeamento de imagens no Macromedia Dreamweaver MX

Este tutorial mostrará como mapear uma figura. Mas o que é "mapear uma figura" ? Mapear uma figura nada mais é que definir uma ou mais áreas que terão seu próprio link para redirecionamento. Iremos nos basear neste exemplo:

Neste exemplo iremos colocar um link no rosto do BABOO e colocaremos um link no quadrado do Windows Server 2003.
Abra uma nova página no Macromedia Dreamweaver MX: clique em File > New:

Escolha HTML e clique em Create. Surgirá uma nova tela no Macromedia Dreamweaver MX. Para inserir uma imagem no Macromedia Dreamweaver MX, clique em Insert > Image ou simplesmente utilize o atalho Ctrl + Alt + I:

1: Nos mostra qual imagem estamos abrindo (Preview).
2: As extensões das imagens que poderão ser inseridas (no menu dropdown que ali possui, existem outras opções).
3: O local onde a imagem se encontra.
4: Clique em OK para inserir a imagem
Feito isto, a imagem irá surgir na página HTML. Note esta barra de opções que surgiu:

Vamos explicar:
1: Esta caixa de texto nos mostra qual o endereço local da imagem.
2: Estas duas caixas nos mostra a dimensão da figura. W = Comprimento e H = Altura.
3: Estas três opções poderão ser executadas de acordo com sua necessidade de alinhamento da figura: Alinhar à esquerda, Centralizar ou Alinhar à direita.
4: Finalmente as opções de mapeamento do Macromedia Dreamweaver MX: a primeira opção nos mostra que iremos mapear uma área quadrada (ou retangular) da figura, a segunda opção nos mostra que iremos mapear uma área circular (ou elíptica) da figura e a terceira opção nos mostra que iremos mapear uma área poligonal (vários vértices) da figura.
Para fazermos o primeiro mapeamento do exemplo acima nós utilizaremos a opção de mapeamento de áreas circulares (segunda opção citada acima). Com a figura inserida na página clique em Oval Hotspot tool:

Feito isto, quando passar o mouse em cima da figura, surgirá um símbolo "+". Clique e segure o botão esquerdo do mouse na área que deseja inserir o link:

Agora solte o mouse e a imagem ficará assim:

Caso você precise de alinhar a área de mapeamento dentro da figura, clique no botão Pointer Hotspot tool e arraste a área para o local desejado.Este é o botão: .
Note que surgiu uma nova barra de opções:

1: Iremos colocar o endereço do link.No nosso caso "http://www.baboo.com.br"
2: Aqui colocaremos o nome do mapa (para evitar problemas escolha nomes diferentes para cada mapeamento)
Veja como ficou esta barra de opções:

Quando você acabar de escrever nas opções, pressione a tecla Enter do seu teclado (não se esqueça de colocar http:// no link). Pronto: o mapeamento da primeira área já foi feita!
Agora iremos mapear a segunda área. Lembre-se de que o primeiro mapeamento já foi feito e utilizaremos a mesma imagem:

Agora clique em Rectangular Hotspot tool:

No nosso caso será mapeado o quadrado do Windows Server 2003. Feito isto, quando passar o mouse em cima da figura, surgirá o símbolo "+". Clique e segure o botão esquerdo do mouse na área que deseja inserir o link:

Agora solte o mouse e a imagem ficará assim:

Caso você precise de alinhar a área de mapeamento dentro da figura, clique no botão Pointer Hotspot tool e arraste a área para o local desejado. Este é o botão: .
Agora configuraremos o link do segundo mapeamento: clique no quadrado verde que surgiu e na barra que surgiu complete com o link desejado:

Nossa barra de opções ficará assim:

Quando você acabar de escrever nas opções, pressione a tecla Enter do seu teclado (não se esqueça de colocar http:// no link). Pronto: o mapeamento da segunda área foi feita!
Nosso tutorial foi bem simples, porém bem explicativo. Utilize o mapeamento em seu website a partir de hoje ! :) ... Veja nosso exemplo (passe o cursor do mouse sobre o rosto do Baboo e sobre o quadrado do Windows Server 2003 e veja na barra de status de seu navegador que os links são diferentes):