Tutoriels vidéo art graphique gratuits

 
Bienvenue, Invité. Merci de vous connecter ou de vous inscrire.
Pages: [1]   En bas

Auteur Sujet: permutation d'images (gauche-droite)  (Lu 6962 fois)

Philippe R

  • Wisi Addict
  • ***
  • Hors ligne Hors ligne
  • Messages: 146
    • Voir le profil
    • RABAGNAC Graphism'
permutation d'images (gauche-droite)
« le: mai 12, 2011, 14:07:34 pm »

Bonjour à tous.

Je souhaite mettre à jour (refaire) ma galerie d'autostéréogrammes dans Dreamweaver.
À cette occasion, je voudrais proposer la possibilité de vision croisée et parallèle. (pour le moment, je ne propose que la vision croisée).

Pour cela, je dois placer les deux images (1 et 2) du couple stéréoscopique côte à côte (gauche et droite) ;
puis créer une zone texte dans laquelle s'inscrira "vision croisée" ou "vision parallèle" ;
puis créer un bouton qui, sur un clic, place l'image 1 à gauche et l'image 2 à droite (vision croisée / par défaut) et, sur un autre clic, permute les images (2 à gauche et 1 à droite) et change la zone texte (vision parallèle). À chaque clic, le texte change et les images permutent.
J'espère que mon explication n'est pas trop embrouillée...

Bien sûr, je peux placer mes deux images à gauche et mes deux images à droite dans des éléments PA et rendre visibles les uns pendant que je masque les autres. Mais il y a peut-être plus simple (en faisant une modification de contenu par nom, par exemple, sachant que toutes les paires d'images seront nommées "nomdelimage_1" et "nomdelimage_2").

Cette fonction devra se retrouver sur toutes les pages de cette galerie.
La taille de chaque paire peut varier d'une page à l'autre.

Ah oui, pour mes galeries, j'ai l'habitude (mauvaise sans doute) de faire une page HTML par image présentée. Là aussi, on peut peut-être simplifier (mais c'est là un autre sujet).

Donc, pour ma permutation, puis-je m'en sortir avec les CCS ou dois-je utiliser du Javascript ? Et comment procéder ?

Je précise (information non négligeable  ;D ) que je m'en sors plutôt bien en illustration, mais que je suis nul en programmation  :'(
(et que je n'ai pas encore trop l'habitude de Dw).

Merci de votre aide  :)

fil


IP archivée
Philippe (CS5 ext)
Mon site Pro : http://rabagnac.com
Mes derniers travaux : http://r-graphism.over-blog.com
Mes dessins, aquarelles... : http://rabagnac.com/atelier
Mon blog créatif : http://atelier2phr.over-blog.com
Mes carnets de voyage : http://rabagnac.com/carnets
Ouf... ;)

Philippe R

  • Wisi Addict
  • ***
  • Hors ligne Hors ligne
  • Messages: 146
    • Voir le profil
    • RABAGNAC Graphism'
Re : permutation d'images (gauche-droite)
« Réponse #1 le: mai 23, 2011, 14:25:42 pm »

Waooo, y passe pas grand monde par ici ! ;)

Bon, pas d'idée ? Gauche, droite, hop !
Une piste. Un indice...
Non, Personne ?
IP archivée
Philippe (CS5 ext)
Mon site Pro : http://rabagnac.com
Mes derniers travaux : http://r-graphism.over-blog.com
Mes dessins, aquarelles... : http://rabagnac.com/atelier
Mon blog créatif : http://atelier2phr.over-blog.com
Mes carnets de voyage : http://rabagnac.com/carnets
Ouf... ;)

marie

  • Wisi Pilier de comptoir
  • **
  • Hors ligne Hors ligne
  • Messages: 73
    • Voir le profil
    • http://www.Studio-MA.fr
Re : permutation d'images (gauche-droite)
« Réponse #2 le: mai 23, 2011, 15:51:38 pm »

Bonjour,

Je t'apporte seulement une 1/2 réponse : tu dois sélectionner ton lien puis choisir dans le panneau Comportements l'action Permuter une image sur Onclick (je présume).
Par contre ça n'applique l'action qu'à une seule image, je ne sais pas comment changer le code pour appliquer l'action sur deux images, droite et gauche, en même temps.

C'est un début …
IP archivée

Philippe R

  • Wisi Addict
  • ***
  • Hors ligne Hors ligne
  • Messages: 146
    • Voir le profil
    • RABAGNAC Graphism'
Re : permutation d'images (gauche-droite)
« Réponse #3 le: mai 23, 2011, 16:54:57 pm »

Bonjour Marie :)

Ce que tu proposes, si je ne trompe pas, c'est ce qu'on utilise pour faire des changements d'état par survol (rollover des boutons par exemple).
Tu penses qu'il est possible de déclencher ce changement en cliquant sur un bouton "à part" et non pas en survolant l'image elle-même... Hmm, oui, je n'y avais pas pensé.

Mais il faut que ça fonctionne en aller-retour.
Un clic, ça permute les deux images aux deux endroits.
Un nouveau clic, ça re-permute les deux images.
Etc.

Je vais explorer cette piste !

Si ça fonctionne, même si je dois le faire "à la main", page par page, ce sera une solution "propre" (à défaut d'être automatique par reconnaissance de l'incrément du nom).

Merci en tout cas. C'est effectivement un début :)
IP archivée
Philippe (CS5 ext)
Mon site Pro : http://rabagnac.com
Mes derniers travaux : http://r-graphism.over-blog.com
Mes dessins, aquarelles... : http://rabagnac.com/atelier
Mon blog créatif : http://atelier2phr.over-blog.com
Mes carnets de voyage : http://rabagnac.com/carnets
Ouf... ;)

metaroid

  • Wisi Addict
  • ***
  • Hors ligne Hors ligne
  • Messages: 187
    • Voir le profil
    • Portfolio infographiste metaroid
Re : permutation d'images (gauche-droite)
« Réponse #4 le: mai 23, 2011, 17:35:37 pm »

Je pense qu'il est plus aisé de faire ça avec javascript (jQuery), j'ai fais ça rapidement ... en espérant que ça fonctionne

HTML:

Les images:
- nomdelimage_1 (-> id="nomdelimage_1" / #nomdelimage_1)
- nomdelimage_2 (-> id="nomdelimage_2" / #nomdelimage_2)

Le bouton
-> monBouton (-> id="monBouton" / #monBouton)

Appel des javascripts
Tu mets ça avant la balise de fermeture </body>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script type="text/javascript" src="js/client.js"></script>


JAVASCRIPT:

Fichier "client.js":

$(document).ready(function(){
   $("#monBouton").toggle(function(){            
      $("#nomdelimage_1").attr("src","../images/monImage1.jpg");
      $("#nomdelimage_2").attr("src","../images/monImage2.jpg");   
   },function(){
      $("#nomdelimage_1").attr("src","../images/monImage2.jpg");
      $("#nomdelimage_2").attr("src","../images/monImage1.jpg");
   });   
});

PS: j'aime bp ce que tu fais :)
« Modifié: mai 23, 2011, 17:37:14 pm par metaroid »
IP archivée
Less is more

Philippe R

  • Wisi Addict
  • ***
  • Hors ligne Hors ligne
  • Messages: 146
    • Voir le profil
    • RABAGNAC Graphism'
Re : permutation d'images (gauche-droite)
« Réponse #5 le: mai 23, 2011, 18:14:47 pm »

Double merci metaroid  ;)

Dès que je trouve un peu de temps  ::) j'essaye ta solution qui me semble être plus facile à mettre en place sur de nombreuses pages que les actions (Si je pige comme il faut, je n'aurais qu'à changer le nom de mes deux images dans le script lors de la création d'une nouvelle page).

Si je bloque, j'appelle au secours !  ;D

Excuse ma remarquable incompétence en la matière, mais le fichier "client.js", je mets ça où ?
IP archivée
Philippe (CS5 ext)
Mon site Pro : http://rabagnac.com
Mes derniers travaux : http://r-graphism.over-blog.com
Mes dessins, aquarelles... : http://rabagnac.com/atelier
Mon blog créatif : http://atelier2phr.over-blog.com
Mes carnets de voyage : http://rabagnac.com/carnets
Ouf... ;)

metaroid

  • Wisi Addict
  • ***
  • Hors ligne Hors ligne
  • Messages: 187
    • Voir le profil
    • Portfolio infographiste metaroid
Re : permutation d'images (gauche-droite)
« Réponse #6 le: mai 23, 2011, 18:40:24 pm »

:) , client.js tu le mets dans un dossier nommé "js" à ta racine (où se trouve ta page index.html par exemple)
c'est pour ça qu'au niveau du html tu mets:
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
qui est une bibliothèque jQuery sur Google
<script type="text/javascript" src="js/client.js"></script>
qui correspond à aller chercher le script "client.js" dans le dossier "js" (on fait ça, c'est mieux rangé)

Et pour ce script on trouve le code:

$(document).ready(function(){ /*au chargement du document*/
   $("#monBouton").toggle(function(){ *mon bouton dispose d'un événement de permutation "toggle"*/
      /*la première fois il fait ça*/
      $("#nomdelimage_1").attr("src","../images/monImage1.jpg");
      $("#nomdelimage_2").attr("src","../images/monImage2.jpg");   
   },function(){
     /*et la deuxième ça :), et ainsi de suite*/
      $("#nomdelimage_1").attr("src","../images/monImage2.jpg");
      $("#nomdelimage_2").attr("src","../images/monImage1.jpg");
   });   
});

Pour "(Si je pige comme il faut, je n'aurais qu'à changer le nom de mes deux images dans le script lors de la création d'une nouvelle page)."
.. si toutes les images de tes pages s'appellent de la même manière, ainsi que tes boutons, tu n'as besoin que de ce seul script pour toutes tes pages.
IP archivée
Less is more

Philippe R

  • Wisi Addict
  • ***
  • Hors ligne Hors ligne
  • Messages: 146
    • Voir le profil
    • RABAGNAC Graphism'
Re : permutation d'images (gauche-droite)
« Réponse #7 le: mai 23, 2011, 19:15:35 pm »

:) , client.js tu le mets dans un dossier nommé "js" à ta racine (où se trouve ta page index.html par exemple)
c'est pour ça qu'au niveau du html tu mets:
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
qui est une bibliothèque jQuery sur Google
<script type="text/javascript" src="js/client.js"></script>
qui correspond à aller chercher le script "client.js" dans le dossier "js" (on fait ça, c'est mieux rangé)

OK, c'est pigé ! :)

Citer
.. si toutes les images de tes pages s'appellent de la même manière, ainsi que tes boutons, tu n'as besoin que de ce seul script pour toutes tes pages.

Ah, là ça se complique un peu, mais je sens que, quand j'aurais digéré ça, ça va me simplifier la vie !

Quoi que, ça ne sera peut-être pas aussi simple car tu as peut-être remarqué que j'avais un texte explicatif par page (actuelle). Il faudra donc que ce texte change avec chaque nouveau couple d'images (par appel d'un fichier texte, peut-être).

Il faudra aussi des boutons pour passer d'un couple d'image à l'autre car le bouton qui permute les images ne doit pas permettre de passer au couple suivant. Il est là juste pour choisir sa méthode de visualisation (croisée ou parallèle). Il ne faut pas que le visiteur qui se sent à l'aise avec la vision croisée soit obligé de passer par la vision parallèle avant d'arriver au couple suivant.

Et puis, il faut que depuis la page générale des autostéréogrammes, on tombe directement sur le couple choisi d'après les vignettes...

Bon, si tout ça est trop complexe à scripter, j'utiliserai le script pour permuter les images et garderais quand même ma "bonne vieille mauvaise méthode" par pages ;)
IP archivée
Philippe (CS5 ext)
Mon site Pro : http://rabagnac.com
Mes derniers travaux : http://r-graphism.over-blog.com
Mes dessins, aquarelles... : http://rabagnac.com/atelier
Mon blog créatif : http://atelier2phr.over-blog.com
Mes carnets de voyage : http://rabagnac.com/carnets
Ouf... ;)

marie

  • Wisi Pilier de comptoir
  • **
  • Hors ligne Hors ligne
  • Messages: 73
    • Voir le profil
    • http://www.Studio-MA.fr
Re : permutation d'images (gauche-droite)
« Réponse #8 le: mai 23, 2011, 20:34:37 pm »

Effectivement, directement en javascript c'est plus sûr (mais ce n'est pas totalement mon rayon).

Si je comprends bien tu as une page "générale" sur laquelle les couples d'images sont présentés et qui ont chacun un lien vers la page pour les visualiser et tu veux qu'on puisse passer d'une page à l'autre.
Dans chaque page d'autostéréogrammes tu appelles le script, tu mets un lien (flèche ou bouton pour passer à la page suivante et sur chaque page tu places tes boutons pour permuter les image. Ça va aller super vite une fois que tu auras fait la première page, tu n'auras qu'à la dupliquer et changer les liens vers tes images dans les suivantes.
Par contre, puisqu'elles s'appellent toutes "monimage1" et "monimage2", il faudrait mettre chaque couple dans un dossier.
Pour ton script "cllent.js", tu crée un dossier "js" dans ta palette "fichiers", et tu le place dedans.
Je crois aussi qu'une page pour chaque couple est la solution la plus simple.

PS : moi aussi j'aime vraiment beaucoup ce que tu fais

IP archivée

Philippe R

  • Wisi Addict
  • ***
  • Hors ligne Hors ligne
  • Messages: 146
    • Voir le profil
    • RABAGNAC Graphism'
Re : permutation d'images (gauche-droite)
« Réponse #9 le: mai 24, 2011, 13:03:04 pm »

Merci Marie
J'ai au moins deux personnes dans mon fan-club. C'est déjà ça ;)
(Nan, j'exagère, je sais bien qu'il y en a d'autres ici :))

Oui, ta solution est celle à laquelle je pense par défaut étant incapable de pondre du code.
Le problème, c'est la multiplication des pages !
Du coup, les mises à jour des liens sur les pages suivantes et précédentes quand j'en ajoute une sont un peu longues et fastidieuses.
Pareil, si je veux ajouter une nouvelle rubrique à mon site ("Photos", par exemple), je suis obligé de la rajouter sur chaque page (environ 300 !) et là, ça devient très très galère.
La solution du "tout script" est certainement beaucoup plus efficace mais (pour moi) beaucoup plus compliquée à mettre en place.

Pour le nom des images, je n'ai pas encore pu tester le script de metaroid mais je pense que ce n'est pas plus compliqué d'avoir un nom par couple (à modifier dans le script par rechercher-remplacer, par exemple) que de créer un dossier par couple (à modifier aussi dans le script sur chaque nouvelle page).
IP archivée
Philippe (CS5 ext)
Mon site Pro : http://rabagnac.com
Mes derniers travaux : http://r-graphism.over-blog.com
Mes dessins, aquarelles... : http://rabagnac.com/atelier
Mon blog créatif : http://atelier2phr.over-blog.com
Mes carnets de voyage : http://rabagnac.com/carnets
Ouf... ;)

marie

  • Wisi Pilier de comptoir
  • **
  • Hors ligne Hors ligne
  • Messages: 73
    • Voir le profil
    • http://www.Studio-MA.fr
Re : permutation d'images (gauche-droite)
« Réponse #10 le: mai 24, 2011, 17:13:15 pm »

Pour les liens des pages, la seule autre solution que je vois est un slidesshow jQuery en changeant de div (contenant tes images et ton texte) à chaque click mais je crois que ce n'est pas jouable parce qu'il va falloir charger toutes les images au chargement de la page, beaucoup trop lourd.

Le script de metarold te permets de switcher les images 1 et 2 et inversement, pas d'appeler d'autres images, en plus il faudrait rajouter une fonction pour le texte qui change lui aussi.

Pour la rubrique supplémentaire, je ne comprends pas bien ; tu veux que sur chaque page où il y a un autostéréogramme on puisse également afficher d'autres vignettes ou c'est seulement un lien vers une pages où il y aura les vignettes de la rubrique "photos" ?

Quel que soit le cas et vu le nombre de pages dont tu parles, si tu as beaucoup de pages sur lesquelles il y a les mêmes éléments fixes, tu as intérêt à créer un modèle (Enregistrer comme modèle). Par la suite, chaque fois que tu modifieras ton modèle, tous les fichiers basés sur ce modèle seront mis à jour automatiquement. La littérature sur le sujet, dans Aide, est un peu longue mais ça peut valoir le coup.

Bon courage …

IP archivée

Philippe R

  • Wisi Addict
  • ***
  • Hors ligne Hors ligne
  • Messages: 146
    • Voir le profil
    • RABAGNAC Graphism'
Re : permutation d'images (gauche-droite)
« Réponse #11 le: mai 24, 2011, 17:37:16 pm »

Le script de metarold te permets de switcher les images 1 et 2 et inversement, pas d'appeler d'autres images, en plus il faudrait rajouter une fonction pour le texte qui change lui aussi.

Oui, pour le texte descriptif qui change à chaque fois. Pour le texte "vision croisée" ou "vision parallèle", je peux faire du texte-image et le gérer dans le script comme pour les images du couple.

Citer
Pour la rubrique supplémentaire, je ne comprends pas bien ; tu veux que sur chaque page où il y a un autostéréogramme on puisse également afficher d'autres vignettes ou c'est seulement un lien vers une pages où il y aura les vignettes de la rubrique "photos" ?

Pas forcément sur la page des autostéréo mais sur toutes les autres oui (lien vers une page), j'ai sur chaque page, en bas, un menu qui permet d'accéder directement à chaque grand domaine de mon site (Illustration, Communication, Formation, Contact, etc). Les pages des autostéréo sont des cas à part car j'y mets le moins d'éléments possible pour ne pas perturber la vision du relief.

Citer
Quel que soit le cas et vu le nombre de pages dont tu parles, si tu as beaucoup de pages sur lesquelles il y a les mêmes éléments fixes, tu as intérêt à créer un modèle (Enregistrer comme modèle). Par la suite, chaque fois que tu modifieras ton modèle, tous les fichiers basés sur ce modèle seront mis à jour automatiquement. La littérature sur le sujet, dans Aide, est un peu longue mais ça peut valoir le coup.

Ah, intéressant. Je n'ai jamais utilisé ça. On doit effectivement gagner un temps fou.
En fait, mon problème, c'est que tout mon site a été réalisé il y a pas mal d'années avec Golive. Il faudrait que je le refasse entièrement dans DW, mais je n'ai pas encore trouvé le courage de le faire  ;)
À l'époque de l'abandon de Golive par Adobe au profit de DW, j'avais téléchargé un module qui modifiait les sites réalisés avec Golive pour pouvoir les reprendre dans DW, mais ça n'a jamais fonctionné.  :'(

Citer
Bon courage …

Merci  ;)
En attendant de refaire tout le site, je vais déjà essayer d'améliorer mes autostéréo.
IP archivée
Philippe (CS5 ext)
Mon site Pro : http://rabagnac.com
Mes derniers travaux : http://r-graphism.over-blog.com
Mes dessins, aquarelles... : http://rabagnac.com/atelier
Mon blog créatif : http://atelier2phr.over-blog.com
Mes carnets de voyage : http://rabagnac.com/carnets
Ouf... ;)

metaroid

  • Wisi Addict
  • ***
  • Hors ligne Hors ligne
  • Messages: 187
    • Voir le profil
    • Portfolio infographiste metaroid
Re : permutation d'images (gauche-droite)
« Réponse #12 le: mai 24, 2011, 18:41:44 pm »

J'ai fais ça vite fait, j'espère que ça t'aideras .. c'est pas ce qu'il y a de pro mais ça fonctionne (il y aurait pas mal de choses à faire) .. bon courage
IP archivée
Less is more

marie

  • Wisi Pilier de comptoir
  • **
  • Hors ligne Hors ligne
  • Messages: 73
    • Voir le profil
    • http://www.Studio-MA.fr
Re : permutation d'images (gauche-droite)
« Réponse #13 le: mai 24, 2011, 19:19:15 pm »

Vite fait et bien fait !
IP archivée
 



Wisibility est un sité dédié à la formation aux métiers l’image. Vous y trouverez différentes ressources vous aidant à maîtriser les logiciels graphiques tels que Photoshop, Lightroom, Illustrator, InDesign, Flash… Aujourd’hui, Wisibility réunie plus d'une vingtaine d’experts, intervenant en Entreprise pour former graphistes, webdesigners, développeurs web, photographes, monteurs, trucistes…
Depuis 2006 nous nous sommes spécialisés dans les tutoriels vidéos permettant de se former à distance. Notre forum très actif, géré par une équipe de bénévoles répondra à vos demandes. Vous pourrez également profiter de nos émissions et reportages sur la Wisi TV.

Nos partenaires

         
Contact - Wisibility est une marque déposée

Blog - Tutoriels - Wisi TV - Forum