Botões com imagem cambiável
Publicado por Fernando Hidalgo Mansano em 14/02/2004
[ Hits: 15.256 ]
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
Assinatura personalizada com imagens no Gmail
CSS3 - Forçando quebra de linha em URL longa
Como evitar que o CSS do teu site fique armazenado em cache
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
Enviar mensagem ao usuário trabalhando com as opções do php.ini
Meu Fork do Plugin de Integração do CVS para o KDevelop
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
Compartilhamento de Rede com samba em modo Público/Anônimo de forma simples, rápido e fácil
Cups: Mapear/listar todas as impressoras de outro Servidor CUPS de forma rápida e fácil
Criando uma VPC na AWS via CLI
Tópicos
Tem como instalar o gerenciador AMD Adrenalin no Ubuntu 24.04? (6)
Top 10 do mês
-
Xerxes
1° lugar - 67.288 pts -
Fábio Berbert de Paula
2° lugar - 49.758 pts -
Renato Michnik de Carvalho
3° lugar - 27.311 pts -
Buckminster
4° lugar - 17.095 pts -
Mauricio Ferrari
5° lugar - 14.927 pts -
Alberto Federman Neto.
6° lugar - 14.161 pts -
Diego Mendes Rodrigues
7° lugar - 13.564 pts -
Daniel Lara Souza
8° lugar - 13.528 pts -
edps
9° lugar - 11.459 pts -
Andre (pinduvoz)
10° lugar - 11.238 pts
Scripts
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:
