Ir para conteúdo

POWERED BY:

Arquivado

Este tópico foi arquivado e está fechado para novas respostas.

shumi

Botão enviar

Por , em Desenvolvimento frontend

Recommended Posts

shumi    0

shumi
Postado

Galera tem como aquele botão enviar que todos os forms tem eu mudar a propriedade dele e jogar uma imagem que eu criei???

Compartilhar este post

Link para o post
Compartilhar em outros sites

shumi    0

shumi
Postado

Entao deu certo, mas eu tenho o enviar e o resetar e os dois estao submetendo o form, como faço para diferenciar?Os dois eu fiz assim:<input type="image" name="envia" value="Confirmar" src="imagens/botao.jpg"><input type="image" name="limpa" value="Limpar" src="imagens/botao.jpg">

Compartilhar este post

Link para o post
Compartilhar em outros sites

shumi    0

shumi
Postado

beleza!Valeu!

beleza!Valeu!

Como eu faço pra se o user estiver com o mouse em cima do botão mudar o botão?Abraços

Compartilhar este post

Link para o post
Compartilhar em outros sites

Beraldo    864

Beraldo
Postado

deu certo. olha aqui:

 

<html>
<head>
<script language="JavaScript">
function apagar() {
  document.form.reset();
}
</script>
<title>TESTE</title></head>
<body>
<form name="form"  id="form">
<input type="text">
<input type="image" src="filme.gif" onclick="apagar(); return false;">
</body>
</html>
* O return false evita o envio do form.

 

 

Para mudar, você pode fazer um CSS, usando background-image. Seria bom usar uma ag <a> com href="java script: void(0);". Acho que dá certo.

 

Abraço

Compartilhar este post

Link para o post
Compartilhar em outros sites

shumi    0

shumi
Postado

deu certinho cara!!!!como que faz pra mudar o botao quando estiver com o mouse em cima???não entendo muito de CSS...

Compartilhar este post

Link para o post
Compartilhar em outros sites

Beraldo    864

Beraldo
Postado

Dê uma olhada neste link e veja se ajuda:

É um exemplo em Menus, mas dá para você pegar o "espírito da coisa". :) hehe

 

http://www.maujor.com/tutorial/menurollimg.php

 

Esse é um ótimo site para aprender CSS

 

Abraço

Compartilhar este post

Link para o post
Compartilhar em outros sites

shumi    0

shumi
Postado

Eae Bom dia!

Tava tentando fazer aqui e fiz assim:

<style type="text/css">#menu { position: absolute; left: ## px; /*posição à direita*/top: ## px; /*posição abaixo*/width: 180px; }#menu ul {list-style-type: none; /*remove o marcador*/ margin: 0; /*remove o recuo IE e Opera*/ padding: 0; /*remove o recuo Mozilla e NN*/ font: bold 16px arial, helvetica, sans-serif;}#menu a {display: block;padding: 1px 0 1px 25px;border: 1px solid #000000;width: 180px;background-color: #339966;color: #FFFFFF;text-decoration: none;background-image: url(imagens/botao.jpg); voice-family: "\"}\"";  /*Box Model Hack*/voice-family:inherit;width:153px;}body>#menu a {width:153px;}#menu a:hover { border: 1px solid #000000; background-color:#FFFF99; background-image: url(imagens/botao2.jpg); color:#000000; }</style>

e assim:

<div id="menu"><table><tr><td><ul><li><input type="image" name="envia" value="Confirmar" src="imagens/botao.jpg"></li></ul></td><td><ul><li><input type="image" name="limpa" value="Limpar" src="imagens/botao.jpg" onClick="apagar(); return false;"></li></ul></td></tr>  <tr>	<td><div align="center" class="textoazul">Enviar</div></td>	<td><div align="center" class="textoazul">Limpar</div></td>  </tr></table></div>

Mas não rolou...

Abraços

Compartilhar este post

Link para o post
Compartilhar em outros sites

Beraldo    864

Beraldo
Postado

Tente com este CSS:

 

<style type="text/css">

#menu {

position: absolute;

left: 30px; /*posição à direita*/

top: 30px; /*posição abaixo*/

width: 180px;

}

#menu ul {

list-style-type: none; /*remove o marcador*/

margin: 0; /*remove o recuo IE e Opera*/

padding: 0; /*remove o recuo Mozilla e NN*/

font: bold 16px arial, helvetica, sans-serif;

}

#menu a {

display: block;

padding: 1px 0 1px 25px;

border: 1px solid #000000;

width: 180px;

background-color: #339966;

color: #FFFFFF;

text-decoration: none;

background-image: url(imagens/botao.jpg);

voice-family: "\"}\""; /*Box Model Hack*/

voice-family:inherit;

width:153px;

}

#menu a {width:153px;}

#menu a:hover {

border: 1px solid #000000;

background-color:#FFFF99;

background-image: url(imagens/botao2.jpg);

color:#000000;

}

</style>

Veja o que está em negrito, eu alterei seu conteúdo.

Também tirei aquele body> que estava lá à toa.

 

*Tente não usar tabelas para os menus, visto que eles estão em uma lista.

 

Teste aí!

Compartilhar este post

Link para o post
Compartilhar em outros sites

shumi    0

shumi
Postado

opa! beleza!Valeu pela dica!deu certo!!!!Valeu!!!

Compartilhar este post

Link para o post
Compartilhar em outros sites
Ir para a lista de tópicos Desenvolvimento frontend
×

Informação importante

Ao usar o fórum, você concorda com nossos Termos e condições.

  Aceito