Para mapear uma imagem, o header do seu layout, por exemplo, e ter um menu personalizado sem precisar de muito CSS, você deve fazer da seguinte maneira:
1 - Primeiro abra no Photoshop, a imagem na qual você deseja criar os links. Vou usar como exemplo o meu header, já que falei disso ali na introdução.
2 - Com a ferramenta Rectangular Marquee Tool, selecione somente a parte que você deseja mapear.
3 - Depois de selecionar, use Crtl+C para copiar esta seleção e em seguida, abra o Adobe ImageReader.
4 - Abra uma nova janela clicando em File > New ou somente o atalho Crtl+N. Na próxima janela que abrir, apenas clique em Ok e depois cole, usando Ctrl+V a seleção que fizemos anteriormente.
5 - Escolha a ferramenta Rectangle Image Map Tool, e com esta, selecione cada parte do que vai ser linkado, observe no exemplo.
6 - Todos os links definidos? Então vamos salvar! Vá em File > Save Optmized As. Na próxima janela, preencha o nome do arquivo como menu.html, na opção de baixo escolha HTML and Images (*.html).
7 - Pronto! Concluímos a primeira parte do nosso tutorial. Agora você abre o arquivo que foi salvo (menu.html) usando o seu editor html. Para este caso, vou usar o Dreamweaver.
PARA USUÁRIOS DE PHP:
8 - O arquivo deve abrir com um código. Copie da linha 7 até a linha 16 e cole no código do seu blog/theme depois da tag <*header>.
9 - Faça upload da imagem que foi salva (menu.jpg) em seu servidor e copie a url. Coloque na segunda linha do nosso código de mapeamento. Deve ficar mais ou menos assim:
< img src=" ENDEREÇO DA IMAGEM " widt h=" 259 " heigh t=" 26 " border=" 0 " alt="" u semap=" #menu_Map ">
Coloquei alguns espaços para fazer a exibição aqui no blog.
10 - Abra o CSS do seu theme e crie uma div para que você possa ajustar o mapeamento ao seu layout, pode usar o meu exemplo se quiser.
#bmap {
width: 259px;
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 10px;
color: #000000;
text-align: justify;
padding-left: 0px;
padding-right: 0px;
padding-top: 0px;
float: left;
margin-top: 0px;
margin-bottom: 0px;
}
11 - Aplique a div ao header, assim:
<*div id = " header "> (div da header do seu theme)
<*div id = " bmap "> (div que criamos)
CÓDIGO DO MAPEAMENTO AQUI
(não esqueça de fechar a div)
Coloquei alguns espaços para fazer a exibição aqui no blog.
12 - Agora é só ajustar Padding lef, right, top e Margin top, bottom à posição que a imagem mapeada deve ficar, para não desconfigurar seu layout.
PARA USUÁRIOS DE HTML:
13 - O procedimento é praticamente o mesmo, a diferença é que a div bmap deverá ficar dentro da tag <*style>.
< style >
.bmap {
width: 259px;
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 10px;
color: 000000
text-align: justify;
padding-left: 0px;
padding-right: 0px;
padding-top: 0px;
float: left;
margin-top: 0px;
margin-bottom: 0px;
}
< / style >
Coloquei alguns espaços para fazer a exibição aqui no blog.
Prontinho!
Alguma dúvida? Manda um e-mail para dajna@lamuel.net
