Usamos cookies para medir audiência e melhorar sua experiência. Você pode aceitar ou recusar a qualquer momento. Veja sobre o iMasters.
Bom pessoal, venho mais uma vez tentar uma solução para um problema, não entendo muito de construção de websites, fiz uma página e gostaria de inserir um efeito no botão ENVIAR de meu formulário. Eu mesmo criei o botão, que está funcionando perfeitamente no formulário, mais está sem vida nenhuma, gostaria de fazer com que ele mudasse de cor quando o mouse passase sobre ele. Como posso fazer isso??? Segue script que estou usando:
<Html>
<Head>
<Title>Contato</Title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<script language="javascript" type="text/javascript">
function valida()
{
var n, e, a, r;
n = document.form1.nomerem;
e = document.form1.emailrem;
a = document.form1.assunto;
r = document.form1.recado;
if(n.value == ""){
alert("Preencha o campo nome");
n.focus();
return false;
}else if(e.value == ""){
alert("Preencha o campo e-mail");
e.focus();
return false;
}else if(a.value == ""){
alert("Preencha o campo assunto");
a.focus();
return false;
}else if(r.value == ""){
alert("Preencha o campo mensagem");
r.focus();
return false;
}
}
</script>
</Head>
<style type="text/css">
body {
scrollbar-arrow-color: #000000;
scrollbar-base-color: #666666;
scrollbar-dark-shadow-color: #666666;
scrollbar-track-color: #9C9C9C;
scrollbar-face-color: #666666;
scrollbar-shadow-color: #666666;
scrollbar-highlight-color: #666666;
scrollbar-3d-light-color: #000000;
}
.limpa_form {
background: url(imagens/cancel.png) no-repeat;
border: 0px;
cursor: pointer;
width: 60px;
height: 20px;
}
.envia_form {
background: url(imagens/button.png) no-repeat;
border: 0px;
cursor: pointer;
width: 60px;
height: 20px;
}
</style>
<Body Background=imagens\fundo.png>
<Marquee ScrollAmount=180 Scrolldelay=1 Behavior="Slide" Loop=1><img src=imagens\contato.jpg></Marquee>
<br>
<br>
<Font Face=Tahoma Size=2 Color=#FFFFFF>
<b> Contato </b> <img src=imagens\indicador.png Width=12 Align=Middle>
</Font>
<br />
<Font Face=Tahoma Size=1 Color=#9C9C9C>
<p align='justify'>Fale com a <b>DELPHI</b> através do formulário abaixo.</p>
<br />
<div align="left">
<form method="post" enctype="multpart/formdata" name="form1" action="contato.asp" onsubmit="return valida();">
<table width="47%" border="0" cellspacing="2" cellpadding="2">
<font face="tahoma" size="1" color=#9C9C9C>
<label for="contact_name"> *Digite seu Nome:</label>
<br />
<input type="text" name="nomerem" id="contact_name" size="30" class="inputbox" value="" />
<br />
<label id="contact_emailmsg" for="contact_email"> *Endereço de E-mail:</label>
<br />
<input type="text" id="contact_email" name="emailrem" size="30" value="" class="inputbox required validate-email" maxlength="100" />
<br />
<label for="contact_subject"> *Assunto da Mensagem:</label>
<br />
<input type="text" name="assunto" id="contact_subject" size="30" class="inputbox" value="" />
<br /><br />
<label id="contact_textmsg" for="contact_text"> *Digite sua Mensagem:</label>
<br />
<textarea cols="35" rows="6" name="recado" id="contact_text" class="inputbox required"></textarea>
<tr>
<td colspan="2">
<div align="left">
<input class="envia_form" type="submit" name="enviar" value="">
<input class="limpa_form" type="reset" name="reset" value="">
</div>
</tr>
</table>
</form>
</div>
</Font>
</Body>
</Html>Não consegui encontrar nada que me ajudasse! você não pode me ajudar com esse problema?
>
http://forum.imasters.com.br/public/style_emoticons/default/seta.gif http://www.google.com.br/search?hl=pt-BR&rlz=1C1_____enBR329BR329&q=:hover+CSS&btnG=Pesquisar&meta=lr%3Dlang_pt by Google
Sou totalmente leigo no assunto cara, não entendo muito se você puder me dá uma força aew! Será que você poderia me ajudar a ajustar esse códico no meu script?
<html>
<head>
<title>Criando um efeito rollover com CSS</title>
<link href="rollover.css" rel="stylesheet" type="text/css" />
</head>
<body>
<p><a href="[http://www.infowester.com/"](http://www.infowester.com/) id="efeito">InfoWester</a></p>
</body>
</html>
<!--
#efeito {
width: 207px; height: 19px;
overflow: hidden;
background: url(rollover.gif) top left no-repeat;
display: block;
text-indent: 10000px;
}
#efeito:hover {
background-position: bottom left;
}
-->
Não sei como ajustar esse código ao meu script para que funcione! Se puder me dar uma força eu agradeço!
faz assim
<style type='text/css'>
#botao
{
border:1px solid black;
background-color:lightblue;
color:black;
width:auto;
height:auto;
text-align:center;
}
#botao:hover
{
border:1px solid black;
background-color:black
color:white;
width:auto;
height:auto;
text-align:center;
}
</style>
Dae no botao você faz assim
<input type='submit' id='botao' value = 'Enviar' />
Só lembrando que o Internet Explorer 6 não aceita o estado :hover em qualquer elemento que não seja o a. <_<
http://forum.imasters.com.br/public/style_emoticons/default/thumbsup.gif
>
Só lembrando que o Internet Explorer 6 não aceita o estado :hover em qualquer elemento que não seja o a. <_<
http://forum.imasters.com.br/public/style_emoticons/default/thumbsup.gif
Estou usando exatamente o internet explorer 6, não existe uma maneira de utilizar em todos os IE?
>
>
Só lembrando que o Internet Explorer 6 não aceita o estado :hover em qualquer elemento que não seja o a. <_<
http://forum.imasters.com.br/public/style_emoticons/default/thumbsup.gif
Estou usando exatamente o internet explorer 6, não existe uma maneira de utilizar em todos os IE?
Ela permite usar seletores mesmo que o navegador não o suporte, simulando-os.
Ou se não quiser usar só JavaScript, há várias soluções http://forum.imasters.com.br/public/style_emoticons/default/seta.gif http://www.google.com.br/search?sourceid=chrome&ie=UTF-8&q=:hover+ie6
http://forum.imasters.com.br/public/style_emoticons/default/thumbsup.gif
Procure pelo :hover do CSS.
http://forum.imasters.com.br/public/style_emoticons/default/thumbsup.gif