imagem em botão submit não funciona no IE
Oi Gente!
Tô com um teclado virtual cujos botões precisam ter uma imagem de fundo, e isso não funciona no IE6 e IE7. (não me apedrejem até a morte, o negócio precisa funcionar no ie6 de qualquer jeito).
Em vez de aparecer a imagem de fundo, fica aquela imagem padrão de botões do ie. E quando mudo o tipo do input pra "image", daí o teclado virtual não funciona direito - ou seja, tem que ser no submit mesmo.
Como consertar?
Aí vai o código:
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Digite sua senha</title>
<style type="text/css">background-image:url(imgs/bg.jpg);
background-repeat:no-repeat;
overflow-x: hidden; overflow-y: hidden;
}
#saudacao {
color:#fff;
font-family:Arial, Helvetica, sans-serif;
font-size:16px;
position:absolute;
left: 548px;
width: 200px;
top: 20px;
text-align:left;
}position:absolute;
width: 197px;
height: 62px;
background-image:url(../botao_bg.png);
font-size: 20px;
font-family:Arial, Helvetica, sans-serif;
color: #fff;
border: none;
}
#campo1 {
left: 25px;
top: 200px;
}
#campo2 {
left: 27px;
top: 307px;
}
#campo3{
left: 27px;
top: 416px;
}
#campo4 {
left: 29px;
top: 524px;
}
#campo5 {
left: 576px;
top: 198px;
}
#campo6 {
left: 577px;
top: 307px;
}
#campo7 {
left: 578px;
top: 417px;
}
#campo8 {
left: 577px;
top: 524px;
}
#visor {
position:absolute;
width: 130px;
height: 50px;
left: 335px;
top: 349px;
font-family:Arial, Helvetica, sans-serif;
font-size: 58px;
color: #a5a5a5;
text-align:center;
line-height: 50px;
}
</style>
<script language="javascript" type="text/javascript">
function Senha(valor)var visor = document.getElementById('visor');
var valor = visor.value;
var maxlen = visor.getAttribute('maxlength');
if(visor.value.length >= maxlen)
{
visor.value = visor.value.substring(0,maxlen);
document.getElementById('form1').submit();
return false;
}
//Objeto de acesso ao campo hidden senha
var senha = document.getElementById("senha");visor.value += '*';
senha.value += '*';
}
</Script>
<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript" src="js/fixpng.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("body").fixPng();
});
</script>
</head>
<body scroll="no">
<div id="teclas">
<form name="form1" id="form1" action="sack.html" method="post" onMouseDown="javascript: Senha();" >
<!-- Como deixamos o campo password cdesabilitado para digitação ele não envia as informações
então utilizamos um campo hidden para postar a senha digitada e o password somente para
o usuario visualizar quantos numeros ja digitou -->
<input type="hidden" name="senha" id="senha" maxlength="4" />
<input type="button" style="background-image:url(imgs/alfa1.png);" src="../botao_bg.png" value="D N E P H" onClick="Senha(this.value)" id="campo1" />
<input type="button" value="A R G T S" onClick="Senha(this.value)" id="campo2"/>
<input type="button" value="V B X I L" onClick="Senha(this.value)" id="campo3"/>
<input type="button" value="M C X D J" onClick="Senha(this.value)" id="campo4"/>
<input type="button" value="X N O P Q" onClick="Senha(this.value)" id="campo5"/>
<input type="button" value="V R S T U" onClick="Senha(this.value)" id="campo6"/>
<input type="button" value="V W X Y Z" onClick="Senha(this.value)" id="campo7"/>
<input type="button" value="V A X D Z" onClick="Senha(this.value)" id="campo8"/>
<input type="text" name="visor" id="visor" maxlength="4" />
</form>
</div>Obrigada!
Discussão (12)
Carregando comentários...