Botões com imagem cambiável

Publicado por Fernando Hidalgo Mansano em 14/02/2004

[ Hits: 14.245 ]

 


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:

<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>

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>

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>

Até mais galerinha! =D

Outras dicas deste autor
Nenhuma dica encontrada.
Leitura recomendada

CSS3 - Forçando quebra de linha em URL longa

Javascript - Criando galeria de imagens com "LIGTHBOX"

HTML sem tabelas (tableless)

Acessibilidade e os padrões Web

Para sempre VOL

  

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..

[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...

[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.

[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.

[5] Comentário enviado por rickments em 06/07/2006 - 09:05h

Muito bom :}
com a função do dreamweaver

[6] Comentário enviado por comfaa em 28/10/2008 - 13:30h

muito bom

[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

[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....



Contribuir com comentário




Patrocínio

Site hospedado pelo provedor RedeHost.
Linux banner
Linux banner
Linux banner

Destaques

Artigos

Dicas

Tópicos

Top 10 do mês

Scripts