Exibir imagem ao lado de radio hover

[regina 0]

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...

[William Bruno 1501]

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.

[regina 0]

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();
            });
    });

[William Bruno 1501]

assim:

$(function(){

$(":radio").hover( function() {

$(this).parent('label').next('img').show();

},

function(){

$(this).parent('label').next('img').hide();

});

});

[regina 0]

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.

[William Bruno 1501]

a melhor opção, é vc dar uma class para essas imagens e escondê-las via css.

[regina 0]

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

[William Bruno 1501]

sim, qual a dúvida ?

[regina 0]

agradeço a atenção,

 

mas ao tentar visualizar a imagem novamente sem refresh não a exibe.

[William Bruno 1501]

coloque online, não entendi oque vc quis dizer com isso.

[regina 0]

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