Tenho conhecimento em CSS e venho aqui pedir a vocês um help em um projeto de site que estou desenvolvendo e necessito bastante disso.
Tenho uma imagem,um png transparente, que será inserida diretamente em meu html, com o uso da tag <img>.
Depois tenho uma sequencia de imagens jpg, que se vista em sequencia, formam uma animação.
A idéia é a seguinte, preciso montar uma animação com esses jpgs para servir de background da imagem png do html, quando o mouse estiver por cima (hover) da imagem png. Porém, como estou usando jpgs, precisarei fazer isso por meio de javascript.
Daí alguem pergunta: "Porque vc não faz um gif animado então?".
A resposta é simples: Pq gif possui uma compressão que diminui bastante a qualidade da imagem, no meu caso, os jpgs devem possuir a fidelidade das cores.
Esses jpgs seriam previamente carregados, para não passar uma impressão ruim ao dar inicio à animação, isso eu sei fazer.
O necessário mesmo seria, por exemplo, um javascript que trocasse o atributo "style" da tag img, quando o mouse estivesse sobre a imagem png. Por exemplo:
<img src="images/transparente.png" style="background-image: url(anim_01.jpg)" />daí passava depois de um tempo pra
<img src="images/transparente.png" style="background-image: url(anim_02.jpg)" />e assim por diante.
O javascript deveria conter a sequencia de imagens, o tempo definido da animação entre todas as imagens (todas as imagens terão intervalos de tempo iguais), e a opção de quantas vezes isso irá se repetir, ou se será infinitas vezes.
Provavelmente será necessário o uso de uma biblioteca, preciso que fosse em JQuery, pq meu site se baseia todo nele.
Qualquer ajuda ou sugestão é bem vinda.
Obrigado a todos
