Webmaster Hub: Rotation d'image au survol de la souris - Webmaster Hub

Aller au contenu

Page 1 sur 1
  • Vous ne pouvez pas commencer un sujet
  • Vous ne pouvez pas répondre à ce sujet

Rotation d'image au survol de la souris Noter : -----

#1 L'utilisateur est hors-ligne   papounet 

  • Groupe : Actif
  • Messages : 29
  • Inscrit(e) : 03-octobre 08
  • Genre:Homme
  • Localisation:rhone alpes

Posté 20 mai 2010 - 17:00

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 !
0

#2 L'utilisateur est hors-ligne   jcaron 

  • Groupe : Membre+
  • Messages : 864
  • Inscrit(e) : 15-janvier 08
  • Genre:Homme
  • Localisation:Londres

Posté 20 mai 2010 - 18:48

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

#3 L'utilisateur est hors-ligne   papounet 

  • Groupe : Actif
  • Messages : 29
  • Inscrit(e) : 03-octobre 08
  • Genre:Homme
  • Localisation:rhone alpes

Posté 20 mai 2010 - 23:04

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 ;)
0

Partager ce sujet :


Page 1 sur 1
  • Vous ne pouvez pas commencer un sujet
  • Vous ne pouvez pas répondre à ce sujet

1 utilisateur(s) en train de lire ce sujet
0 membre(s), 1 invité(s), 0 utilisateur(s) anonyme(s)