Usamos cookies para medir audiência e melhorar sua experiência. Você pode aceitar ou recusar a qualquer momento. Veja sobre o iMasters.
Boa tarde
estou com a seguinte situação: em um formulário, preciso exibir a imagem correspondente ao valor do radio ao posicionar o mouse sobre o input.
Procurei várias sugestões de eventos mas ainda não consegui finalizar.
O script que eu tenho (e altera todas as imagens da página) é o seguinte:
<script type="text/javascript">
$(function(){
$(":radio").on("focus.radiobutton", function() {
$("img")
.show()
.hide("slow");
});
$(":radio").on("blur.radiobutton",function(){
$("img")
.hide()
.show("slow");
});
});
</script>mas ele mostra e esconde todas as imagens da página.
Desde já agradeço qualquer ajuda...
obrigada,
estou tentando mas ainda não consegui...
veja o html:
<label class="radio" for="textura_2"><input name="marca" id="textura_2" value="2" tabindex="1" title="textura_2" type="radio">textura_2 </label><img src="../imagens/textura_2.jpg" alt="textura_2" title="textura_2">
<label class="radio" for="textura_3"><input name="marca" id="textura_3" value="3" tabindex="2" title="textura_3" type="radio">textura_3 </label><img src="../../../imagens/textura_3.jpg" alt="textura_3" title="textura_3">
<label class="radio" for="textura_1"><input name="marca" id="textura_1" value="1" tabindex="3" title="textura_1" type="radio">textura_1 </label><img src="../../../imagens/texturas/textura_1.jpg" alt="textura_1" title="textura_1"> e o jquery está assim:
$(function(){
$(":radio").hover( function() {
$(this).next('img').show();
},
function(){
$(this).next('img').hide();
});
});assim:
$(function(){
$(":radio").hover( function() {
$(this).parent('label').next('img').show();
},
function(){
$(this).parent('label').next('img').hide();
});
});Muito obrigada William,
ainda não ficou conforme o desejado
1) quando executo a página as imagens estão aparecerendo e não deveria, qual a melhor definição para escondê-las?
2) ao tentar fazer novamente sem refresh não exibe as imagens.
a melhor opção, é vc dar uma class para essas imagens e escondê-las via css.
e o script fica assim?
$(function(){
$(":radio").hover( function() {
$(this).parent('label').next('img').css('display', 'block');
},
function(){
$(this).parent('label').next('img').css('display', 'none');
});
});usei display none na class
sim, qual a dúvida ?
agradeço a atenção,
mas ao tentar visualizar a imagem novamente sem refresh não a exibe.
coloque online, não entendi oque vc quis dizer com isso.
acho que vou tentar usar o focusin e focusout, pois o resultado não ficou bom
a imagem aparece e some muito rápido
Muito obrigado pela atenção e ajuda
vc vai ter q usar o this, leia:
http://wbruno.com.br/2011/06/21/afinal-e-javascript/
se tiver duvidas, poste o teu html.