F�rum Imagens no campo - formulario #525486

11/07/2015

Vi um site, mas n�o lembro qual, em que tinha um formulario de pagamento, e no campo para adicionar os numeros na trazeira do cart�o de credito quando colocava o cursor aparecia uma imagem mostrando isso, � javascript?

Fabricio Alves

Curtir t�pico

+ 2

Responder

Post mais votado

14/07/2015

Fabinhokls, funfou 100%, s� tenho a agradecer!!!

[img]http://arquivo.devmedia.com.br/forum/imagem/379120-20150714-140652.jpg[/img]

Fabricio Alves

Responder

Gostei + 1

Mais Posts

12/07/2015

F�bio F.

N�o necessariamente, isto pode ser feito em css. Mas n�s temos a tend�ncia a fazer em JavaScript por que ele � mais din�mico. S� que fica mais leve!
Antes de eu te enviar o c�digo. Por favor, me confirme!
Voc� quer uma mini janela quando a pessoa arrasta o mouse sobre o campo determinado?
Se for isso eu te mando o c�digo css, mas se for outro caso, eu terei que pensar se pode se feito em css ou s� em JavaScript!

Responder

Gostei + 1

12/07/2015

Fabricio Alves

Isso mesmo Fabinhkls, apenas colocando mouse, me mostre uma pequena imagem ao lado desse campo.

Responder

Gostei + 0

13/07/2015

Fabricio Alves

Ei, n�o esquece.

Responder

Gostei + 0

14/07/2015

F�bio F.

Olha se voc� for fazer isso e a imagem for ficar ao lado do campo o c�digo html dever� seguir esta codifica��o:

<form action="" method="post" class="formulario">
	<div class="efeito">
		<input type="text" class="campo" name="nome_completo" value="" placeholder="Digite Seu Nome" />
		<div class="imagem"></div>
	</div>
</form>

O c�digo css ser� respons�vel pelo efeito e � melhor que mantenha a div ao inv�s de utilizar o elemento/tag <img>.
O efeito de transi��o � causado pelo css no comando trasition e o comando que insere a imagem, ou neste caso, o seletor � o hover. N�o � o comando css, mas o seletor das tags.
Veja como ficaria no css...

.efeito .campo {width: 200px; height: 16px; padding: 7px 10px; border: solid 1px #898989; border-radius: 4px; font-family: verdana; font-size: 12px;}
.efeito .imagem {display: inline-block; opacity: 0; transition: opacity 2s; -webkit-transition: opacity 2s;}
.efeito:hover .imagem {position: absolute; width: 100px; height: 70px; background-image: url("imagem.jpg"); background-size: 100% 100%; opacity: 1; margin: 0px 5px;}

Meu c�digo todo ficou assim:

<!DOCTYPE html>
<html lang="pt-br">
	<head>
		<title>Teste</title>
		<meta charset="utf-8">
		<style type="text/css">
			.efeito .campo {width: 200px; height: 16px; padding: 7px 10px; border: solid 1px #898989; border-radius: 4px; font-family: verdana; font-size: 12px;}
			.efeito .imagem {display: inline-block; opacity: 0; transition: opacity 2s; -webkit-transition: opacity 2s;}
			.efeito:hover .imagem {position: absolute; width: 100px; height: 70px; background-image: url("imagem.jpg"); background-size: 100% 100%; opacity: 1; margin: 0px 5px;}
		</style>
	</head>
	<body>
		<form action="" method="post" class="formulario">
			<div class="efeito">
				<input type="text" class="campo" name="nome_completo" value="" placeholder="Digite Seu Nome" />
				<div class="imagem"></div>
			</div>
		</form>
	</body>
</html>

Se quiser que a imagem fique a baixo do campo, tire o display: inline-block e o efeito position: absolute do css...
Se quiser que fique em cima do campo tire essas propriedades e mude o div class="imagem" de lugar com o input...
N�o dei import�ncia para a apar�ncia e sim para o efeito, ent�o, as propriedades importantes para isso � a transi��o, opacity e o seletor hover no .efeito:hover .imagem
Espero que tenha ajudado, se n�o consegui ajudar, me mande o que est� errado...
Agrade�o!

www.fabinhokls.com.br

Responder

Gostei + 0

14/07/2015

Fabricio Alves

Vou testar Fabinhokls, dou retorno, ok?

Responder

Gostei + 0