Aller au contenu

Rotation d'image au survol de la souris


papounet

Sujets conseillés

Salut!

Voilà j'ai déjà un peu hésité sur la section ou poser cette question entre ici et la rubrique "ajax et JS" mais je recherche le moyen de faire une rotation d'image au survol de la souris comme le précise le titre.

C'est à dire que un ascreen sera affiché pour chacun des site mais que si l'on passe la souris dessus, 3 voir 4 image devront tourner en boucle tant que la souris est dessus.

En espérant être clair, merci d'avance pour vos pistes !

Lien vers le commentaire
Partager sur d’autres sites

Euh non, c'est pas top clair. Tu veux faire tourner une image (i.e. en changer l'orientation), ou tu veux afficher une image, puis une autre quelques secondes plus tard, puis une autre, etc? Je pense que c'est le deuxième, mais je n'en suis pas sûr.

Pour ça, il te suffit probablement de faire quelque chose dans ce genre:


var rotatepic_counter=0;
var rotatepic_stop=0;
function rotatepic(id)
{
document.getElementById(id).src='url_de_base_de_l_image'+(my_counter++%4)+'.png';
if (!rotatepic_stop)
{
setTimeout("rotatepic('"+id+"')",1000);
}
else
{
rotatepic_stop=0;
}
}

Tu mets un onmouseover="rotatepic('id_de_l_image')" et un onmouseout="rotatepic_stop=1;" sur l'image, et tu appelles les différentes versions image0.png, image1.png, etc.

(pas testé du tout, mais ça ne doit pas être très loin)

Alternativement (c'est probablement une meilleure idée), tu peux coller les différentes versions de l'image dans la même (à côté ou en dessous les unes des autres) et modifier le CSS pour faire décaler la partie de l'image affichée (avec un clip et un position sur un Img, ou un background-position sur un Div).

Il est possible que certains frameworks comme jquery et compagnie aient déjà ce genre de fonctions en standard.

Jacques.

Lien vers le commentaire
Partager sur d’autres sites

Oui en fait c'est bien cela, pour un même ascreen j'ai en stock l'image screen1.png, screen2.png, screen3.png donc lors de l'affichage du site le screen1.png s'affiche, et là si je met la souris dessus, alors les 3 screens défilent en boucle tant que la souris n'en est pas retiré.

Tes 2 idées sont sympa et de très bonnes pistes, je regarde ca demain sur le bon pc!

Merci ;)

Lien vers le commentaire
Partager sur d’autres sites

Veuillez vous connecter pour commenter

Vous pourrez laisser un commentaire après vous êtes connecté.



Connectez-vous maintenant
×
×
  • Créer...