Daniel de Aguiar Daniel de Aguiar  • 10.07.14 19:08

[SUPORTE] Fazer uma imagem virar botão Submit [SUPORTE] Empty [SUPORTE] Fazer uma imagem virar botão Submit [SUPORTE] 10.07.14 19:08

Vocês normalmente veeem que a maioria de layouts são desenhados, 
Eu desenhei o meu própio e comecei a programar, me dei conta que no botão registrar precisava virar um botão do tipo SUBMIT, más como sabes, é uma IMAGEM, eu estou na dúvida de como fazer ela virar um botão submit. 

Dados: 
 Print do projeto ->   https://i.imgur.com/uphOQBj.png
 
Código:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<!-- saved from url=(0014)about:internet -->
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Cadastre-se</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<style type="text/css">
d img {display: block;}
    td img {display: block;}
input[type="text"] {
border: 0;
}
input[type="password"] {
border: 0;
}
</style>
<!--Fireworks CS6 Dreamweaver CS6 target.  Created Thu Jul 10 18:07:08 GMT-0300 (Hora oficial do Brasil) 2014-->
</head>
<body bgcolor="#ffffff">
<table style="display: inline-table;" border="0" cellpadding="0" cellspacing="0" width="660" align="center">
<!-- fwtable fwsrc="Sem título" fwpage="Página 1" fwbase="index.png" fwstyle="Dreamweaver" fwdocid = "1586178060" fwnested="0" -->
  <tr>
   <td><img src="imagens/spacer.gif" width="37" height="1" alt="" /></td>
   <td><img src="imagens/spacer.gif" width="96" height="1" alt="" /></td>
   <td><img src="imagens/spacer.gif" width="189" height="1" alt="" /></td>
   <td><img src="imagens/spacer.gif" width="23" height="1" alt="" /></td>
   <td><img src="imagens/spacer.gif" width="13" height="1" alt="" /></td>
   <td><img src="imagens/spacer.gif" width="263" height="1" alt="" /></td>
   <td><img src="imagens/spacer.gif" width="11" height="1" alt="" /></td>
   <td><img src="imagens/spacer.gif" width="28" height="1" alt="" /></td>
   <td><img src="imagens/spacer.gif" width="1" height="1" alt="" /></td>
  </tr>

 <form name="signup" method="post" action="cadastrando.php">

  <tr>
   <td colspan="8"><img name="index_r1_c1" src="imagens/index_r1_c1.png" width="660" height="102" id="index_r1_c1" alt="" /></td>
   <td><img src="imagens/spacer.gif" width="1" height="102" alt="" /></td>
  </tr>
  <tr>
   <td rowspan="8" colspan="2"><img name="index_r2_c1" src="imagens/index_r2_c1.png" width="133" height="200" id="index_r2_c1" alt="" /></td>
   <td colspan="2"> <input type="text" name="nome"/> </td>
   <td rowspan="8"><img name="index_r2_c5" src="imagens/index_r2_c5.png" width="13" height="200" id="index_r2_c5" alt="" /></td>
   <td rowspan="7" colspan="2"><img name="index_r2_c6" src="imagens/index_r2_c6.png" width="274" height="178" id="index_r2_c6" alt="" /></td>
   <td rowspan="10"><img name="index_r2_c8" src="imagens/index_r2_c8.png" width="28" height="338" id="index_r2_c8" alt="" /></td>
   <td><img src="imagens/spacer.gif" width="1" height="34" alt="" /></td>
  </tr>
  <tr>
   <td colspan="2"><img name="index_r3_c3" src="imagens/index_r3_c3.png" width="212" height="13" id="index_r3_c3" alt="" /></td>
   <td><img src="imagens/spacer.gif" width="1" height="13" alt="" /></td>
  </tr>
  <tr>
   <td colspan="2"> <input type="text" name="pais"/> </td>
   <td><img src="imagens/spacer.gif" width="1" height="34" alt="" /></td>
  </tr>
  <tr>
   <td colspan="2"><img name="index_r5_c3" src="imagens/index_r5_c3.png" width="212" height="12" id="index_r5_c3" alt="" /></td>
   <td><img src="imagens/spacer.gif" width="1" height="12" alt="" /></td>
  </tr>
  <tr>
   <td colspan="2"><input type="text" name="pais"/></td>
   <td><img src="imagens/spacer.gif" width="1" height="34" alt="" /></td>
  </tr>
  <tr>
   <td colspan="2"><img name="index_r7_c3" src="imagens/index_r7_c3.png" width="212" height="17" id="index_r7_c3" alt="" /></td>
   <td><img src="imagens/spacer.gif" width="1" height="17" alt="" /></td>
  </tr>
  <tr>
   <td colspan="2"><input type="password" name="senha"/></td>
   <td><img src="imagens/spacer.gif" width="1" height="34" alt="" /></td>
  </tr>
  
  </form>
  
  <tr>
   <td colspan="2"><img name="index_r9_c3" src="imagens/index_r9_c3.png" width="212" height="22" id="index_r9_c3" alt="" /></td>
   <td colspan="2"><img name="index_r9_c6" src="imagens/index_r9_c6.png" width="274" height="22" id="index_r9_c6" alt="" /></td>
   <td><img src="imagens/spacer.gif" width="1" height="22" alt="" /></td>
  </tr>
  <tr>
   <td rowspan="2"><img name="index_r10_c1" src="imagens/index_r10_c1.png" width="37" height="138" id="index_r10_c1" alt="" /></td>
  
  
   /*imagem Do cadastrar  \/
  
   <td colspan="2"> <img name="index_r10_c2" src="imagens/index_r10_c2.png" width="285" height="108" id="index_r10_c2" alt="" /></td>
  
   //Imagem do Cadastrar /\  
  
   <td rowspan="2"><img name="index_r10_c4" src="imagens/index_r10_c4.png" width="23" height="138" id="index_r10_c4" alt="" /></td>
  
   <td colspan="2"><img name="index_r10_c5" src="imagens/index_r10_c5.png" width="276" height="108" id="index_r10_c5" alt="" /></td>
  
   <td rowspan="2"><img name="index_r10_c7" src="imagens/index_r10_c7.png" width="11" height="138" id="index_r10_c7" alt="" /></td>
   <td><img src="imagens/spacer.gif" width="1" height="108" alt="" /></td>
  </tr>
  <tr>
   <td colspan="2"><img name="index_r11_c2" src="imagens/index_r11_c2.png" width="285" height="30" id="index_r11_c2" alt="" /></td>
   <td colspan="2"><img name="index_r11_c5" src="imagens/index_r11_c5.png" width="276" height="30" id="index_r11_c5" alt="" /></td>
   <td><img src="imagens/spacer.gif" width="1" height="30" alt="" /></td>
  </tr>
</table>
</body>
</html>

avatar FelipeRun  • 10.07.14 19:10

[SUPORTE] Fazer uma imagem virar botão Submit [SUPORTE] Empty Re: [SUPORTE] Fazer uma imagem virar botão Submit [SUPORTE] 10.07.14 19:10

Olá, tipo um botão 3D? q quando você passa o Mouse em cima muda a cor algo desse tipo?

Daniel de Aguiar Daniel de Aguiar  • 10.07.14 19:14

avatar FelipeRun  • 10.07.14 19:20

[SUPORTE] Fazer uma imagem virar botão Submit [SUPORTE] Empty Re: [SUPORTE] Fazer uma imagem virar botão Submit [SUPORTE] 10.07.14 19:20

Oi,
 Abra seu fireworks vá no seu Botão, clique nele e clique em F8, depois clique em BOTÃO veja o exemplo abaixo:
[Tens de ter uma conta e sessão iniciada para poderes visualizar este link] - 1

 De 2 clikes no botão, veja onde está circulado em vermelho, coloque '' Sobre '' e depois clique em Copiar gráfico a cima.
[Tens de ter uma conta e sessão iniciada para poderes visualizar este link] - 2

n4zun n4zun  • 10.07.14 19:23

[SUPORTE] Fazer uma imagem virar botão Submit [SUPORTE] Empty Re: [SUPORTE] Fazer uma imagem virar botão Submit [SUPORTE] 10.07.14 19:23

Simples, siga o tutorial abaixo:

1° Adicione o botão submit ao seu HTML
2° Crie um seletor (div) no seu CSS
2° Adicione os seguintes comandos ao seu seletor:
background-image: url(imagens/sua-imagem.png);
position: absolute;
width: LARGURA DA IMAGEMpx;
height: ALTURA DA IMAGEMpx;
4° Adicione ao seu HTML o div, como no exemplo abaixo:
<input name="button" type="button" class="O NOME DO SEU SELETOR/DIV" id="button" value="Enviar">


Pronto, seu botão esta feito.
Para outra dúvida, veja o print: [Tens de ter uma conta e sessão iniciada para poderes visualizar este link]

Example Example  • 10.07.14 19:23

[SUPORTE] Fazer uma imagem virar botão Submit [SUPORTE] Empty Re: [SUPORTE] Fazer uma imagem virar botão Submit [SUPORTE] 10.07.14 19:23

Ta ai ! Index:

Código:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<!-- saved from url=(0014)about:internet -->
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Cadastre-se</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<style type="text/css">
d img {display: block;}
    td img {display: block;}
input[type="text"] {
border: 0;
width: 212px;
height: 32px;
}
input[type="password"] {
border: 0;
width: 212px;
height: 32px;
}
input#submit_button {
background: url(imagens/index_r10_c5.png);
width: 276px;
height: 108px;
border: 0;
}
</style>
<!--Fireworks CS6 Dreamweaver CS6 target.  Created Thu Jul 10 18:07:08 GMT-0300 (Hora oficial do Brasil) 2014-->
</head>
<body bgcolor="#ffffff">
<table style="display: inline-table;" border="0" cellpadding="0" cellspacing="0" width="660" align="center">
<!-- fwtable fwsrc="Sem título" fwpage="Página 1" fwbase="index.png" fwstyle="Dreamweaver" fwdocid = "1586178060" fwnested="0" -->
  <tr>
  <td><img src="imagens/spacer.gif" width="37" height="1" alt="" /></td>
  <td><img src="imagens/spacer.gif" width="96" height="1" alt="" /></td>
  <td><img src="imagens/spacer.gif" width="189" height="1" alt="" /></td>
  <td><img src="imagens/spacer.gif" width="23" height="1" alt="" /></td>
  <td><img src="imagens/spacer.gif" width="13" height="1" alt="" /></td>
  <td><img src="imagens/spacer.gif" width="263" height="1" alt="" /></td>
  <td><img src="imagens/spacer.gif" width="11" height="1" alt="" /></td>
  <td><img src="imagens/spacer.gif" width="28" height="1" alt="" /></td>
  <td><img src="imagens/spacer.gif" width="1" height="1" alt="" /></td>
  </tr>

 <form name="signup" method="post" action="cadastrando.php">

  <tr>
  <td colspan="8"><img name="index_r1_c1" src="imagens/index_r1_c1.png" width="660" height="102" id="index_r1_c1" alt="" /></td>
  <td><img src="imagens/spacer.gif" width="1" height="102" alt="" /></td>
  </tr>
  <tr>
  <td rowspan="8" colspan="2"><img name="index_r2_c1" src="imagens/index_r2_c1.png" width="133" height="200" id="index_r2_c1" alt="" /></td>
  <td colspan="2"> <input type="text" name="nome"/> </td>
  <td rowspan="8"><img name="index_r2_c5" src="imagens/index_r2_c5.png" width="13" height="200" id="index_r2_c5" alt="" /></td>
  <td rowspan="7" colspan="2"><img name="index_r2_c6" src="imagens/index_r2_c6.png" width="274" height="178" id="index_r2_c6" alt="" /></td>
  <td rowspan="10"><img name="index_r2_c8" src="imagens/index_r2_c8.png" width="28" height="338" id="index_r2_c8" alt="" /></td>
  <td><img src="imagens/spacer.gif" width="1" height="34" alt="" /></td>
  </tr>
  <tr>
  <td colspan="2"><img name="index_r3_c3" src="imagens/index_r3_c3.png" width="212" height="13" id="index_r3_c3" alt="" /></td>
  <td><img src="imagens/spacer.gif" width="1" height="13" alt="" /></td>
  </tr>
  <tr>
  <td colspan="2"> <input type="text" name="pais"/> </td>
  <td><img src="imagens/spacer.gif" width="1" height="34" alt="" /></td>
  </tr>
  <tr>
  <td colspan="2"><img name="index_r5_c3" src="imagens/index_r5_c3.png" width="212" height="12" id="index_r5_c3" alt="" /></td>
  <td><img src="imagens/spacer.gif" width="1" height="12" alt="" /></td>
  </tr>
  <tr>
  <td colspan="2"><input type="text" name="pais"/></td>
  <td><img src="imagens/spacer.gif" width="1" height="34" alt="" /></td>
  </tr>
  <tr>
  <td colspan="2"><img name="index_r7_c3" src="imagens/index_r7_c3.png" width="212" height="17" id="index_r7_c3" alt="" /></td>
  <td><img src="imagens/spacer.gif" width="1" height="17" alt="" /></td>
  </tr>
  <tr>
  <td colspan="2"><input type="password" name="senha"/></td>
  <td><img src="imagens/spacer.gif" width="1" height="34" alt="" /></td>
  </tr>
 
  </form>
 
  <tr>
  <td colspan="2"><img name="index_r9_c3" src="imagens/index_r9_c3.png" width="212" height="22" id="index_r9_c3" alt="" /></td>
  <td colspan="2"><img name="index_r9_c6" src="imagens/index_r9_c6.png" width="274" height="22" id="index_r9_c6" alt="" /></td>
  <td><img src="imagens/spacer.gif" width="1" height="22" alt="" /></td>
  </tr>
  <tr>
  <td rowspan="2"><img name="index_r10_c1" src="imagens/index_r10_c1.png" width="37" height="138" id="index_r10_c1" alt="" /></td>
 
  <td colspan="2"> <img name="index_r10_c2" src="imagens/index_r10_c2.png" width="285" height="108" id="index_r10_c2" alt="" type="submit" /></td>
  <td rowspan="2"><img name="index_r10_c4" src="imagens/index_r10_c4.png" width="23" height="138" id="index_r10_c4" alt="" /></td>
 
  <td colspan="2"><input type="submit" name="submit_button" value="" id="submit_button"></input></td>
 
  <td rowspan="2"><img name="index_r10_c7" src="imagens/index_r10_c7.png" width="11" height="138" id="index_r10_c7" alt="" /></td>
  <td><img src="imagens/spacer.gif" width="1" height="108" alt="" /></td>
  </tr>
  <tr>
  <td colspan="2"><img name="index_r11_c2" src="imagens/index_r11_c2.png" width="285" height="30" id="index_r11_c2" alt="" /></td>
  <td colspan="2"><img name="index_r11_c5" src="imagens/index_r11_c5.png" width="276" height="30" id="index_r11_c5" alt="" /></td>
  <td><img src="imagens/spacer.gif" width="1" height="30" alt="" /></td>
  </tr>
</table>
</body>
</html>

FAÇA UM BECKAP DO ARQUIVO ORIGINAL.


Última edição por Example em 10.07.14 19:26, editado 1 vez(es)

Daniel de Aguiar Daniel de Aguiar  • 10.07.14 19:23

[SUPORTE] Fazer uma imagem virar botão Submit [SUPORTE] Empty Re: [SUPORTE] Fazer uma imagem virar botão Submit [SUPORTE] 10.07.14 19:23

Obrigado Lulart, más quando aperto F8 ele n funciona.
O meu computador é um notbook

avatar FelipeRun  • 10.07.14 19:25

[SUPORTE] Fazer uma imagem virar botão Submit [SUPORTE] Empty Re: [SUPORTE] Fazer uma imagem virar botão Submit [SUPORTE] 10.07.14 19:25

.-., tenta fazer oque example, sevens explicaram '-'

Daniel de Aguiar Daniel de Aguiar  • 10.07.14 19:26

[SUPORTE] Fazer uma imagem virar botão Submit [SUPORTE] Empty Re: [SUPORTE] Fazer uma imagem virar botão Submit [SUPORTE] 10.07.14 19:26

Para Example: 
Example, não funcionou, continuou a mesma coisa.

-----------------------------------------

Para Sevens:
Funcionou perfeitamente, porém o botão fica bugado: https://i.imgur.com/R3QDXUw.png

Example Example  • 10.07.14 20:11

[SUPORTE] Fazer uma imagem virar botão Submit [SUPORTE] Empty Re: [SUPORTE] Fazer uma imagem virar botão Submit [SUPORTE] 10.07.14 20:11

aqui:
Código:


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<!-- saved from url=(0014)about:internet -->
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Cadastre-se</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<style type="text/css">
d img {display: block;}
    td img {display: block;}
input[type="text"] {
border: 0;
width: 212px;
height: 32px;
}
input[type="password"] {
border: 0;
width: 212px;
height: 32px;
}
input#submit_button {
background: url(imagens/index_r10_c5.png);
width: 276px;
height: 108px;
border: 0;
}
.cadastrarsebutton{
background: url(imagens/index_r10_c2.png);
width: 285px;
height: 108px;
border: 0;
}
</style>
<!--Fireworks CS6 Dreamweaver CS6 target.  Created Thu Jul 10 18:07:08 GMT-0300 (Hora oficial do Brasil) 2014-->
</head>
<body bgcolor="#ffffff">
<table style="display: inline-table;" border="0" cellpadding="0" cellspacing="0" width="660" align="center">
<!-- fwtable fwsrc="Sem título" fwpage="Página 1" fwbase="index.png" fwstyle="Dreamweaver" fwdocid = "1586178060" fwnested="0" -->
  <tr>
  <td><img src="imagens/spacer.gif" width="37" height="1" alt="" /></td>
  <td><img src="imagens/spacer.gif" width="96" height="1" alt="" /></td>
  <td><img src="imagens/spacer.gif" width="189" height="1" alt="" /></td>
  <td><img src="imagens/spacer.gif" width="23" height="1" alt="" /></td>
  <td><img src="imagens/spacer.gif" width="13" height="1" alt="" /></td>
  <td><img src="imagens/spacer.gif" width="263" height="1" alt="" /></td>
  <td><img src="imagens/spacer.gif" width="11" height="1" alt="" /></td>
  <td><img src="imagens/spacer.gif" width="28" height="1" alt="" /></td>
  <td><img src="imagens/spacer.gif" width="1" height="1" alt="" /></td>
  </tr>

 <form name="signup" method="post" action="cadastrando.php">

  <tr>
  <td colspan="8"><img name="index_r1_c1" src="imagens/index_r1_c1.png" width="660" height="102" id="index_r1_c1" alt="" /></td>
  <td><img src="imagens/spacer.gif" width="1" height="102" alt="" /></td>
  </tr>
  <tr>
  <td rowspan="8" colspan="2"><img name="index_r2_c1" src="imagens/index_r2_c1.png" width="133" height="200" id="index_r2_c1" alt="" /></td>
  <td colspan="2"> <input type="text" name="nome"/> </td>
  <td rowspan="8"><img name="index_r2_c5" src="imagens/index_r2_c5.png" width="13" height="200" id="index_r2_c5" alt="" /></td>
  <td rowspan="7" colspan="2"><img name="index_r2_c6" src="imagens/index_r2_c6.png" width="274" height="178" id="index_r2_c6" alt="" /></td>
  <td rowspan="10"><img name="index_r2_c8" src="imagens/index_r2_c8.png" width="28" height="338" id="index_r2_c8" alt="" /></td>
  <td><img src="imagens/spacer.gif" width="1" height="34" alt="" /></td>
  </tr>
  <tr>
  <td colspan="2"><img name="index_r3_c3" src="imagens/index_r3_c3.png" width="212" height="13" id="index_r3_c3" alt="" /></td>
  <td><img src="imagens/spacer.gif" width="1" height="13" alt="" /></td>
  </tr>
  <tr>
  <td colspan="2"> <input type="text" name="pais"/> </td>
  <td><img src="imagens/spacer.gif" width="1" height="34" alt="" /></td>
  </tr>
  <tr>
  <td colspan="2"><img name="index_r5_c3" src="imagens/index_r5_c3.png" width="212" height="12" id="index_r5_c3" alt="" /></td>
  <td><img src="imagens/spacer.gif" width="1" height="12" alt="" /></td>
  </tr>
  <tr>
  <td colspan="2"><input type="text" name="pais"/></td>
  <td><img src="imagens/spacer.gif" width="1" height="34" alt="" /></td>
  </tr>
  <tr>
  <td colspan="2"><img name="index_r7_c3" src="imagens/index_r7_c3.png" width="212" height="17" id="index_r7_c3" alt="" /></td>
  <td><img src="imagens/spacer.gif" width="1" height="17" alt="" /></td>
  </tr>
  <tr>
  <td colspan="2"><input type="password" name="senha"/></td>
  <td><img src="imagens/spacer.gif" width="1" height="34" alt="" /></td>
  </tr>
 
  </form>
 
  <tr>
  <td colspan="2"><img name="index_r9_c3" src="imagens/index_r9_c3.png" width="212" height="22" id="index_r9_c3" alt="" /></td>
  <td colspan="2"><img name="index_r9_c6" src="imagens/index_r9_c6.png" width="274" height="22" id="index_r9_c6" alt="" /></td>
  <td><img src="imagens/spacer.gif" width="1" height="22" alt="" /></td>
  </tr>
  <tr>
  <td rowspan="2"><img name="index_r10_c1" src="imagens/index_r10_c1.png" width="37" height="138" id="index_r10_c1" alt="" /></td>
 
  <td colspan="2"><input type="submit" name="submit_button" value="" id="cadastro_button" class="cadastrarsebutton"></input></td>
  <td rowspan="2"><img name="index_r10_c4" src="imagens/index_r10_c4.png" width="23" height="138" id="index_r10_c4" alt="" /></td>
 
  <td colspan="2"><input type="submit" name="submit_button" value="" id="submit_button"></input></td>
 
  <td rowspan="2"><img name="index_r10_c7" src="imagens/index_r10_c7.png" width="11" height="138" id="index_r10_c7" alt="" /></td>
  <td><img src="imagens/spacer.gif" width="1" height="108" alt="" /></td>
  </tr>
  <tr>
  <td colspan="2"><img name="index_r11_c2" src="imagens/index_r11_c2.png" width="285" height="30" id="index_r11_c2" alt="" /></td>
  <td colspan="2"><img name="index_r11_c5" src="imagens/index_r11_c5.png" width="276" height="30" id="index_r11_c5" alt="" /></td>
  <td><img src="imagens/spacer.gif" width="1" height="30" alt="" /></td>
  </tr>
</table>
</body>
</html>

Example Example  • 11.07.14 1:03

[SUPORTE] Fazer uma imagem virar botão Submit [SUPORTE] Empty Re: [SUPORTE] Fazer uma imagem virar botão Submit [SUPORTE] 11.07.14 1:03

O autor já resolveu.

@Fechado
Permissões neste sub-fórum
Não podes responder a tópicos

BH Servers

Recomendamos a BH Servers com proteção DDOS gratuita em Cloud Server de alta performance. Entrega imediata.