Efeito hover em imagens que vêm do banco

Ana_Thais · Novembro 25, 2011

Olá

Alguém pode me explicar como posso aplicar o código abaixo nas imagens que eu puxo do banco?

O efeito é hover (imgA quando passo o mouse me mostra imgB), porém, como pode ver no código abaixo, para cada imagem há uma classe que é tratada no jquery. Então como aplicar este efeito depois que eu puxo as imagens do banco?

Minha dúvida é que quando puxo do banco vêm todas e não sei como atribuir a cada imagem uma classe na tag <img> e chamar no jquery para aplicar o mesmo efeito. Alguém pode me mostrar como solucionar o problema?

Obrigada

Ana

<script  type='text/javascript'>
$(document).ready(function(){
    $(".imgA").hover(function() {
        $(this).attr("src","model2.png");
            }, function() {
        $(this).attr("src","model1.png");
    });
});
$(document).ready(function(){
    $(".imgB").hover(function() {
        $(this).attr("src","model4.png");
            }, function() {
        $(this).attr("src","model3.png");
    });
});

</script>
</head>

<body>
<img src="model1.png" class="imgA" />

<br /><br /><br /><br /><br /><br /><br /><br />
<img src="model3.png"  class="imgB" />

Editado Novembro 25, 2011 por fercosmig
add tags

fiote · Novembro 25, 2011

abaixo nas imagens que eu puxo do banco

É mysql isso? Tem como você colocar a parte do código PHP que dá o echo nessas imagens?

Ana_Thais · Novembro 25, 2011

abaixo nas imagens que eu puxo do banco
É mysql isso? Tem como você colocar a parte do código PHP que dá o echo nessas imagens?

Oi

Sim. O que quero dizer é como seria eu puxar do banco (mysql) as imagens e aplicá-las imagem por imagem o efeito acima. porque faria um looping ....puxando do banco, mas não entendi como ao puxar do banco já jogar o efeito hover nas imagens.

Pra facilitar o que quero, via banco é isto: http://oqvestir.com.br/ ==>o efeito nas roupas(peças).

Manualmente, se fosse fazer, faria como acima, linha por linha eu jogaria na classe, mas vindo do banco...fiquei a ver navios!No caso, para cada imagem, existe uma outra "atrás".

Se puder me ajudar ou quem puder, agradeço.

Ana

Editado Novembro 25, 2011 por Ana_Thais

fiote · Novembro 25, 2011

O loop do seu php tá fazendo isso daqui teoricamente, né?

echo "<img src='$nomeImagem.png' class='imgA' />";

Ok, vamos melhorar isso:

echo "<img src='$nomeImagem.png' class='imgA' name='$nomeImagemDoHover'/>";

Agora, no seu javascript, ficaria assim:

$(document).ready(function(){
    $$(".imgA").hover(
        function() { $(this).attr("src",$(this).attr("name").split(":")[1]+".png") }, 
        function() { $(this).attr("src",$(this).attr("name").split(":")[0]+".png") }
    );
});

Todas as suas imagens devem ter a classe "imgA". Deve funcionar =)

Apesar de que... não sei se $$ funciona no jquery lol

Ana_Thais · Novembro 26, 2011

O loop do seu php tá fazendo isso daqui teoricamente, né?
echo "<img src='$nomeImagem.png' class='imgA' />";
Ok, vamos melhorar isso:
echo "<img src='$nomeImagem.png' class='imgA' name='$nomeImagemDoHover'/>";
Agora, no seu javascript, ficaria assim:
$(document).ready(function(){
    $$(".imgA").hover(
        function() { $(this).attr("src",$(this).attr("name").split(":")[1]+".png") }, 
        function() { $(this).attr("src",$(this).attr("name").split(":")[0]+".png") }
    );
});
Todas as suas imagens devem ter a classe "imgA". Deve funcionar =)
Apesar de que... não sei se $$ funciona no jquery lol

Oi Fiote

Respondendo a sua pergunta: estou puxando as imagens do banco desta forma:

(...)

while($lnq=mysql_fetch_array($sql)){

echo '

';

}

(...)

Como quero dar aquele efeito hover nas imagens com o while e vendo como postou acima, no meu script acima tenho que locar no banco, mais um campo na tabela para a imagem hover e então puxar seguindo seu script acrescentando o caminho da imagem hover, a classe e o name.

Vou aplicar aqui e volto para lhe dizer como foi.

Obrigada desde já!

Ana

Entrar

Efeito hover em imagens que vêm do banco

Pergunta

Ana_Thais

Link para o comentário

Compartilhar em outros sites

4 respostass a esta questão

Posts Recomendados

fiote

Link para o comentário

Compartilhar em outros sites

Ana_Thais

Link para o comentário

Compartilhar em outros sites

fiote

Link para o comentário

Compartilhar em outros sites

Ana_Thais

Link para o comentário

Compartilhar em outros sites

Participe da discussão

Estatísticas dos Fóruns

Navegação

Atividades