quarta-feira, 12 de dezembro de 2012

Mapeando imagens para web no Gimp!

Você sabia que o GIMP tem um filtro que mapea imagens para web? Nós não!!!! =D
Por isso, a nossa experiência de hoje é sobre uma das possibilidades do filtro web: o mapa de imagens!
Primeiro, criamos o nosso lay out com 800X600 pixels no inkscape ou outro programa de edição de desenho vetorial :

Depois de criado o lay out, exportamos a página como bitmap e abrimos no gimp, em seguida, vamos no menu web → mapa de imagem



e abrirá a seguinte janela:


 

Perceba que existem as ferramentas de seleção, como retângulo, elipse etc. É só usar essas formas nos botões e abrirá outra janela para você inserir o hiperlink
 É só usar essas formas nos botões e abrirá outra janela para você inserir o hiperlink





depois, de mapear a imagem colocando os seus respectivos endereços em cada botão, podemos salvar. É só dar um nome e preservar a extensão .map.


 


Com o mapa salvo é só abri-lo num editor de texto como bloco de notas, e teremos acesso ao código e então copiamos este código gerado


 Criamos no mesmo editor de texto um arquivo chamado index.html
e escrevemos os seguintes comandos:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "
http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"><html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta name="keywords" content="arte mídia educação" />
<meta name="description" content="laboratorio de arte midia e educacao" />
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<title>LUDIMÍDIA - Arte, Mídia e Educação</title>
<link href="" rel="stylesheet" type="text/css" media="screen" />
 
 
 
 
</div>

</body>
</html>
 antes da tag </div> colamos o nosso código do arquivo do mapa. E  ao abrirmos num navegador web teremos a nossa imagem com links funcionando!

 

Nenhum comentário:

Postar um comentário