Exemplo de uma barra de navegação onde foi usado o behavior Rollover Image. Realizado por Eduardo Rodrigues para o site zoom.pt.

Tamanho: px

Começar a partir da página:

Download "Exemplo de uma barra de navegação onde foi usado o behavior Rollover Image. Realizado por Eduardo Rodrigues para o site zoom.pt."

Marisa Mota Branco
8 Há anos
Visualizações:

1 1 of 5 3/22/10 12:29 PM Menus de navegação Exemplo de uma barra de navegação onde foi usado o behavior Rollover Image. Realizado por Eduardo Rodrigues para o site zoom.pt. A partir do menu insert do Dreamweaver podemos inserir / criar menus de navegação. Obviamente esta não é a única forma de os criar, mas é, certamente, uma forma prática de os inserir num projecto. Vejamos dois exemplos, um com rollover image, outro com o navigation bar. Em ambos os exemlos o javascript é gerado automaticamente pelo Dreamweaver. Rollover image A de inserção de rollover image é simples podendo em poucas etapas obtermos uma barra de navegação atractiva e eficaz. O primeiro passo consiste em criar duas imagens para o botão de navegação: uma para o estado do botão antes da interacção, outra para o momento em que passamos o cursor sobre o botão. Depois das imagens criadas e guardadas no directório do site seguimos os seguintes passos: 1- No menu insert, tab common, abrir o menu dropdown e clicar em rollover image; 2- No popup aberto, só temos que dar um nome à imagem, escolher a imagem original e a imagem e a imagem que aparece quando passamos o cursor. Por uma questão de velocidade de refrescamento da página devemos seleccionar a opção Preload rollover image. Igualmente devemos escolher o alt para a imagem e, por último, definir a página a abrir quando clicamos no botão em When Clicked go to URL.

Vejamos dois exemplos, um com rollover image, outro com o navigation bar. Em ambos os exemlos o javascript é gerado automaticamente pelo Dreamweaver.

2 2 of 5 3/22/10 12:29 PM Quando realizamos estes passos o javascript necessário é automaticamente gerado e incluído na head do documento. <script type="text/javascript">  </script> No ínício do body é gerado o script que permite o pré-carregamento (preload) das imagens. <body onload="mm_preloadimages('imagens/picture 5.png')"> <a href="index.html" onmouseout="mm_swapimgrestore()" onmouseover="mm_swapimage('image1','','imagens/picture 5.png',1)"><img src="imagens/picture 1.png" alt="pppp" name="image1" width="458" height="217" border="0" id="image1" /></a> Navigation Bar A par do rollover image o menu navigation bar é de simples realização. Para a sua concretização, depois de criadas as imagens, basta seguirmos os seguintes passos: 1- No menu insert, tab common, abrir o menu dropdown e clicar em Navigation Bar;

$mm_p=new Array(); var i,j=d.mm_p.length,a=mm_preloadimages.arguments; for(i=0; i<a.length; i++) if (a[i].indexof("#")!=0){ d.mm_p[j]=new Image; d.mm_p[j++].src=a[i]; function MM_findObj(n, d) { //v4.$

3 3 of 5 3/22/10 12:29 PM 2 - No popup aberto podemos verificar que não existem diferenças consideráveis relativamente ao rollover image. Neste painel podemos definir o nome dos botões da barra de navegação e decidir quatro estados do botão: up, over, down e over while down, ou seja, a imagem sem interacção (up), quando passamo o cursor por cima (over), quando clicamos ( down) e enquanto mantê-mos o ciursor por cima do botão depois de clicado(over whle down). Geralmente só precisamos de dois estados (up e over) portanto, o mesmo número de imagens do botão rollover image do exemplo anterior. Escolhemos o texto alternativo para cada imagem, seleccioná-mos a opção de preload images e definimos a página de destino em when clicked go to URL. Podemos, também, decidir se queremos inserir a barra de navegação na horizontal ou na vertical. O javascript é automaticamente gerado e incluido na head do documento. <script type="text/javascript"> <!-- function MM_preloadImages() { //v3.0 var d=document; if(d.images){ if(!d.mm_p) d.mm_p=new Array(); var i,j=d.mm_p.length,a=mm_preloadimages.arguments; for(i=0; i<a.length; i++) if (a[i].indexof("#")!=0){ d.mm_p[j]=new Image; d.mm_p[j++].src=a[i];

cursor por cima (over), quando clicamos ( down) e enquanto mantê-mos o ciursor por cima do botão depois de clicado(over whle down).

4 4 of 5 3/22/10 12:29 PM function MM_findObj(n, d) { //v4.01 var p,i,x; if(!d) d=document; if((p=n.indexof("?"))>0&&parent.frames.length) { d=parent.frames[n.substring(p+1)].document; n=n.substring(0,p); if(!(x=d[n])&&d.all) x=d.all[n]; for (i=0;!x&&i<d.forms.length;i++) x=d.forms[i][n]; for(i=0;!x&&d.layers&&i<d.layers.length;i++) x=mm_findobj(n,d.layers[i].document); if(!x && d.getelementbyid) x=d.getelementbyid(n); return x; function MM_nbGroup(event, grpname) { //v6.0 var i,img,nbarr,args=mm_nbgroup.arguments; if (event == "init" && args.length > 2) { if ((img = MM_findObj(args[2]))!= null &&!img.mm_init) { img.mm_init = true; img.mm_up = args[3]; img.mm_dn = img.src; if ((nbarr = document[grpname]) == null) nbarr = document[grpname] = new Array(); for (i=4; i < args.length-1; i+=2) if ((img = MM_findObj(args[i]))!= null) { img.src = img.mm_dn = args[i+1]; else if (event == "over") { document.mm_nbover = nbarr = new Array(); for (i=1; i < args.length-1; i+=3) if ((img = MM_findObj(args[i]))!= null) { img.src = (img.mm_dn && args[i+2])? args[i+2] : ((args[i+1])? args[i+1] : img.mm_up); else if (event == "out" ) { for (i=0; i < document.mm_nbover.length; i++) { img = document.mm_nbover[i]; img.src = (img.mm_dn)? img.mm_dn : img.mm_up; else if (event == "down") { nbarr = document[grpname]; if (nbarr) for (i=0; i < nbarr.length; i++) { img=nbarr[i]; img.src = img.mm_up; img.mm_dn = 0; document[grpname] = nbarr = new Array(); for (i=2; i < args.length-1; i+=2) if ((img = MM_findObj(args[i]))!= null) { img.src = img.mm_dn = (args[i+1])? args[i+1] : img.mm_up; //--> </script> E no corpo do documento foi criado o script de preload das imagens e um menu inserido dentro de uma tabela. <body onload="mm_preloadimages('imagens/rollover1.jpg','imagens /rollover2.jpg')"> <table border="0" cellpadding="0" cellspacing="0"> <tr> <td><a href="index2.html" target="_top" onclick="mm_nbgroup('down','group1','inicio','',1)" onmouseover="mm_nbgroup('over','inicio','imagens/rollover1.jpg','',1)" onmouseout="mm_nbgroup('out')"><img src="imagens/navbar0.jpg" alt="" name="inicio" width="290" height="222" border="0" id="inicio" onload="" /></a></td> <td><a href="index.html" target="_top"

$getelementbyid) x=d.getelementbyid(n); return x; function MM_nbGroup(event, grpname) { //v6.0 var i,img,nbarr,args=mm_nbgroup.arguments; if (event == "init" && args.$

5 5 of 5 3/22/10 12:29 PM onclick="mm_nbgroup('down','group1','fim','',1)" onmouseover="mm_nbgroup('over','fim','imagens/rollover2.jpg','',1)" onmouseout="mm_nbgroup('out')"><img src="imagens/navbar1.jpg" alt="" name="fim" width="516" height="361" border="0" id="fim" onload="" /></a></td> </tr> </table>

jpg','',1)" onmouseout="mm_nbgroup('out')"><img src="imagens/navbar1.

Documentos relacionados

Imagens - Formatos. GIF (Graphics Interchange Format) JPEG (ou JPG) (Joint Pictures Experts Graphis)

Imagens - Formatos. GIF (Graphics Interchange Format) JPEG (ou JPG) (Joint Pictures Experts Graphis) Imagens - Formatos GIF (Graphics Interchange Format) - Muito popular na web. - Permite ter um máximo de 256 cores. - Indicado para cartoons, logos, imagens com áreas transparentes e animações. JPEG (ou