Mapeando banners no ImageReady 
(Antes de tudo, tenham o programa ImageReady no computador de vocês)
Abram o ImageReady e deem CTRL + O para abrir o banner que você deseja mapear.
Clique em WINDOWS/JANELA e escolha a opção IMAGE MAP, agora irá abrir uma janela, que é onde você digitará os endereços dos linsk.
Aperte a letra P do teclado ou então na opção Rectangle image mape tool (p).


Agora vá no banner que deseja mapear e marque o espaço desejado.
Na janela que está aberta do lado, escreva o seguinte :


Faça isso todas as vezes que precisar criar um link novo no banner.
Quando terminar de mapeá-lo, veja como ficou seu banner na internet,
para fazer isso dê CTRL + ALT + P
e abrirá uma página teste na internet com seu banner mapeado e com o código
do mapeamento, assim :

Quando isso acontecer, pegue esse código abaixo :
<map name="flogvip_titulo" id="flogvip_titulo">

mais a parte que abriu quando você deu CTRL + ALT + P,
a partir de <area .... até </map>

então o código ficará mais ou menos assim :

<map name="flogvip_titulo" id="flogvip_titulo">
<area shape="rect" alt="AMIGOS" coords="337,312,407,337" href="http://www.flogvip.net/somecelebrities/favoritos" target="_blank">
<area shape="rect" alt="ADICIONE" coords="250,312,324,338" href="http://www.flogvip.net/flog_fav_adicionar.php?flog=somecelebrities" target="_blank">
<area shape="rect" alt="FOTOS" coords="161,312,239,338" href="http://www.flogvip.net/somecelebrities/fotos/" target="_blank">
</map>

Pronto, pode colocar ele no seu flogvip e não é necessário salvar novamente o banner.
Esse tutorial é para quem mapear o banner para colocar no flogvip, mas se você quiser colocar em um blog, site, página HTML ou então no tumblr, só vai mudar a parte final.
Depois de dar CTRL + ALT + P, copie desde 
<!-- ImageReady Slices (BANNER-SWEETPOISON-VERDEa.png) --> 
até essa parte ...
<!-- End ImageReady Slices -->
e vai ficar mais ou menos assim :


<!-- ImageReady Slices (BANNER-SWEETPOISON-VERDEa.png) -->
<img src="images/BANNER-SWEETPOISON-VERDEa.png" width="900" height="360" border="0" alt="" usemap="#BANNER_SWEETPOISON_VERDEa_Map">
<map name="BANNER_SWEETPOISON_VERDEa_Map">
<area shape="rect" alt="AMIGOS" coords="337,312,407,337" href="http://www.flogvip.net/somecelebrities/favoritos" target="_blank">
</map>
<!-- End ImageReady Slices -->

Os 2 primeiros lugares do código, onde tem o nome do seu banner, troque pelo link dele hospedado em algum site que hospede imagem, exemplo :

<!-- ImageReady Slices (HTTP://LINK DO SEU BANNER HOSPEDADO AQUI) -->
<img src="HTTP://LINK DO SEU BANNER HOSPEDADO AQUI" width="900" height="360" border="0" alt="" usemap="#BANNER_SWEETPOISON_VERDEa_Map">
<map name="BANNER_SWEETPOISON_VERDEa_Map">
<area shape="rect" alt="AMIGOS" coords="337,312,407,337" href="http://www.flogvip.net/somecelebrities/favoritos" target="_blank">
</map>
<!-- End ImageReady Slices -->

Pronto, não mude mais nada, é só colocar na sua página e ser feliz.
Esse tutorial foi útil? então deem os créditos e não copiem nada.
Postado por : Pâmela Sampaio em 07/03/12