Botões com imagem cambiável
Publicado por Fernando Hidalgo Mansano em 14/02/2004
[ Hits: 15.228 ]
Botões com imagem cambiável
Bom pessoal, aqui iremos construir botões com efeitos de
mouse over (imagem cambiável).
Primeiramente vá até um editor de imagens e crie um arquivo, escreva ou desenhe algo e salve como botao.gif, depois altere a cor da imagem ou da letra e dê salvar como botao_sobre.gif.
Agora abra o editor de HTML preferido, crie um novo arquivo e salve como index.html.
Vamos ao código!
Dentro da tag head (<head>aqui virá o código</head>), adicione as seguintes linhas de Javascript:
Primeiramente vá até um editor de imagens e crie um arquivo, escreva ou desenhe algo e salve como botao.gif, depois altere a cor da imagem ou da letra e dê salvar como botao_sobre.gif.
Agora abra o editor de HTML preferido, crie um novo arquivo e salve como index.html.
Vamos ao código!
Dentro da tag head (<head>aqui virá o código</head>), adicione as seguintes linhas de Javascript:
<script language="JavaScript">
<!--
function MM_swapImgRestore() { //v3.0
var i,x,a=document.MM_sr; for(i=0;a&&i<a.length&&(x=a[i])&&x.oSrc;i++)
x.src=x.oSrc;
}
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];}}
}
function MM_findObj(n, d) { //v4.0
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 && document.getElementById) x=document.getElementById(n); return x;
}
function MM_swapImage() { //v3.0
var i,j=0,x,a=MM_swapImage.arguments; document.MM_sr=new Array;
for(i=0;i<(a.length-2);i+=3)
if ((x=MM_findObj(a[i]))!=null){document.MM_sr[j++]=x; if(!x.oSrc)
x.oSrc=x.src; x.src=a[i+2];}
}
//-->
</script>
<!--
function MM_swapImgRestore() { //v3.0
var i,x,a=document.MM_sr; for(i=0;a&&i<a.length&&(x=a[i])&&x.oSrc;i++)
x.src=x.oSrc;
}
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];}}
}
function MM_findObj(n, d) { //v4.0
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 && document.getElementById) x=document.getElementById(n); return x;
}
function MM_swapImage() { //v3.0
var i,j=0,x,a=MM_swapImage.arguments; document.MM_sr=new Array;
for(i=0;i<(a.length-2);i+=3)
if ((x=MM_findObj(a[i]))!=null){document.MM_sr[j++]=x; if(!x.oSrc)
x.oSrc=x.src; x.src=a[i+2];}
}
//-->
</script>
Agora altere a tag BODY para que fique desta forma:
<body bgcolor="#FFFFFF" text="#000000" onLoad="MM_preloadImages('botao_
sobre.gif')">
<a href="http://www.vivaolinux.com.br" onMouseOut="MM_swapImgRestore()"
onMouseOver="MM_swapImage('minha_imagem_cambiavel','','botao_sobre.gif',1)"><img name="minha_imagem_cambiavel" border="0" src="botao.gif" width="120" height="20"></a>
</body>
<a href="http://www.vivaolinux.com.br" onMouseOut="MM_swapImgRestore()"
onMouseOver="MM_swapImage('minha_imagem_cambiavel','','botao_sobre.gif',1)"><img name="minha_imagem_cambiavel" border="0" src="botao.gif" width="120" height="20"></a>
</body>
Observe que está sendo feito uma referência para acessar o site desejado, neste exemplo o site Viva o Linux. Você pode escrever um nome para sua imagem e deve-se declarar o tamanho da imagem em pixels, width e height (largura e altura).
Pronto! =)
Nossa página HTML ficará assim então:
<html>
<head>
<title>teste</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<script language="JavaScript">
<!--
function MM_swapImgRestore() { //v3.0
var i,x,a=document.MM_sr; for(i=0;a&&i<a.length&&(x=a[i])&&x.oSrc;i++)
x.src=x.oSrc;
}
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];}}
}
function MM_findObj(n, d) { //v4.0
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 && document.getElementById) x=document.getElementById(n); return x;
}
function MM_swapImage() { //v3.0
var i,j=0,x,a=MM_swapImage.arguments; document.MM_sr=new Array;
for(i=0;i<(a.length-2);i+=3)
if ((x=MM_findObj(a[i]))!=null){document.MM_sr[j++]=x; if(!x.oSrc)
x.oSrc=x.src; x.src=a[i+2];}
}
//-->
</script>
</head>
<body bgcolor="#FFFFFF" text="#000000" onLoad="MM_preloadImages('botao_
sobre.gif')">
<a href="http://www.vivaolinux.com.br" onMouseOut="MM_swapImgRestore()"
onMouseOver="MM_swapImage('minha_imagem_cambiavel','','botao_sobre.gif',1)"><img name="minha_imagem_cambiavel" border="0" src="botao.gif" width="120" height="20"></a>
</body>
</html>
<head>
<title>teste</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<script language="JavaScript">
<!--
function MM_swapImgRestore() { //v3.0
var i,x,a=document.MM_sr; for(i=0;a&&i<a.length&&(x=a[i])&&x.oSrc;i++)
x.src=x.oSrc;
}
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];}}
}
function MM_findObj(n, d) { //v4.0
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 && document.getElementById) x=document.getElementById(n); return x;
}
function MM_swapImage() { //v3.0
var i,j=0,x,a=MM_swapImage.arguments; document.MM_sr=new Array;
for(i=0;i<(a.length-2);i+=3)
if ((x=MM_findObj(a[i]))!=null){document.MM_sr[j++]=x; if(!x.oSrc)
x.oSrc=x.src; x.src=a[i+2];}
}
//-->
</script>
</head>
<body bgcolor="#FFFFFF" text="#000000" onLoad="MM_preloadImages('botao_
sobre.gif')">
<a href="http://www.vivaolinux.com.br" onMouseOut="MM_swapImgRestore()"
onMouseOver="MM_swapImage('minha_imagem_cambiavel','','botao_sobre.gif',1)"><img name="minha_imagem_cambiavel" border="0" src="botao.gif" width="120" height="20"></a>
</body>
</html>
Até mais galerinha! =D
Outras dicas deste autor
Nenhuma dica encontrada.
Leitura recomendada
Configurar efeito modal ao fundo de um elemento com jQuery
CSS: Colocar imagem personalizada como botão submit
CSS3 - Forçando quebra de linha em URL longa
Comentários
[1] Comentário enviado por pointmasters.net em 14/02/2004 - 16:09h
Orra cara bem legal! :P!!!
No DW tbem tem isso..
Orra cara bem legal! :P!!!
No DW tbem tem isso..
[2] Comentário enviado por fhm_online em 16/02/2004 - 07:57h
Sim, no Dreamweaver tem esta opção. Está com o nome de Imagem Cambiável também...
Sim, no Dreamweaver tem esta opção. Está com o nome de Imagem Cambiável também...
[3] Comentário enviado por diogozanetti em 16/04/2004 - 08:39h
notei que utilizou a função do dreamweaver embutida para imagens cambiáveis.
notei que utilizou a função do dreamweaver embutida para imagens cambiáveis.
[4] Comentário enviado por slow.sj em 12/05/2006 - 07:00h
No meu DW que é em inglês, é chamado de imagem rollover, é super interessante e muito utilizado, ele cria automáticamente selecionando a imagem, mas quem gosta de codificar, é legal ver esses tópicos.
No meu DW que é em inglês, é chamado de imagem rollover, é super interessante e muito utilizado, ele cria automáticamente selecionando a imagem, mas quem gosta de codificar, é legal ver esses tópicos.
[5] Comentário enviado por rickments em 06/07/2006 - 09:05h
Muito bom :}
com a função do dreamweaver
Muito bom :}
com a função do dreamweaver
[7] Comentário enviado por removido em 04/05/2009 - 18:41h
Gostei muito da sua dica. Muito jeitosa.. Eu costumo fazer os botões com CSS porque ás vezes nem em todos os browsers algumas funções com php. nao ficam a funcionar mt bem se darmos uma imagem ao Botão usando o HTML
Gostei muito da sua dica. Muito jeitosa.. Eu costumo fazer os botões com CSS porque ás vezes nem em todos os browsers algumas funções com php. nao ficam a funcionar mt bem se darmos uma imagem ao Botão usando o HTML
[8] Comentário enviado por ariel quintela em 25/06/2010 - 19:39h
poxa bem show isso em....
vlw veeyo vo ve so nos proximos sites que eu criar eu utilizo....
poxa bem show isso em....
vlw veeyo vo ve so nos proximos sites que eu criar eu utilizo....
Patrocínio
Site hospedado pelo provedor RedeHost.
Destaques
Artigos
Compartilhando a tela do Computador no Celular via Deskreen
Como Configurar um Túnel SSH Reverso para Acessar Sua Máquina Local a Partir de uma Máquina Remota
Configuração para desligamento automatizado de Computadores em um Ambiente Comercial
Dicas
Como renomear arquivos de letras maiúsculas para minúsculas
Imprimindo no formato livreto no Linux
Vim - incrementando números em substituição
Efeito "livro" em arquivos PDF
Como resolver o erro no CUPS: Unable to get list of printer drivers
Tópicos
Não to conseguindo resolver este problemas ao instalar o playonelinux (1)
Excluir banco de dados no xampp (1)
Top 10 do mês
-
Xerxes
1° lugar - 65.926 pts -
Fábio Berbert de Paula
2° lugar - 51.272 pts -
Buckminster
3° lugar - 17.665 pts -
Mauricio Ferrari
4° lugar - 15.450 pts -
Alberto Federman Neto.
5° lugar - 14.086 pts -
Diego Mendes Rodrigues
6° lugar - 13.688 pts -
Daniel Lara Souza
7° lugar - 13.094 pts -
Andre (pinduvoz)
8° lugar - 10.449 pts -
edps
9° lugar - 10.658 pts -
Alessandro de Oliveira Faria (A.K.A. CABELO)
10° lugar - 10.561 pts
Scripts
[Python] Automação de scan de vulnerabilidades
[Python] Script para analise de superficie de ataque
[Shell Script] Novo script para redimensionar, rotacionar, converter e espelhar arquivos de imagem
[Shell Script] Iniciador de DOOM (DSDA-DOOM, Doom Retro ou Woof!)
[Shell Script] Script para adicionar bordas às imagens de uma pasta
A maior comunidade GNU/Linux da América Latina! Artigos, dicas, tutoriais, fórum, scripts e muito mais. Ideal para quem busca auto-ajuda.
Site hospedado por:
