Com colocar imagem no botão de enviar arquivos?

[Dark_Subnumber 0]

Queria saber como posso colocar uma imagem no lugar do botão "Enviar arquivos". Sei como botar uma imagem no lugar do ENVIAR, mas quando substituo por type="file", as imagens não aparecem.

 

No caso do submit:

 

<input type="file" src="submit.png" width="336" height="60" value="submit" onMouseOver="this.src='submit2.jpg'" onMouseOut="this.src='submit.png'" >

 

 

Nesse caso a imagem muda quando se passa o mouse por cima, como posso fazer isso com o botão de enviar? Não venham dizer que isso não é possível, porque o megaupload era assim...

[Vinicius Ianni 189]

<input name="botao" type="image" src="imagem.gif" width="1000" height="2000">

<input type="image" src="butup.gif" alt="Submit button">

 

com efeito em js:

<a href="javascript:document.myform.submit()" 
onmouseover="document.myform.sub_but.src='butdown.gif'" 
onmouseout="document.myform.sub_but.src='butup.gif'" 
onclick="return val_form_this_page()">

<img src="butup.gif" 
width="143" height="39" border="0" alt="Submit this form" 
name="sub_but" />

</a>

 

Existem várias soluções para o efeito, uma pesquisa por "imagem submit form" dá alguns resultados bem interessantes ;)

[Marrabel 20]

Da pra fazer com CSS amiguinho:

 

Exemplo

 

CSS:

 

.botao{
background:url(../pasta/imagem1.gif);
cursor:pointer;
height: ... ;/* Aqui você põe a altura da imagem
width: ... ;/* Aqui você põe a largura da imagem
}

.botao:hover {
background:url(../pasta/imagem2.gif)
}

 

HTML:

 

 

<input name="botao" type="button" class="botao">

 

Daí ele irá inserir a "imagem1.gif" nesta classe e ao passar o mouse carrega-se a "imagem2.gif".

 

Dando o efeito de mudança da imagem.

 

Mas neste caso cabe a você se vai fazer em JS ou CSS.

 

Espero ter ajudado.

[Giovani 104]

Nesse caso não vai funcionar, pois estamos falando de um input file :mellow:

Da pra fazer com CSS amiguinho:

[Marrabel 20]

Eu me referia ao efeito de mudança de imagem.

 

Só como sugestão.

[Giovani 104]

Queria saber como posso colocar uma imagem no lugar do botão "Enviar arquivos". Sei como botar uma imagem no lugar do ENVIAR, mas quando substituo por type="file", as imagens não aparecem.

 

Eu me referia ao efeito de mudança de imagem.

 

:thumbsup:

[Diéssica 140]

:seta: http://ruancarlos.com.br/Blog/estilizando-input-file-com-css/