Remplacer la fonction du curseur par une image guider par des bouton

Question

Pages :

parsimonhi

Modérateur

6 Apr 2021 à 09:58

(reprise du message précédent)

Bonjour,

Comme tu as changé plusieurs fois ton html, tout dépend avec quoi tu l'as testé.

Quel code as-tu testé ? (je veux le code complet)

Amicalement,

Kizars

6 Apr 2021 à 10:53

Aïe aïe aïe, attention au yeux sa risque de piqué Smiley confused

Voici mon code complet avec le script que tu m'avais fait (Sa va faire neaucoup, ce qui fait sa, ce sont les Id pour avoir d'avantage de colonnes et d'images) :
-----------------------------------------------------------------------------------------

<html>
	<head>
		<title>DHTML exercice : déplacement d'image</title>
		<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
		<link href="style/style.css" type="text/css" rel="stylesheet" />
		<script src="http://code.jquery.com/jquery-2.1.0.min.js"></script>  

<script>
		function compare(x1,y1,x2,y2)
		{
			return (x1>=x2)&&((x1+10)<=(x2+300))&&(y1>=y2)&&((y1+10)<=(y2+300));
		}
		function deplace(x,y)
		{
			let e=document.querySelector("[alt='Survol']");
			let xe=e.offsetLeft;
			let ye=e.offsetTop;
			hautimage += y;
			gaucheimage += x;
			document.getElementById("box1").style.top = hautimage+"px";
			document.getElementById("box1").style.left = gaucheimage+"px";
			if(compare(gaucheimage,hautimage,xe,ye)) e.src="Etape1.gif";
			else e.src="Debut.gif";
		}

</script>
				<script language="javascript">
				var hautimage = 0;
				var gaucheimage = 0;
				document.write('<img src="button.gif" width="10" height="10" border="0" id="box1" style="position:absolute;top:'+hautimage+';left:'+gaucheimage+'">' );
				</script>

		<input type="image" onClick="deplace(0,-100);return false;" src="haut.gif" width="68" height="16" border="0" >
		<input type="image" onClick="deplace(0,100);return false;" src="bas.gif" width="68" height="16" border="0">
		<input type="image" onClick="deplace(-100,0);return false;" src="gauche.gif" width="68" height="16" border="0" >
		<input type="image" onClick="deplace(100,0);return false;" src="droite.gif" width="68" height="16" border="0" >


 
	</head>


		<h2 style="text-align: right;padding-right: 10px">Bibliotheques</h2>


			<!-- La zone qui comprend les images à sélectionner -->
			<div id="title" style="text-align: right;padding-right: 10px">-------Colonne 1------- </div>
			<div id="Echantillon" style="text-align: right;padding-right: 10px">



		<img src="Debut.gif" height="30" width="30">
		<img src="Etape1.gif" height="30" width="30">
		<img src="Etape2.gif" height="30" width="30">
		<img src="Tempo.gif" height="30" width="30">
	<br>
		<img src="Output.jpg" height="30" width="30">
		<img src="Input.jpg" height="30" width="30">
		<img src="se.gif" height="30" width="30">
		<img src="so.gif" height="30" width="30">
	</br>
		<img src="Condition.jpg" height="30" width="30">
		<img src="Fin.jpg" height="30" width="30">
		<img src="ne.gif" height="30" width="30">
		<img src="no.gif" height="30" width="30">
	<br>
	<img src="neno.gif" height="30" width="30">
	<img src="Cote.jpg" height="30" width="30">
	<img src="descend.jpg" height="30" width="30">
	<img src="Saut.gif" height="30" width="30">
	</br>
		</div>     


			<!-- la zone avec les images sélectionnées -->
			<div id="selection"<span style="position: absolute; top: 50px; left: 100px; width: 242px;heigth: 84px;">
			<div id="title1">Colonne1</div>
			</div>


		<script>
		function reverse(elt, id) {
  		$(elt).remove();
 		 $("#"+id).show();

		}
		$( document ).ready(function() {
 		 $("#Echantillon img").click(function() {
   		 $("#selection").append('<div class="choisie"><img src="'+$(this).attr('src')+'" onclick="reverse(this, \''+$(this).attr('id')+'\')"></div>');
  		});
		});
		</script>
 


<!-- La zone qui comprend les images à sélectionner -->
			<div id="title" style="text-align: right;padding-right: 10px">-------Colonne 2------- </div>
			<div id="Echantillon2" style="text-align: right;padding-right: 10px">



		<img src="Debut.gif" height="30" width="30">
		<img src="Etape1.gif" height="30" width="30">
		<img src="Etape2.gif" height="30" width="30">
		<img src="Tempo.gif" height="30" width="30">
	<br>
		<img src="Output.jpg" height="30" width="30">
		<img src="Input.jpg" height="30" width="30">
		<img src="se.gif" height="30" width="30">
		<img src="so.gif" height="30" width="30">
	</br>
		<img src="Condition.jpg" height="30" width="30">
		<img src="Fin.jpg" height="30" width="30">
		<img src="ne.gif" height="30" width="30">
		<img src="no.gif" height="30" width="30">
	<br>
	<img src="neno.gif" height="30" width="30">
	<img src="Cote.jpg" height="30" width="30">
	<img src="descend.jpg" height="30" width="30">
	<img src="Saut.gif" height="30" width="30">
	</br>
		</div>     


			<!-- la zone avec les images sélectionnées -->
			<div id="selection2"<span style="position: absolute; top: 50px; left: 200px; width: 242px;heigth: 84px;">
			<div id="title1">Colonne2</div>
			</div>


		<script>
		function reverse(elt, id) {
  		$(elt).remove();
 		 $("#"+id).show();

		}
		$( document ).ready(function() {
 		 $("#Echantillon2 img").click(function() {
   		 $("#selection2").append('<div class="choisie"><img src="'+$(this).attr('src')+'" onclick="reverse(this, \''+$(this).attr('id')+'\')"></div>');
  		});
		});
		</script>


<!-- La zone qui comprend les images à sélectionner -->
			<div id="title" style="text-align: right;padding-right: 10px">-------Colonne 3------- </div>
			<div id="Echantillon3" style="text-align: right;padding-right: 10px">



		<img src="Debut.gif" height="30" width="30">
		<img src="Etape1.gif" height="30" width="30">
		<img src="Etape2.gif" height="30" width="30">
		<img src="Tempo.gif" height="30" width="30">
	<br>
		<img src="Output.jpg" height="30" width="30">
		<img src="Input.jpg" height="30" width="30">
		<img src="se.gif" height="30" width="30">
		<img src="so.gif" height="30" width="30">
	</br>
		<img src="Condition.jpg" height="30" width="30">
		<img src="Fin.jpg" height="30" width="30">
		<img src="ne.gif" height="30" width="30">
		<img src="no.gif" height="30" width="30">
	<br>
	<img src="neno.gif" height="30" width="30">
	<img src="Cote.jpg" height="30" width="30">
	<img src="descend.jpg" height="30" width="30">
	<img src="Saut.gif" height="30" width="30">
	</br>
		</div>     


			<!-- la zone avec les images sélectionnées -->
			<div id="selection3"<span style="position: absolute; top: 50px; left: 300px; width: 242px;heigth: 84px;">
			<div id="title1">Colonne3</div>
			</div>


		<script>
		function reverse(elt, id) {
  		$(elt).remove();
 		 $("#"+id).show();

		}
		$( document ).ready(function() {
 		 $("#Echantillon3 img").click(function() {
   		 $("#selection3").append('<div class="choisie"><img src="'+$(this).attr('src')+'" onclick="reverse(this, \''+$(this).attr('id')+'\')"></div>');
  		});
		});
		</script>
 


<!-- La zone qui comprend les images à sélectionner -->
			<div id="title" style="text-align: right;padding-right: 10px">-------Colonne 4------- </div>
			<div id="Echantillon4" style="text-align: right;padding-right: 10px">



		<img src="Debut.gif" height="30" width="30">
		<img src="Etape1.gif" height="30" width="30">
		<img src="Etape2.gif" height="30" width="30">
		<img src="Tempo.gif" height="30" width="30">
	<br>
		<img src="Output.jpg" height="30" width="30">
		<img src="Input.jpg" height="30" width="30">
		<img src="se.gif" height="30" width="30">
		<img src="so.gif" height="30" width="30">
	</br>
		<img src="Condition.jpg" height="30" width="30">
		<img src="Fin.jpg" height="30" width="30">
		<img src="ne.gif" height="30" width="30">
		<img src="no.gif" height="30" width="30">
	<br>
	<img src="neno.gif" height="30" width="30">
	<img src="Cote.jpg" height="30" width="30">
	<img src="descend.jpg" height="30" width="30">
	<img src="Saut.gif" height="30" width="30">
	</br>
		</div>     


			<!-- la zone avec les images sélectionnées -->
			<div id="selection4"<span style="position: absolute; top: 50px; left: 400px; width: 242px;heigth: 84px;">
			<div id="title1">Colonne4</div>
			</div>


		<script>
		function reverse(elt, id) {
  		$(elt).remove();
 		 $("#"+id).show();

		}
		$( document ).ready(function() {
 		 $("#Echantillon4 img").click(function() {
   		 $("#selection4").append('<div class="choisie"><img src="'+$(this).attr('src')+'" onclick="reverse(this, \''+$(this).attr('id')+'\')"></div>');
  		});
		});
		</script>


</html>

-----------------------------------------------------------------------------------------
Avec des recherches j'ai reussi a obtenir ceci,
je place ceci dans la div echantillon:

<img src="Etape1.gif" height="30" width="30" onMouseOver="changeimage('Memoire1.gif')" onMouseOut="changeimage('Memoire.gif')">

Merci
Cordialement
Modifié par _laurent (08 Apr 2021 - 11:46)

Kizars

8 Apr 2021 à 11:28

Svp, quelqu'un aurait une solution a mon problème svp Smiley ohwell

Je suis perdu... Je trouve toujours rien qui pourrai m'aidez..

_laurent

Modérateur

8 Apr 2021 à 11:55

Salut salut,

Désolé mais débarquer comme ça au milieu avec tout l'historique c'est un peu chaud de prendre le train en route...

Déja quand je reprend le code de ton dernier message il reste des erreurs :

1/ Tu écris parfois <br> et parfois </br> c'est la première écriture qui est la bonne.
2/ 4 fois dans ton code il y a :

<div id="selection2"<span style="position: absolute; top: 50px; left: 200px; width: 242px;heigth: 84px;">

il manque un > pour ouvrir la <div et un </span> pour fermer le <span>.

Sinon est-ce que tu as une version en ligne ou tu fais tout en local ?

En plus de ça j'ai l'impression qu'il y a 3 fois le même code d'affilé, je me trompe ? Il faut commencer par en afficher / faire fonctionner 1 (ca allègera le code pour la compréhension et le débug et surtout on ne déclare pas 3 ou 4 fois la même fonction avec les mêmes noms etc)
Modifié par _laurent (08 Apr 2021 - 12:03)

_laurent

Modérateur

8 Apr 2021 à 11:59

Tu as aussi des <input> dans le <head> de ta page (ca n'a rien a faire ici) et des petits bouts de script dans le head, dans le code et à la fin (faut ranger tout ca et tout mettre au meme endroit, de préférence dans un fichier externe mais tout à la fin dans une balise script unique c'est bien aussi pour commencer, sinon tu ne vas rien y voir)

<html>
	<head>
		<title>DHTML exercice : déplacement d'image</title>
		<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
		<link href="style/style.css" type="text/css" rel="stylesheet" />
		<script src="http://code.jquery.com/jquery-2.1.0.min.js"></script>  
<!-- ... -->
		<input type="image" onClick="deplace(0,-100);return false;" src="haut.gif" width="68" height="16" border="0" >
		<input type="image" onClick="deplace(0,100);return false;" src="bas.gif" width="68" height="16" border="0">
		<input type="image" onClick="deplace(-100,0);return false;" src="gauche.gif" width="68" height="16" border="0" >
		<input type="image" onClick="deplace(100,0);return false;" src="droite.gif" width="68" height="16" border="0" >


 
	</head>

_laurent

Modérateur

8 Apr 2021 à 12:01

Egalement essaie de mettre jquery a jour :

<script src="http://code.jquery.com/jquery-2.1.0.min.js"></script>

la curent est a 3.6.0 https://jquery.com/

_laurent

Modérateur

8 Apr 2021 à 12:30

Apres un gros (GROS) nettoyage du code j'ai quand meme du mal a tout comprendre...

1/

document.write('<img src="button.gif" width="10" height="10" border="0" id="box1" style="position:absolute;top:'+hautimage+';left:'+gaucheimage+'">' );

Kesessépourfairequoi ? Déjà je crois que ca ne marche pas (il faut un document.open avant) et qu'est-ce que tu cherches a faire avec ? Remplacer tout le HTML au chargement ? https://developer.mozilla.org/fr/docs/Web/API/Document/write

2/
Au click sur un bouton ca sort l'erreur

Uncaught TypeError: Cannot read property 'offsetLeft' of null"

et quand on regarde :

let e=document.querySelector("[alt='Survol']");

sauf qu'il n'y a aucun élément avec un alt='Survol'

Je crois que j'arrive a peut pret a voir ce que tu veux faire pour déplacer les images mais y'a pas plus simple que de récupérer les offset à chaque fois ?

_laurent

Modérateur

8 Apr 2021 à 12:43

Un truc du genre comme ça : https://jsfiddle.net/undless/nhby8d6k/

Ca reste largement perfectible vu qu'il y a des valeurs en dur etc + l'adaptation à plusieurs grille mais le concept est la.

C'est un jeu ton but ?
Modifié par _laurent (08 Apr 2021 - 12:50)

Kizars

8 Apr 2021 à 14:48

Waouh, impressionant...
(Ouai c'est quasiment sa Smiley eek

: https://jsfiddle.net/undless/nhby8d6k/)

Juste, il faudra plusieurs colonne. Dans la bibliothèques, j'ai déjà mes images que je déplace en cliquant dessus donc sa va déjà

"<br>Blablbalbla</br>"
Je fait sa pour faire des saut de ligne pour rendre un rendu plus propre.

"2/ 4 fois dans ton code il y a :"
Oui oui c'est normal, les "id" et les "px" de left aussi, sa me permet de faire une autre colonne juste a côté de la précédente.

"Tu as aussi des <input> dans le <head> de ta page (ça n'a rien a faire ici) "
Heu.. désolé, je savais pas trop ou tout mettre honnêtement, et au bout d'un moment y a trop de chose trop mélanger..

"Egalement essaie de mettre jquery a jour :"
Okok

"Apres un gros (GROS) nettoyage du code j'ai quand meme du mal a tout comprendre...

1/

document.write('<img src="button.gif" width="10" height="10" border="0" id="box1" style="position:absolute;top:'+hautimage+';left:'+gaucheimage+'">' );

Kesessépourfairequoi ? Déjà je crois que ca ne marche pas (il faut un document.open avant) et qu'est-ce que tu cherches a faire avec ? Remplacer tout le HTML au chargement ? "

Alors, pour le nettoyage, merci énormément, et en même temps désolé de t'avoir fait subir sa.. Smiley sweatdrop

La ligne de code fonctionne dans ma page, et si je la retire, mon code ne fonctionne plus. Sa sert a faire bougé une image ( en l’occurrence, ton carré rouge dans le code que tu as envoyé par la suite, mais le miens se déplaçais a travers la page pouvant ainsi allez à des images quelconque)

(Euh.. Juste comme sa, avec le code des "case" que tu ma envoyé par liens, sur le liens la couleur passe de bleu a vert, mais quand j'essaye, avec le code identique, sur un nouvelle page pour essayé de comprendre un peu.. euh, quand le carré rouge va sur la casse bleu, cette dernière reste bleu. Une idée du pourquoi du comment svp? Je crois que c'est cette ligne de code qui ne fonctionne pas avec moi:
.case-verte {
background: green;
}
du moins, le "green" j'ai beau mettre "pink" "yellow" "black" "red"etc.. d'autre couleur qui fonctionne sur les autre ligne, la sur elle sa ne fait rien, elle reste bleu.)
Modifié par Kizars (08 Apr 2021 - 15:56)

_laurent

Modérateur

9 Apr 2021 à 09:07

Bonjour bonjour !

Kizars a écrit :
"<br>Blablbalbla</br>"
Je fait sa pour faire des saut de ligne pour rendre un rendu plus propre.

Les balises <br> ne se ferment pas... il faut juste mettre <br> c'est un saut de ligne il n'y a rien dedans. https://www.w3schools.com/TAGS/tag_br.asp
ET pour la mise en page de tableau il y a d'autres options plus robustes que les <br> (grid comme j'ai fait, ou même un table)

Kizars a écrit :
"2/ 4 fois dans ton code il y a :"
Oui oui c'est normal, les "id" et les "px" de left aussi, sa me permet de faire une autre colonne juste a côté de la précédente.

Oui mais écrire 4 fois la même fonction js n'a pas de sens et les id doivent être unique sur la page.

Kizars a écrit :
document.write('<img src="button.gif" width="10" height="10" border="0" id="box1" style="position:absolute;top:'+hautimage+';left:'+gaucheimage+'">' );
[...]
La ligne de code fonctionne dans ma page, et si je la retire, mon code ne fonctionne plus. Sa sert a faire bougé une image ( en l’occurrence, ton carré rouge dans le code que tu as envoyé par la suite, mais le miens se déplaçais a travers la page pouvant ainsi allez à des images quelconque)

Ca ne sert pas a faire bouger une image ce code insert l'image dynamiquement à la bonne position au chargement de la page. Et après c'est le reste du code qui la fait bouger. Mais ce n'est pas la bonne façon de créer un élément. https://mareconversionpro.fr/creer-element-html-javascript/
Dans ma version j'ai mise la balise directement dans le HTML plutôt que de l'insérer en Js et on peut ensuite lui donner les bonne coordonnées en Js.

Entre ça :

Kizars a écrit :
"Tu as aussi des <input> dans le <head> de ta page (ça n'a rien a faire ici) "
Heu.. désolé, je savais pas trop ou tout mettre honnêtement, et au bout d'un moment y a trop de chose trop mélanger..

et ça :

Kizars a écrit :
(Euh.. Juste comme sa, avec le code des "case" que tu ma envoyé par liens, sur le liens la couleur passe de bleu a vert, mais quand j'essaye, avec le code identique, sur un nouvelle page pour essayé de comprendre un peu.. euh, quand le carré rouge va sur la casse bleu, cette dernière reste bleu. Une idée du pourquoi du comment svp? Je crois que c'est cette ligne de code qui ne fonctionne pas avec moi:
.case-verte {
background: green;
}
du moins, le "green" j'ai beau mettre "pink" "yellow" "black" "red"etc.. d'autre couleur qui fonctionne sur les autre ligne, la sur elle sa ne fait rien, elle reste bleu.)

J'espère ne pas te vexer mais tu as beaucoup trop de lacunes pour un tel projet. Il va sérieusement falloir voir/apprendre les bases du HTML / CSS et Js avant de te lancer dans de tels projets. Tu copies colles les choses sans les comprendre, alors c'est bien de tenter de décortiquer le code mais il faut un minimum de bagage technique je pense...

Rien de méchant la dedans hein ! On a TOUS été débutant un jour, mais pour commencer il ne faut pas se lancer dans un tel projet sans faire au moins un tuto ou une leçon sur les bases... Se lancer dans un mini jeu en Js sans même savoir ou mettre le code Js c'est compliqué.

La ligne de code qui "ne fonctionne pas avec toi" c'est du CSS et il marche très bien. C'est le Js qui ajoute/supprime les classes avec classList en fonction de l'id pour overrider les couleurs. Et comme je te l'ai dit le code que j'ai fait est très (trop) spécifique il y a des valeurs en dur etc il est fait pour te montrer le principe et être adapté. Le soucis c'est qu'a part si on te pond un code fonctionnel je n'ai pas l'impression que tu arrives à adapter nos explications (encore une fois rien de méchant la dedans, c'est juste hors de portée pour le moment je pense).

Je n'ai pas assez de temps pour suivre réellement ton projet et le coder...

Mais après deux ou trois tuto / leçon ca ira mieux je pense ! C'est quoi comme projet ? Un truc perso ? Un projet d'école ? Tu es pressé ?

Bonne journée

Kizars

9 Apr 2021 à 10:28

Ta pas besoin de t'excuser pour avoir peur de me vexé t’inquiète pas.

J'ai déjà eu des leçon sur du html et un peu sur le css, mais vraiment presque rien.. (Je parle de leçon du lycée où j'étudie, on ajuste appris comment faire un tableau pour un total de bientôt 2année d'étude mdr) Je sais que je comprend pas les ligne de code comme vous, c'est pas un secret,je copie colle, c'est vrai mais pas dans directement dans mon code a moi, je refait des bloc note pour essayé de comprendre ce que sa signifie pour certaine (la majorité Smiley sweatdrop

), sans succès (actuellement je n'ai pas a disposition visual studio). Je suis pas si presser que sa, j'ai encore 4semaine, et c'est un projet en stage

"Je n'ai pas assez de temps pour suivre réellement ton projet et le coder..."
Tkt c'est pas grave, je trouverais une alternative a ce que je veux faire dans le pire des cas Smiley cligne

, vous m'aidez déjà énormément.

Aussi, dans le code, je suis au courant pour plein de chose que je n'applique juste pas et pour d'autre que je ne savais pas comme pour la balise <br> qui ne se ferme pas.. (J'avais fait une recherche sur internet pour faire des saut de ligne et dans l'exemple que j'avais eu, la balise <br> était ouverte puis fermé Smiley hum

)

Bonne journée, merci
cordialement
Modifié par Kizars (09 Apr 2021 - 10:28)

_laurent

Modérateur

9 Apr 2021 à 11:40

Kizars a écrit :
Ta pas besoin de t'excuser pour avoir peur de me vexé t’inquiète pas.

Top

C'est d'autant plus agréable de t'aider alors.

Kizars a écrit :
J'ai déjà eu des leçon sur du html et un peu sur le css, mais vraiment presque rien.. (Je parle de leçon du lycée où j'étudie, on ajuste appris comment faire un tableau pour un total de bientôt 2année d'étude mdr) Je sais que je comprend pas les ligne de code comme vous, c'est pas un secret,je copie colle, c'est vrai mais pas dans directement dans mon code a moi, je refait des bloc note pour essayé de comprendre ce que sa signifie pour certaine (la majorité ), sans succès (actuellement je n'ai pas a disposition visual studio). Je suis pas si presser que sa, j'ai encore 4semaine, et c'est un projet en stage

Ah vous avez des leçon dès le lycée maintenant ?! C'est cool ca mais oui ca doit être très basique. C'est déjà bien que tu tente de comprendre c'est vraiment la bonne démarche mais il y a des bases a voir qui, je pense, vont vraiment accélérer ce processus. Des trucs tout cons qui seront facile une fois vu quoi.
Pour Visual Studio, no need. Un éditeur de code basique et gratos fait tres tres bien le boulot pour du web simple come ça. Check Visual Studio Code (le petit frere il est vraiment cool https://code.visualstudio.com/?wt.mc_id=DX_841432 )

C'est quoi comme stage d'ailleurs ?

Kizars a écrit :
"Je n'ai pas assez de temps pour suivre réellement ton projet et le coder..."
Tkt c'est pas grave, je trouverais une alternative a ce que je veux faire dans le pire des cas , vous m'aidez déjà énormément.

On va continuer a t'aider hein (mais peut être pas moi ou parsimonhi, peut être qu'a des moment on répondra pas le jour même etc...) mais si en // tu pouvais voir une ou deux base de Js ca t'apporterait plein de chose, pour ce projet ET même pour plus tard si tu persiste. Tu pourras utiliser ca dans ton rapport les profs adore quand tu apprends des truc grâce a ton stage.

Kizars a écrit :
Aussi, dans le code, je suis au courant pour plein de chose que je n'applique juste pas et pour d'autre que je ne savais pas comme pour la balise <br> qui ne se ferme pas.. (J'avais fait une recherche sur internet pour faire des saut de ligne et dans l'exemple que j'avais eu, la balise <br> était ouverte puis fermé )

Ca arrive, c'est en forgeant qu'on devient forgeron ! Faut manger un peu de code pour ne pas tomber dans certains pièges Smiley smile

Bon si on revient à tes moutons, tu as compris le code que j'ai fait ?

  let e=document.getElementById("box1");
  let xe=e.offsetLeft;
  let ye=e.offsetTop;
  let new_xe = xe + x;
  let new_ye = ye + y;
  
  if(new_xe > 0 && new_xe < 80) {
  	document.getElementById("box1").style.left = xe + x +"px";
  }
  if(new_ye > 0 && new_ye < 80) {
  	document.getElementById("box1").style.top = ye + y +"px";
  }
  
  if( compare(new_xe, new_ye)) {
  	casebleue.classList.add('case-verte');
  } else {
  	casebleue.classList.remove('case-verte');
  }

C'est très basique à déchiffrer normalement. Si tu bloque je t'explique.

Et sinon pour ton projet c'est quoi exactement le brief ? Le but du truc ? Qu'on planifie un peu avant de se lancer tête baisser dans le dev. Pourquoi 3 colonnes séparées, pourquoi une sélection, pk un changement d'aspect au survol... etc etc
Modifié par _laurent (09 Apr 2021 - 11:41)

Kizars

9 Apr 2021 à 11:59

"Top Smiley Smiley smile

C'est d'autant plus agréable de t'aider alors."
Merci beaucoup sa fait plaisir Smiley ravi

"Ah vous avez des leçon dès le lycée maintenant ?!..."
Et bien je suis en système numérique car un jour quelqu'un ma simplement présenté une page web avec les lignes de code et j'avais craqué dessus (en 3e j'avais vue sa a une journée de porte ouverte) et donc dans ma filière il est logique d'apprendre les langage de code mais bon bref..

"C'est quoi comme stage d'ailleurs ?"
Simple stage en entreprise

"On va continuer a t'aider hein mais si en..."
C'est super gentil merci, ce que je doit faire c'est comme un grafcet, mais pas aussi "sophistiqué" que le vrai logiciel mdr, mes colonne reçoive les images que l'on clique dessus quand elle sont dans la bibliothèques, le survol, je voulais le donné a une image qui ce déplace grâce a des bouton, c'est a dire que quand je vais appuyé sur le bouton pour franchir l'etape2, l'image le fera et quand l'image ce place sur l’étape 2 justement, si on a "relié" (mis a côté) une image "spécial", la mémoire par exemple, alors celle ci nous ce modifie (j'avais 2 image mémoire, une rouge et une blanche pour voir une net différence) .

"Bon si on revient à tes moutons, tu as compris le code que j'ai fait ?"
Je pense que oui, ce que je pense:

box1 c'est l'id du carré rouge que l'on déplace,
if( compare(new_xe, new_ye)) {
ici on a compare, qui par logique c'est une comparaison.
il y a if et else, si sinon
casebleue.classList.add('case-verte');
avec cette ligne de code et le reste je pense que sa signifie en langage
français Smiley lol

: si l'id "box1" est sur la case bleu, ajouté la case verte, sinon la case bleu retire la case verte

let xe=e.offsetLeft;
let ye=e.offsetTop;

x = gauche
y = haut
sa sert a déplacé l'image en x et en y avec des px? [px sa veut bien dire pixels?]

Du moins c'est quelque chose du genre non? Smiley confused

(J'ai peur de dire n'importe quoi, le jugement qu'on va me porter va être grand mdr)

Je crois avoir répondu a tout, merci
Cordialement

_laurent

Modérateur

9 Apr 2021 à 16:14

Kizars a écrit :
ce que je doit faire c'est comme un grafcet, mais pas aussi "sophistiqué" que le vrai logiciel mdr, mes colonne reçoive les images que l'on clique dessus quand elle sont dans la bibliothèques, le survol, je voulais le donné a une image qui ce déplace grâce a des bouton, c'est a dire que quand je vais appuyé sur le bouton pour franchir l'etape2, l'image le fera et quand l'image ce place sur l’étape 2 justement, si on a "relié" (mis a côté) une image "spécial", la mémoire par exemple, alors celle ci nous ce modifie (j'avais 2 image mémoire, une rouge et une blanche pour voir une net différence) .

Là pour le coup c'est moi qui manque de background technique hahaha mais ok même si c'est encore un peu brouillon. Smiley biggol

A quoi servent les différentes colonnes ?

Kizars a écrit :
box1 c'est l'id du carré rouge que l'on déplace,

ouep

Kizars a écrit :
if( compare(new_xe, new_ye)) {
ici on a compare, qui par logique c'est une comparaison.

Le nom de la fonction est bien choisi haha sauf que ca compare pas vraiment new_xe et new_ye entre eux, faut regarder dans la fonction.

Kizars a écrit :
il y a if et else, si sinon
casebleue.classList.add('case-verte');
avec cette ligne de code et le reste je pense que sa signifie en langage
français : si l'id "box1" est sur la case bleu, ajouté la case verte, sinon la case bleu retire la case verte

Toutafé. Pour être plus précis c'est ajouter / supprimer la classe "case-verte" sur #box1.

Kizars a écrit :

let xe=e.offsetLeft;
let ye=e.offsetTop;

x = gauche
y = haut
sa sert a déplacé l'image en x et en y avec des px? [px sa veut bien dire pixels?]

Cette partie la ne sert pas a bouger l'image non. Là on rempli la variable xe avec e.offsetLeft donc avec l'abscisse (x) de e. e c'est l'élément box1.
Là ou on bouge l'image c'est :

document.getElementById("box1").style.left = xe + x +"px";
document.getElementById("box1").style.top = ye + y +"px";

que j'aurais pu/du écrire (dsl le code était vraiment pas fini haha) :

e.style.left = new_xe +"px";
  	e.style.top = new_ye +"px";

on donne a box1 style.top la valeur new_ye donc sa nouvelle position.

Kizars a écrit :
Du moins c'est quelque chose du genre non?
(J'ai peur de dire n'importe quoi, le jugement qu'on va me porter va être grand mdr)

Pas de jugement sur ceux qui se bougent Smiley cligne

Bon du coup t'as bien compris le principe. Les étapes c'est :

- Au lancement de la page on récupère ce qu'il faut via les ID et on les mets dans des variables c'est plus simple (ici j'aurais du mettre "let e = ..." au tout début aussi pour ne pas le refaire à chaque déplacement.
- Quand on clique sur un bouton on lance la fonction
- dans la fonction, on récupère le x et le y du l'image à bouger dans une variable
- on rajoute Xpx selon la taille de tes cases
- on vérifie que ces nouveaux x et y ne sortent pas de la grille
- si c'est ok on donne à l'image qui doit bouger ses nouvelles coordonnées
- on vérifie si ces nouvelles coordonnées sont les mêmes qu'une case spéciale (ici je l'ai mis ne dur x === 65 && y === 25 donc normal que si tu choisis une autre case ca ne marche pas. Plutôt que de mettre les valeurs comme ça tu peux modifier le code pour récupérer les offset d'un élément #case_spéciale par exemple)
- si c'est les mêmes on change la classe, si c'est pas les mêmes on enlève la classe (si on veut que l'état revienne a 0)

et voila en gros.

Et pour l'intégration du Js tu mets tout ton code à l'intérieur d'une balise <script> tout à la fin de ton html juste AVANT la fermeture de </body>. Ca ira très bien pour commencer.

C'est parti !
Tu as un endroit pour mettre ton code en ligne ? Sinon plutôt que de copier coller tout ton code ici essaie de tout développer sur un jsfiddle comme j'ai fait ou sur un codepen comme ca on suivra l'évolution plus facilement. Smiley smile

[MODE MODERATEUR RELOU ON]
Pense a utiliser les bloc de mise en forme (il manque la balise [ quote ] [ / quote ] sans les espaces pour faire des citations) et de coloration syntaxique (pour le code correspondant) en dessous de la ou tu écris ca rend le texte et le code plus lisible.
Et pense a faire un petit effort sur l'orthographe aussi, c'est pas crucial et on t'en voudra pas si'l reste des fautes (je suis le premier a en faire) mais c'est plus agréable a lire s'il y en a moins (et ca te servira dans le monde pro fait moi confiance Smiley sweatdrop

).
[MODE MODERATEUR RELOU OFF]

Pages :

Sujet clos

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

Remplacer la fonction du curseur par une image guider par des bouton