O Jeff fez um pedido de tutorial e estou realizando. Se você também quer dar sua dica de tutorial, peça por ask-me.
O ImageReady faz parte do pacote do Adobe Photoshop. Isso quer dizer que se você fizer o download do Photoshop automaticamente o programa já vem junto acoplado.
1. Abra o seu ImageReady e em seguida, uma imagem. Para abrir uma imagem no ImageReady é que nem no Adobe Photoshop: File - Open.
2. Agora, você vai selecionar a ferramenta Rectangle Image Map Tool (clique aqui e visualize qual é a ferramenta).
3. Faça um retângulo com o mouse em cima do lugar onde quer mapear na sua imagem.
4. Clique duas vezes em cima do quadrado que você fez em cima do local da imagem que quer mapear.
5. Vai aparecer essa caixa (clique aqui). Preencha os campos:
Name: nome do link de mapeamento, pode colocar o nome do link por exemplo goodies ou então deixar do jeito que está, ou seja, ImageMap_01.
URL: Coloque o link da página que você quer mapear a sua imagem. Por exemplo: http://seublog.com/goodies
Target: Você escolhe se o link vai abrir na mesma janela ou em uma nova janela. Blank abre o link em uma nova janela.
Alt: sabe essa mensagem que aparece quando você descansa o cursor no link? Se chama alt e você escolhe que mensagem irá aparecer.
6. Existe na barra de ferramentas um botão que tem o ícone do Internet Explorer. Clique nesse botão. O Internet Explorer abrirá com o código da imagem que você acabou de mapear. O código é algo parecido com isso:
<html> <head> <title>título</title> <meta
http-equiv="Content-Type" content="text/html;
charset=iso-8859-1"> </head> <body bgcolor="#FFFFFF"
leftmargin="0" topmargin="0" marginwidth="0"
marginheight="0"> <!- ImageReady Slices (imagem.png) ->
<img src="link da imagem hospedada aqui.png" width="645"
height="620" border="0" alt=""
usemap="#layout_Map"> <map name="layout_Map">
<area shape="rect" alt=""
coords="245,171,562,531" href="http://link.com">
</map> <!- End ImageReady Slices -> </body> </html>
Copie apenas o código que vai precisar pra colar no seu blog:
<img src="link da imagem hospedada aqui.png" width="645"
height="620" border="0" alt=""
usemap="#layout_Map"> <map name="layout_Map">
<area shape="rect" alt=""
coords="245,171,562,531" href="http://link.com">
</map>
7. Hospede a imagem em algum servidor de imagens (tinypic.com ou imageshack.us são os mais usados) ou no seu blog e coloque o link da imagem hospedada no código e cole no seu blog onde você quer que a imagem mapeada apareça.
Espero que tenham gostado do tutorial e qualquer dúvida estou esperando os visitantes no ask-me.