Hey, galera, como vão?! Eu estou super bem, tanto é que arranjei tempo para vir aqui e postar um tutorial para vocês!
O tutorial que eu vou mostrar é de como mapear uma imagem (utilizado para mapear header's).
Mas antes, o que é um header mapeado?! Bom, header é nada mais nada menos que o cabeçalho do blog. Um exemplo de header:
(foi retirada do Deviantart)
Bom, como fazer para que ao clicar no nome da página que está escrito no menu da imagem vá para um determinado link?! Simples! Para isso nós mapeamos o header. A definição para imagem mapeada é uma imagem com link's dentro. Então, vamos lá?! Se você ainda não entendeu direito confira o tutorial abaixo:
Mapeando header (imagem):
1º - vá até o site: http://image-maps.com/
2º - Abrindo o site, você verá algo assim:
Aperte em "Escolher arquivo" e escolha a foto que você quer mapear. Você pode também colar o url da imagem, basta escrever o link dela no espaço "From a URL".
3º - Depois de escolher a sua foto, aperte em "Start Mapping Your Image"
4º - Logo após, aguarde a sua imagem carregar, leva apenas alguns segundos. Depois aperte em:
5º - Quando a página carregar, ficará assim:
(claro que ao lado esquerdo vai estar a sua foto)
Então essa é a parte em que começamos a mapear a imagem!
Ao lado da sua foto você vai encontrar um painel, procure por "Rectangle" e aperte. Veja na foto abaixo:
6º - Depois de apertar em "Rectangle", vai aparecer assim:
Você arrasta o quadrado para o lugar que você quer que ao clicar abra um novo link, por exemplo:
- você quer mapear o header do seu blog, ele contém um menu (como na imagem acima) e você quer que ao clicar na página "Home" vá para a página inicial do seu blog, então arraste o quadrado na palavra e/ou parte que você quer mapear.
Depois você deverá preencher os espaços com o determinado link e nome da página:
No primeiro espaço, coloque o link que você quer que ao clicar naquele lugar vá.
No segundo espaço coloque o nome que você quer que apareça ao passar o mouse em cima (o segundo espaço não é obrigatório preencher, apenas se você quiser). Depois disso, aperte em "Save".
Vá repetindo o mesmo processo em todos os lugares da foto que você quer que tenha link. Não esqueça, aperte em "Rectangle" coloque o link e nome da página e aperte em salvar.
7º - Por último, aperte em "Get Your Code":
Depois é só pegar o código da sua imagem mapeada! Pronto! Você acabou de codificar um header.
Espero que tenha ajudado vocês, qualquer dúvida deixe por comentários. Até mais, lindezas! :*
Nenhum comentário:
Postar um comentário