18041 sujets

Questions générales et questions de débutants

Plusieurs images côte à côte cliquables indépendamment

Bonjour

Vous allez vite comprendre que je suis newbie en création de page web si vous aller voir le problème que je rencontre ici http://cucaracha.fr/modele/html/MD01.html.

J'ai fait ça comme je pouvais, avec trois séries d'images côte à côte cliquables et visibles indépendamment les unes des autres .
Comme vous pouvez voir, je voudrais faire une page avec plusieurs cases côte à côte.

Comme je disais, j'ai fait ça comme je pouvais...
C'est à dire en créant autant de pages html que de possibilités.
Ouais ouais, c'est pas comme ça qu'on fait, je me doute.
Surtout que je voudrais faire une dizaine de cases côte à côte contenant chacune une bonne vingtaine d'image.
Si je persiste à créer toutes les possibilités, j'y serai encore dans un an.
Alors, si vous avez une solution, vous me ferez gagner un temps précieux.

Merci d'avance!
Personne pour me donner une solution?
pour m'aiguiller vers une piste?
Je ne sais même pas quels mots mettre dans google pour chercher ce que je veux...
Smiley decu
Salut,

Je sais pas s'il y a eu des changements sur ta page mais je vois vraiment pas ce que tu veux faire et encore moins le problème.

Il faudrait que tu précises un peu ce que tu veux faire et indique clairement le problème car là c'est loin d'être évident.

Au pire, tu as peut-être un exemple de ce que à quoi tu veux que ça ressemble ?
Bonsoir

J'ai l'impression que je n'ai pas bien expliqué mon problème...
En fait, je suis dessinateur et je voudrais faire des mélanges de dessins.
J'ai mis un nouvel exemple avec des dessins à la noix.
http://cucaracha.fr/modele/
J'ai repris le principe des livres pour enfants, avec des images découpées en 3 parties où on peut changer les têtes, les troncs et les jambes.
Donc, chaque fois qu'on clique sur une de ces parties, elle change.

Dans mon exemple, j'ai fait 3 personnages différents et du coup, j'ai du faire (3x3x3) 27 pages html différentes.
Si je voulais faire 5 personnages différents et qu'on puisse mélanger les différentes parties, je devrais faire (3x3x3x3x3) 243 pages html.
Et en fait, j'aimerais faire une cinquantaine de dessins découpés en 6 parties chacun.
ça me ferait donc -6 puissance 50 - pages html à faire...
Je n'ose pas faire le calcul.
Il doit bien y avoir un moyen plus simple.
avec des variables...
mais ça, je sais pas faire.

Bises à tous
Bonjour,

la solution que je t'ai proposé n' est pas idiote en réalité, maintenant que je comprend mieux ton but.

Il te suffira de faire une frise avec pour l'image du haut 50 images, pour le milieu et le bas, pareil, un bouton à gauche, un bouton à droite de chaque étage, et c'est facilement jouable...

A toi de décider combien de temps tu veux te prendre la tête sur ce problème, en tout cas la solution que je te propose te prendrait... 30minutes à tout casser, si tu rencontre des soucis pour mettre en place avec mon idée, préviens moi Smiley smile
Ouais, ça me parait pas mal du tout.
Merci "make in design"!
Je vais essayer de voir ce que ça peut donner.
Une question quand même.
La transition d'une image à l'autre est du type translation.
y aurait-il une solution pour faire la même chose mais avec une transition de type fade-in/fade-out?
Salut,

Ayant maintenant mieux compris ton problème, voici la solution que je propose. Tu peux faire du javascript et ce serait, à mon avis, la plus simple et efficace manière de faire. J'ignore si tu te débrouilles en jquery mais c'est assez simple à comprendre.


<!DOCTYPE html> 
<html>   
<head>   
	<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.0/jquery.min.js"></script>
    <title>test</title>   
	<script>
		$(document).ready(function() {
			var current = {
				bleu: 1,
				orange: 1,
				rose: 1
			}
				
			var max = {
				bleu: 3,
				orange: 3,
				rose: 3
			}
						
			$('div.item').click(function(){
				var color = $(this).attr('id').toLowerCase();		
				if(current[color] < max[color]){
					current[color]++;
				}
				else if (current[color] >= max[color]){
					current[color] = 1;
				}
				$('img', this).attr('src', 'http://cucaracha.fr/modele/images/' + $(this).attr('id') + current[color.toLowerCase()] + '.gif' );
			})

		});

	</script>
</head>   
<body> 
	<div class="item" id="ROSE"><img src="http://cucaracha.fr/modele/images/ROSE1.gif" border="0"></div>

	<div class="item" id="BLEU"><img src="http://cucaracha.fr/modele/images/BLEU1.gif" border="0"></div>

	<div class="item" id="ORANGE"><img src="http://cucaracha.fr/modele/images/ORANGE1.gif" border="0"></div>


</body> 
</html>


En gros, ce que ça implique côté programmation :
- Que le ID de ton div soit le même que le nom de ton image ( id="ROSE" pour le nom de ton image ROSE ). Attention au majuscule. A priori tu devrais tout mettre en miniscule mais j'ai utilisé ton exemple.
- Tu peux changé les valeurs dans max pour chaque couleur ( donc tu peux avoir plus de têtes que de pieds et tu le changes là-dedans. Les valeurs de current et max sont les chiffres de tes images ROSE1, ROSE2, ROSE3 et tout ça.
- Si tu changes les valeurs dans current ou tu changes les images par défaut, ça peut "agir" bizarrement. Exemple. Si tu mets par défaut rose2, bleu2, orange2 comme image et que tu changes pas current. Et bien quand tu vas cliqué, y se passera rien car ça va reloadé les mêmes images ( 1+1 = 2 )

Bref je sais pas si tu comprends l'ensemble de mes explications mais je crois que c'est une solution simple et j'ai gardé ta structure nomenclature.
Je viens de voir que tu as fait un reply pendant que j'écrivais.

Pour un fade-in fade-out, il faut que les éléments existent. Donc il faudrait que tu loads presque toutes tes images et que tu joues avec des plugins jquery / mootools.

Ça c'est une autre histoire Smiley smile
Ok, pour le fade-in/fade-out, je laisse tomber.

Par contre pour la proposition en javascript, je sais pas comment la mettre en oeuvre.
J'y connais rien en jquery...
j'ai essayé de creer un fichier html à partir de ce que tu as posté...
http://cucaracha.fr/modele/essai.html
Mais il n'y a que la première image qui s'affiche...

dans tous les cas, merciiii Sorano!
Bon, désolé pour tout ça. On dirait bien que le forum a bouffé une partie de mon code. Tu enleveras les espace entre le color et les braquettes [ color ]. Si je mets pas d'espace, le code s'affiche pas.

Désolé pour cet inconvénient Smiley smile 


	<script>
		$(document).ready(function() {
			var current = {
				bleu: 1,
				orange: 1,
				rose: 1
			}
				
			var max = {
				bleu: 3,
				orange: 3,
				rose: 3
			}
						
			$('div.item').click(function(){
				var color = $(this).attr('id').toLowerCase();		
				if(current [color ] < max[ color ]){
					current[ color ]++;
				}
				else if (current[color] >= max[ color ]){
					current[ color ] = 1;
				}
				$('img', this).attr('src', 'http://cucaracha.fr/modele/images/' + $(this).attr('id') + current[color.toLowerCase()] + '.gif' );
			})

		});

	</script>
Hé hé, ça a l'air de marcher...
un petit bémol quand même.
une fois les trois têtes, troncs et pieds passés, ça s'arrête.
Y a-t-il possibilité de faire tourner ça en boucle?
Désolé de répondre si tard, oui, il éxiste une technique, mais elle n'est pas compatible sur tout les navigateurs ( enfin, tous, non, que Internet Explorer ) et en html/css, pour ne pas te prendre la tête avec du javascript Smiley cligne
Excuse moi, encore le forum qui bouffe de mon code Smiley smile 



<script> 
        $(document).ready(function() { 
            var current = { 
                bleu: 1, 
                orange: 1, 
                rose: 1 
            } 
                 
            var max = { 
                bleu: 3, 
                orange: 3, 
                rose: 3 
            } 
                         
            $('div.item').click(function(){ 
                var color = $(this).attr('id').toLowerCase();         
                if(current[ color ] < max[ color ]){ 
                    current[ color ]++; 
                } 
                else if (current[ color ] >= max[ color ]){ 
                    current[ color ] = 1; 
                } 
                $('img', this).attr('src', 'http://cucaracha.fr/modele/images/' + $(this).attr('id') + current[color.toLowerCase()] + '.gif' ); 
            }) 
 
        }); 
 
    </script>

Modifié par Sorano (21 Oct 2010 - 14:24)
Bonjour
Déjà merci pour le temps passé à répondre aux questionnements des plus ignares...

La solution en javascript fonctionne dans l'état impec.
C'est exactement le résultat que je cherchais pour faire défiler mes images.

Par contre, j'ai quand même un problème dès que je veux continuer à bâtir ma page.
Si je rajoute un simple div avec un lien, toutes les images de la page redirigent vers ce lien.
voir l'exemple http://cucaracha.fr/modele/
Du coup ça réduit l'intéret de la chose.
Y aurait-il un moyen de garder le lien sur mon div uniquement et de laisser fonctionner ma série d'image comme auparavant?
voire même d'ajouter d'autres div et d'autres liens qui ne viennent pas perturber le tout?
J'ai l'impression de poser des questions d'archi débutant...
ouaiiis, je le suis!

upload/33437-merci.gif
En fait, c'est bon, j'ai mis mes div (class=item) dans un div et tout est rentré dans l'ordre.

le sujet est clos Smiley smile
Merciiii


Bon, j'ai encore des questions mais je vais p-t'etre créer un autre post.
à plus
Sujet clos
Aller à