Mapeamento com Image Ready
Início » Extras » Mapeamento de Imagens

Bom, muita gente tem o Image Ready, e não sabe mapear imagens com ele. Vou ensinar aqui, como fazer isso.
Fiz uma imagem no photoshop. Você pode abrir uma, ou fazer a sua mesmo. Clique em Saltar Para o Image Ready.
Com a ferramenta Mapa de imagem em retângulo selecionada , e com o quadro de mapa de imagem aparecendo(caso o seu não esteja, clique em janela » mapa de imagem) , faça um quadrado onde você quer o link e preencha o quadro de mapa de imagem conforme a sua página.
Depois de ter feito isso em todas as partes da imagem que você quer, dê crtl+Alt+P. Vai abrir uma janela do IE, com a sua imagem e um código. Copie apenas a parte que lhe interessa, que é mais ou menos essa:
<!-- ImageReady Slices (Sem Título-1.gif) -->
<IMG SRC="images/Sem-T%edtulo-1.gif" WIDTH=300 HEIGHT=97 BORDER=0 ALT="" USEMAP="#Sem_T_tulo_1_Map">
<MAP NAME="Sem_T_tulo_1_Map">
<AREA SHAPE="rect" ALT="Goodies" COORDS="217,48,291,87" HREF="extras.php" TARGET="_top">
<AREA SHAPE="rect" ALT="Blog" COORDS="155,50,206,89" HREF="blog.php" TARGET="_top">
<AREA SHAPE="rect" ALT="Perfil" COORDS="76,52,147,87" HREF="perfil.php" TARGET="_top">
<AREA SHAPE="rect" ALT="Home" COORDS="5,53,69,86" HREF="index.php" TARGET="_top">
</MAP>
<!-- End ImageReady Slices -->
Pode fechar a janela de navegação que apareceu após você ter copiado o código. Logo depois de Image Ready Slices, tem img src com o link dos seus documentos. Você precisa hospedar a sua imagem, e colocar nesse lugarzinho.
Prontinho! Coloque o código depois da tag <body> e aproveite.
O meu ficou assim:



Goodies
Blog
Perfil
Home


« Voltar Topo