GNN PRESS - Editor Wysiwyg

Não deixe de se divertir consultando o Primeiro Catálogo de Filmes Brasileiros !
(First Brazilian Movies Database)

---

Imagens Animadas

---

Você só vai ver animação com o Netscape 2.0. Faça o download dele primeiro.
Se você já tem Netscape 2.0, faca o download do programa bookware GIFCON.EXE. E' autoexplicativo e e' oficialmente gratuito para quem compre um livro do autor daquele software. Você primeiro gera umas imagens com photoshop, photostyler, coreldraw, etc que em sequencia dêem a idéia de movimento (como um desenho animado, uma imagem tem o carro perto, outra o carro mais distante, na proxima mais distante ainda, entende ?) Depois voce carrega essas GIFs atraves do GIFCON.EXE e pronto.

Vejam outro exemplo com 4 imagens:

Importante: Para compatibilidade com browsers antigos, escolha para primeira imagem uma inteligível.

---

---

VAMOS TESTAR A MINHA IMAGE MAP ?

---

Retranscricao da Resposta a pergunta numero 5 da HFAQ WWW - 5-12-95 por Rodrigo F. Afonso (KIKO) Webmaster do AlterNex. webmaster@ax.apc.org

P5 - Posso ter um ImageMap (mapa sensitivo) na minha pagina? Como faco?

**(R5)**
Sem duvida. Voce vai precisar criar um arquivo de configuracao da sua GIF. Existem alguns programas que fazem isso como o MapEdit. O programa criara' um arquivo ".map" que e' o arquivo de configuracao das areas dos dos pontos clicaveis de sua imagem. A configuracao na pagina ficaria mais ou menos assim:

<A HREF="http://www.ibase.org.br/cgi-bin/imagemap/nomepagina"><IMG SRC="images/imagem.gif" ISMAP></A>

Voce entao vai informar ao WebMaster do AlterNex. qual o nome do arquivo.map e em que diretorio ele esta' para que ele atualiza seu arquivo de configuracao de ImageMaps. Alem disso voce vai definir um nome para "nomepagina" (citado no comando acima) que sera' o nome de sua GIF/ImageMap.

*********************

Vamos ver se eu entendi:

1) Eu ja tenho a imagem.gif que eu quero que seja image map. Chama-se chato_ti.gif e ela esta' no diretorio das paginas.html , portanto, substituindo na formula, vou ter que inserir o seguinte comando na HTML da minha pagina, aonde eu quero inserir uma image map:

<A HREF="http://www.ibase.org.br/cgi-bin/imagemap/nomepagina"<>IMG SRC="images/imagem.gif" ISMAP><:/A> passa a ser:
<A HREF="http://www.ibase.org.br/cgi-bin/imagemap/nomepagina"><IMG SRC="chato_ti.gif" ISMAP><:/A>

2)Nada acontece, porque falta definir a variavel nomepagina, que e' o nome do meu arquivo.map, que ja' escolhi tambem e ja comuniquei ao Kiko, WEBMASTER do Alternex e o nome e' areas2.map. Portanto a formula agora esta' completa, e o comando e' :

<A HREF="http://www.ibase.org.br/cgi-bin/imagemap/areas2.map"><IMG SRC="chato_ti.gif" ISMAP></A>

Usando um programa parecido com o MapEdit, eu contrui o meu arquivo.map, chamado areas2.map e enviei para para o meu diretorio
~cinemabrazil/cgi-bin/areas2.map, o que tambem ja' comuniquei ao Kiko, WEBMASTER do Alternex.:

Vamos ver como e' por dentro o meu arquivo.map de nome areas2.map ? VAMOOOS!

# cara do cara de tras= equipe
rect http://www.ibase.org.br/~cinemabrazil/_equelen.html 11,33,59,94

# mao do cara de tras = catalogo dos filmes disponiveis
rect http://www.ibase.org.br/~cinemabrazil/fibracat.html 60,120,110,150

# gravata do cara de tras = catalogo
rect http://www.ibase.org.br/~cinemabrazil/_catalog.html 35,115,60,135

# olhos de chateau = entrevistas
rect http://www.ibase.org.br/~cinemabrazil/entrev.avi 101,84,157,99

# orelha direita de chateau = o homem
rect http://www.ibase.org.br/~cinemabrazil/_ohomem.html 85,85,110,110

# orelha esquerda de chateau = o homem
rect http://www.ibase.org.br/~cinemabrazil/_ohomem.html 150,95,160,120

# nariz de chateau = noticias
rect http://www.ibase.org.br/~cinemabrazil/_acontec.html 120,100,150,115

# medalha de chateau = pesquisa
rect http://www.ibase.org.br/~cinemabrazil/_pesquis.html 152,192,171,211

# cabeca de chateau = inauguracao da TV
rect http://www.ibase.org.br/~cinemabrazil/inaug.avi 74,39,146,75

# boca de chateau = alo do marcos
rect http://www.ibase.org.br/~cinemabrazil/intviews.avi 130,120,150,130

# bolso de chateau = investidores
rect http://www.ibase.org.br/~cinemabrazil/_invest.html 180,190,240,215

# gravata de chateau = links
rect http://www.ibase.org.br/~cinemabrazil/_seulink.html 140,150,170,180

# onde nao foi definido vai para documentacao basica inicial = base de fundo
default http://www.ibase.org.br/~cinemabrazil/_documen.html

3) Se eu ja' passei o nome do meu arquivo.map, que e' areas2.map e o diretorio onde ele se encontra, porque nao funciona a image map ? O Kiko disse que faltava eu definir o nome da GIF/image map, que e' o nomepagina citado no comando-exemplo acima. Complicado nao e' ? Mas acho que consigo equacionar:

4) Ta' legal, já sei, o nomepagina nao e' o arquivo.map, e' um simples nome de batismo para a operacao de chamar o arquivo.map la' no meu diretorio ~cinemabrazil/cgi-bin/, portanto, batizo nomepagina como cinemabrazil2, e o comando que devo inserir e'

<A HREF="http://www.ibase.org.br/cgi-bin/imagemap/cinemabrazil2"><IMG SRC="chato_ti.gif" ISMAP></A>

Como ja' havia comunicado que meu arquivo.map chama-se areas2.map e esta' no diretorio
~cinemabrazil/cgi-bin/, ao comunicar que a operacao de chamada de image map para o site Cinema Brazil tem o nome de cinemabrazil2, o Kiko agora pode ATUALIZAR o meu ARQUIVO DE CONFIGURACAO. Vamos testar:

FUNCIONA OU NAO FUNCIONA? THAT'S THE QUESTION !

Web-Counter

Agora me diga, porque o nome nomepagina, se nao e' para dar nome de pagina nenhuma ?

Puxa, agora e' que estou entendendo a tralhada toda:
Voce pode ter uma image map em cada pagina de seu site, assim talvez seja melhor chamar o nomepagina acima do nome da pagina onde vou colocar o imagemap.
Mas, 'pera la'. E se eu quizer colocar mais de uma imagemap numa pagina ?
Mas que rolinho dificil de desenrolar....
Sera' que toda vez que eu criar uma imagemap tenho que comunicar tudo de novo ao Webmaster?

Quem tiver a luz, que ilumine essa escuridao !!

Depois de muito ralar, elaborar raciocinios, ir e vir, erros e tentativas, cheguei 'a seguinte RECEITA DE BOLO:

1 - Antes de mais nada: Voce quer fazer uma image map? Sabe o que e' isso ? Imagemap e' aquela imagem que quando voce clica numa area, o navegador (Netscape 1.2 ou 2.0!) vai para uma URL(pagina da internet) , mas quando voce clica noutra area da mesma imagem, o navegador vai para outra pagina da internet (local ou externa).

2 - Primeira coisa: escolha uma imagem GIF que voce produziu com essa finalidade, ou seja, que contenha varias areas distintas, tipo um esqueleto, onde se eu clicar no cranio, vou para uma pagina com a descricao do que e' o cranio, se eu clicar na espinha dorsal, vou para uma pagina com a descricao da espinha, e assim por diante.
Para este exemplo grave a imagem desta pagina com o nome de chato_ti.gif (depois que voce compreender melhor a questao toda, podera' escolher outra imagem qualquer e lhe dar o nome que voce quizer, agora nao). Sabe como gravar a imagem? Coloque o cursor do mouse sobre a figura, clique o botao direito do mouse e um menu aparecera' "save image as...". E' so' salvar.

3 - Segundo: coloque no seu script HTML (que para este exemplo, voce criara' o imapax.htm) o seguinte codigo:
<html>
<BODY>
<a href="../../../"><img src="chato_ti.gif"></a>
</BODY>
</html>

Use o mouse para demarcar as areas, imaginando pequenos retangulos envolvendo cada objeto especifico (vamos supor o rosto de Chateubriand ao centro). Anote as coordenadas que vao aparecer na parte inferior do netscape 1.2 (ou 2.0). Anote primeiro o ponto correspondente ao canto superior esquerdo do retangulo que voce imaginou envolvendo o rosto. O cursor aponta para algo em torno de xx,xx. Depois anote o ponto correspondente ao canto inferior direito deste retangulo, que esta' em torno de zz,zz. Agora coloque ao lado, na mesma linha para qual URL voce quer que o navegador va'. Para efeito de exemplo anote "http:///www.ibase.br/~cinemabrazil/theman.html". Repita isso para a cabeca do cara de tras, para a cabeca de Chateaubriand e para a medalha no peito de Chateaubriand.

4- Uma vez atribuida a cada area uma URL, voce vai FORMATAR seu arquivo areas2.map (depois quando voce dominar, voce pode mudar esse nome tambem, agora nao), assim:

# cara do cara de tras= equipe
rect http://www.ibase.org.br/~cinemabrazil/_equelen.html 11,33,59,94

# mao do cara de tras = catalogo dos filmes disponiveis
rect http://www.ibase.org.br/~cinemabrazil/fibracat.html 60,120,110,150

# gravata do cara de tras = catalogo
rect http://www.ibase.org.br/~cinemabrazil/_catalog.html 35,115,60,135

# olhos de chateau = entrevistas
rect http://www.ibase.org.br/~cinemabrazil/entrev.avi 101,84,157,99

# orelha direita de chateau = o homem
rect http://www.ibase.org.br/~cinemabrazil/_ohomem.html 85,85,110,110

# orelha esquerda de chateau = o homem
rect http://www.ibase.org.br/~cinemabrazil/_ohomem.html 150,95,160,120

# nariz de chateau = noticias
rect http://www.ibase.org.br/~cinemabrazil/_acontec.html 120,100,150,115

# medalha de chateau = pesquisa
rect http://www.ibase.org.br/~cinemabrazil/_pesquis.html 152,192,171,211

# cabeca de chateau = inauguracao da TV
rect http://www.ibase.org.br/~cinemabrazil/inaug.avi 74,39,146,75

# boca de chateau = alo do marcos
rect http://www.ibase.org.br/~cinemabrazil/intviews.avi 130,120,150,130

# bolso de chateau = investidores
rect http://www.ibase.org.br/~cinemabrazil/_invest.html 180,190,240,215

# gravata de chateau = links
rect http://www.ibase.org.br/~cinemabrazil/_seulink.html 140,150,170,180

# onde nao foi definido vai para documentacao basica inicial = base de fundo
default http://www.ibase.org.br/~cinemabrazil/_documen.html

Passe o cursor ai' em cima, demarcando, copie e cole dentro de um editor de texto.
Salve com nome de areas2.map.

5- Dentro do seu script HTML, o imapax.htm, digite o seguinte codigo, apos <BODY>:

<A HREF="http://www.ibase.org.br/cgi-bin/imagemap/cinemabrazil2"><IMG SRC="chato_ti.gif" ISMAP></A>

grave.

6 - Transfira o seu arquivo HTML, o imapax.htm, a imagem chato_ti.gif e o arquivo areasXX.map, tudo para o seu diretorio (sera' mais facil assim):

7 - Comunique ao seu provedor (isso funciona comprovadamente para o ALTERNEX, se for outro provedor, consulte se esse e' o procedimento) o seguinte: 1) nomepagina (ou nome do path do arquivo.map) e' chatmap1; 2)nome do arquivo.map e' areasXX.map e esta' no diretorio .... (coloque aqui o path, ou seja a URL do diretorio de homepage, para onde voce transferiu os arquivos) Pergunte a que horas voce pode testar!

8 - Quando chegar a hora marcada pelo seu provedor, voce vai testar a pagina imapax.htm. Se tudo tiver dado certo, voce, ao clicar a imagem, chamara' a operacao cinemabrazil2, que e' um arquivo onde esta' armazenado o path (a URL do seu diretorio de homepage) onde voce colocou o arquivo areasXX.map. A chamada ao cinemabrazil2 e' que vai fazer com que o arquivo areasXX.map possa ser interpretado pelo script imagemap, que esta' no diretorio http://www.ibase.br/cgi-bin/ e e' este script imagemap em linguagem PERL para UNIX que vai aplicar na imagem chato_ti.gif as definicoes contidas no arquivo de configuracao areasXX.map.

E PENSAR QUE TUDO ISSO ERA SO' UM TESTE, PORQUE A IMAGE MAP QUE EU QUERO COLOCAR E' OUTRA, ESTA' SENDO PRODUZIDA GRAFICAMENTE E AINDA NAO SEI EM QUE PAGINA VAI FICAR...

Depois de criado o mapa, insira os seguintes comandos na sua página:

<A HREF="http://seu.provedor.br/~voce/seumapa.map">
<IMG SRC="http://seu.provedor.br/~voce/suaimagem.gif" ismap border=0></A>

Substituindo os campos correspondentes (seu.provedor.br, voce, seumapa.map, suaimagem.gif) pelos nomes que você tem ou criou. As referências ao mapa e a imagem também podem ser relativas (<A HREF="seumapa.map"> e <IMG SRC="suaimagem.gif" ismap border=0>) se o mapa e a imagem estiverem no seu diretório raiz.

O atributo HTML border=0, no comando IMG, inibe a aparição da borda em torno da imagem. Se você quiser que a borda apareça, retire este comando.

No nosso caso: <a href="http://www.ibase.org.br/~cinemabrazil/cgi-bin/areas2.map"><img src="chato_ti.gif" ismap border=0></A>

Bem mais simples, não? Eu pego o arquivo areas2.map que fiz aqui e direciono direto no comando. Se eu quizer fazer o areas255.map, faço, o coloco no meu subdiretorio cgi-bin, e mudo o numero 2 por 255. Só isso.
O provedor deve ter colocado um path ou um script CGI que dá acesso ao interpretador imagemap.pl de qualquer diretorio de um usuário que, no comando que chama o arquivo areasXX.map, se identifica com seu login.

DECRETADO O FIM DO MISTERIO PARA ISMAP!

Para testar esta nova imagemap, os arquivos que voce vai precisar sao: todos os arquivos *.txt, *.gif e *.jpg do diretorio /fileser2, que voce acessa a partir da URL http://www.ibase.br/~cinemabrazil/fileser2/
Cinema Brazil - downloading
QUANDO VOCE RECEBER ESSE ARQUIVO EM TXT, RENOMEIE ESSE E OS DEMAIS ARQUIVOS *.TXT para *.HTM. NAO ESQUECA DE COPIAR todas as imagens *.gif *.jpg com o botao direito do mouse. Passe tudo para seu micro pessoal e desligue o TRUMPET (bye!). Assim voce tera' certeza que tudo vai se passar EXCLUSIVAMENTE DENTRO do seu micro, sem precisar do provedor.