Botões com imagem cambiável
Publicado por Fernando Hidalgo Mansano em 14/02/2004
[ Hits: 15.073 ]
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
Como evitar que o CSS do teu site fique armazenado em cache
Assinatura personalizada com imagens no Gmail
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
Atenção a quem posta conteúdo de dicas, scripts e tal (1)
Artigos
Manutenção de sistemas Linux Debian e derivados com apt-get, apt, aptitude e dpkg
Melhorando o tempo de boot do Fedora e outras distribuições
Como instalar as extensões Dash To Dock e Hide Top Bar no Gnome 45/46
Dicas
Instalar Google Chrome no Debian e derivados
Consertando o erro do Sushi e Wayland no Opensuse Leap 15
Instalar a última versão do PostgreSQL no Lunix mantendo atualizado
Flathub na sua distribuição Linux e comandos básicos de gerenciamento
Tópicos
Top 10 do mês
-
Xerxes
1° lugar - 72.336 pts -
Fábio Berbert de Paula
2° lugar - 57.707 pts -
Clodoaldo Santos
3° lugar - 44.826 pts -
Buckminster
4° lugar - 26.323 pts -
Sidnei Serra
5° lugar - 26.174 pts -
Daniel Lara Souza
6° lugar - 17.761 pts -
Mauricio Ferrari
7° lugar - 17.345 pts -
Alberto Federman Neto.
8° lugar - 17.382 pts -
Diego Mendes Rodrigues
9° lugar - 15.488 pts -
edps
10° lugar - 14.712 pts
Scripts
[Shell Script] Script para desinstalar pacotes desnecessários no OpenSuse
[Shell Script] Script para criar certificados de forma automatizada no OpenVpn
[Shell Script] Conversor de vídeo com opção de legenda
[C/C++] BRT - Bulk Renaming Tool
[Shell Script] Criação de Usuarios , Grupo e instalação do servidor de arquivos samba
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:
