[Resolu] Amelioration Galerie Javascript

Bonjour,
J'ai suivi votre turorial sur la galerie javascript et celle ci fonctionne parfaitement mais je voudrais que lorsque je passe la souris au dessus de la grande image celle ci change.
Je faisais ca avec un onMouseover et onMouseout mais je ne sais pas comment l'adapter a ce script, plus exactement comment recuperer les valeurs de onMouseover et onMouseout pour chaque image

Pour l'instant j'ai cela :

<dd><img id="big_pict" src="images/photo1.jpg" alt="Nom Photo 1" onMouseover="src='images/photo2.jpg'" onMouseout="src='images/photo1.jpg'"/></dd>

Mais ce script ne marche evidemment que pour la premiere image
Modifié par Haxis (10 Feb 2009 - 09:10)

Salut Haxis,

En premier lieu, sa serai simpa de faire un lien vers le tutorial que tu utilise, pas tout le monde connait tous les tutoriaux d'alsacreations par coeur (et c'est biendomage )
C'est pas dutout au niveau du html que tu dois faire quelque chose, mais au niveau du javascript

Tu remarquera que dans la boucle for tu as l'instruction :

for (var j = 0 ; j < liens.length ; ++j) {
		// Au clique sur ces liens 
		liens[j].onclick = function() {
.....

qui permet d'affecter à l'action onclick de toute les images, la fonction qui va changer l'image.
Il te suffier donc, au lieu d'affecter l'action onclick, d'y mettre l'action onmouseover :

	for (var j = 0 ; j < liens.length ; ++j) {
		// Au clique sur ces liens 
		liens[j].[b]onmouseover[/b] = function() {
........

et du coup sa marche. Par contre tu n'as pas besoin de l'action onmouseout, à moins que tu veuille que l'image redevienne vierge quand la souris s'en va de la miniature, mais sa risque de te faire un effet bizard.. mais bon pour le faire, tu dois procéder selon le même principe

ps: j'ai change la variable i en j parce que sinon le site crois que je veux écrire en italique à cause du [ i ]


Modifié par Mikerob (09 Feb 2009 - 21:43)

Merci de ta reponse et desole pour le lien manquant mais ton script ne fais pas vraiment ce que je veux. Je vais essayer de reexpliquer.

En faites je veux rien changer au niveau des miniatures.
Il faut :

1. La personne clique sur la miniature, la , la grande image apparait normalement
2. Que lorsque la personne passe la souris sur la grande image celle ci change et affiche une autre

En faites c'est pour montrer le travail effectue avant et apres modification sur des peintures.
Donc le visiteur va choisir une peinture qui va apparaitre dans un premier temps sous sa forme d'origine et lorsqu'il va passer sa souris sur la grande image, la peinture actuelle avec les modif va apparaitre

J'espere que ces explications sont plus clairs et j'espere que qqn aura une solution
Merci d'avance

Salut Haxis,

Erf, ok.. bon ben histoire de rester dans la même logique que la galerie actuel, tu peux créer ajouter deux actions sur l'objet big_photo, qui vont changer le chemin de ton images, vers un dossier avec la version modifiée.Quelque chose du genre :

big_photo.onmouseover = function() {
      var modif = big_photo.src.replace("images/","images/modifs/"); // au lieu de prendre la photo du dossier image, on prend celle du dossier images/modifs

      big_photo.src = modif; // On change l'attribut src de l'image en le remplaçant par la valeur ver l'image modifiées
      return false; // Et pour finir on inhibe l'action réelle du lien
  }
  
  big_photo.onmouseout = function() {
      var modif = big_photo.src.replace("images/modifs/","images/"); // inverse de la méthode au dessus.
      big_photo.src = modif; // On change l'attribut src de l'image en le remplaçant par la valeur du lien
      return false; // Et pour finir on inhibe l'action réelle du lien
  }

Enfin un truc du genre. J'ai pas testé parce qu'il ce fait tard, donc à toi de faire les corrections si besoin

PS : Pour tester, oublie pas de créer le dossier modifs dans le dossier images, et de mettre les photos modifiées dedans avec le même nom que dans le dossier images
Modifié par Mikerob (10 Feb 2009 - 00:42)

Magnifique !
Merci Mikerob sa fonctionne parfaitement

Avec le peu de connaissance en javascript que j'ai, je n'aurais jamais trouve moi meme

Vous en avez reve Mikerob l'a fait