18041 sujets

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

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

Pages :
Bonjour a tous, je débute dans les langage de code et jcp trop ou mettre le sujet (html, css, java etc...) donc je l'ai mis dans débutant, je suis nouveau sur le forum par la même occasion car je suis a la recherche d'aide.. Enfin bref passons;

Voila mon problème:
J'ai crée un programme permettant de déplacer une image ( un petit rond rouge ) a l'aide de bouton: "droite; gauche; haut; bas" et un autre programme qui quand tu survol une image avec ta sourie, cette dernière change et redevient normal quand tu retire le curseur de celle ci.

Ce que je voudrai c'est que avec le petit rond rouge que je déplace avec mes bouton droite gauche... quand il va sur l'image a survolé, cette dernière agit comme si c’était le curseur qui la survolais et donc elle change d'image quand le petit rond est par dessus (le petit rond est en réalité en dessous donc mes images sont transparente pour voir le rond rouge) Smiley ohwell
Merci beaucoup aux personnes qui m'aideront! Smiley biggrin
Cordialement
Modifié par Kizars (31 Mar 2021 - 14:34)
Modérateur
Bonjour,

La solution dépend du code que tu as déjà fait.

Il ressemble à quoi, ce code ?

Amicalement,
Le code du point rouge :
-----------------------------------------------------------------------------------------
<script language=JavaScript>
<!--
function deplace(x,y) 
{ 
if(document.getElementById) 
{ 
hautimage += y; 
gaucheimage += x; 
document.getElementById("box1").style.top = hautimage; 
document.getElementById("box1").style.left = gaucheimage; 
} 
}
//-->
</script>
</head>
<body >
<script language="javascript"> 
var hautimage = 30; 
var gaucheimage = 145; 
document.write('<img src="button.gif" class="curseur" 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" >


-----------------------------------------------------------------------------------------


Le code du survol de sourie:
-----------------------------------------------------------------------------------------
<img alt= "Survol" height="300" width="300" onmouseout="this.src='Debut.gif';" onmouseover="this.src='Etape1.gif';" src="Debut.gif" />

------------------------------------------------------------------------------------

Désolé si sa ressemble à... rien Smiley sweatdrop

J'ai essayé de pas tout mettre et de mettre de strict minimum pour que le programme fonctionne, mais y avait un morceau dans <head></head> donc j'ai couper a un moment
Modifié par _laurent (08 Apr 2021 - 11:42)
Modérateur
Bonjour,

Si, si, ça ressemble à quelque chose.

Il faudrait rajouter du code dans la fonction deplace(x,y).

1) on retrouve la position de l'image survolée (celle qui a pour code <img alt= "Survol" ...>). La complexité de ce morceau de code dépend de ton css et de l'endroit où se trouve la balise <img> de ton image survolée. Dans les cas simples, et s'il n'y a qu'une seule image concernée, on peut faire ça avec un code du genre :

let e=document.querySelector("[alt='Survol']");
let xe=e.offsetLeft;
let ye=e.offsetTop;
// à ce stade, (xe,ye) contient les coordonnées de l'image à l'intérieur de son parent. Le point (0,0) est dans le coin en haut à gauche de l'élément html contenant la balise <img> concernée. Si le parent est la balise <body>, ce sera le coin en haut à gauche du contenu de la fenêtre.


2) on compare les coordonnées xe et ye avec gaucheimage et hautimage. La comparaison à faire dépend de ce que tu veux exactement (recouvrement partiel, recouvrement exact ???). Et pour que ça marche, il faut évidemment que (xe,ye)=(0,0) et (gaucheimage,hautimage)=(0,0) soient le même point. Sinon, il faudra adapter le code. Si l'élément html parent de l'image survolée et l'élément parent du point rouge sont tous les deux la balise <body>, ça devrait marcher direct sans adaptation.

3) si la comparaison dit qu'il faut changer l'image survolée, alors il ne reste plus qu'à faire un :
e.src="Etape1.gif";

sinon, il faut remettre l'image survolée dans son état initial avec :
e.src="Debut.gif";


Evidemment, il y aura sans doute du code à rajouter pour certaines situations. Par exemple quand l'image est à la fois survolée par la souris et recouverte par le point rouge. Mais quand tu en seras là, tu auras déjà bien avancé.

Exemple de code minimal :
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";
}


Note : dans ton code, tu as oublié les "px" pour les propriétés top et left des images.

Amicalement,
Modifié par parsimonhi (31 Mar 2021 - 12:50)
Merci de ta réponse, c'est bien précis tout sa
Le problème avec les images c'est qu'ils n'y en a pas qu'une Smiley rolleyes , J'en ai plein et la methode que j'utilise avec le css, c'est que je met tout dans la même page, c'est a dire que j'ai pas l'habitude de faire des fichier séparer avec <link href="style.css"> , enfin il me semble que c'est cette ligne de code là...
Le e.src je peux l'ajouté a plusieurs images différente ou c'est uniquement pour une image en particulier?
Merci
Amicalement
Modifié par Kizars (31 Mar 2021 - 14:33)
Il doit y avoir des ligne de trop surement, mais sa ne gâche pas le programme,
Sa t'aidera a comprendre ce que je veux faire, bien sur tu n'a pas les images Smiley langue
Et aussi, si tu regarde le programme sans le tester tu devrai remarquer qu'il y a du java, du css et de l'html, et c'est sa qui me bloque, de la façon que j'ai fait tout sa grâce a mes recherche (parce que oui j'ai pas fait sa tout seul de tête.. j'ai beaucoup chercher partout) enfin bref:
Au niveau des <img>, juste en dessous j'ai le script java qui me permet de déplacer les images vers la gauche de la page et ce sont ceux la que je voudrais modifier avec du survol du au petit carré que tu devrai voir (le petit rond rouge)

Donc voila ma question;

Avec une partit de mon programme, puis-je faire en sorte de faire un survole sur une image qui a été déplacer dans une autre <div> grâce a une image que je déplace avec les bouton <input> (sachant qu'il n'y a pas qu'une seul image mais plusieurs dans plusieurs <div>

J'ai répété ma question d'une autre maniere avec plus de détail et le code qui va avec ( le code ci dessous n'est pas complet, loin de la, le complet comporte environ 10fois ce même programme de sorte a avoir plusieurs colonne et donc faire tout un schémas )

-----------------------------------------------------------------------------------------
<html>
<head>
<title>DHTML exercice : déplacement d'image</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<script language=JavaScript>
<!--
function deplace(x,y)
{
if(document.getElementById)
{
hautimage += y;
gaucheimage += x;
document.getElementById("box1").style.top = hautimage;
document.getElementById("box1").style.left = gaucheimage;
}
}
//-->
</script>
<script language="JavaScript" src="../scripts/commun.js"></script>
</style>
</head>
<body>
<script language="javascript"> 
var hautimage = 30; 
var gaucheimage = 145; 
document.write('<img src="button.gif" width="10" height="10" border="0" id="box1" style="position:absolute;top:'+hautimage+';left:'+gaucheimage+'">');
</script>
<a href="Explication.txt">Explication d'utilisation en cliquant ici!</a>
<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" >
<br>
<input type="image" onClick="deplace(-200,300);return false;" src="stape1.gif" width="68" height="16" border="0" >
<input type="image" onClick="deplace(200,300);return false;" src="stape2.gif" width="68" height="16" border="0" >
</br>
</form>
<h2 style="text-align: right;padding-right: 10px">Bibliotheques</h2>
<!-- La zone qui comprend les images à sélectionner -->
<div id="Echantillon">
<div id="title" style="text-align: right;padding-right: 10px" id="echantillon" 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>     
</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> 
  </body>
</html>

-----------------------------------------------------------------------------------------

C'est un pavé désolé Smiley confused Smiley ohwell et merci de ton aide

Amicalement
Modifié par _laurent (08 Apr 2021 - 11:42)
Modérateur
Bonjour,

Ce code ne marche pas (il contient pas mal de bugs).

1) On dit javascript ou bien js si on veut faire court, mais on ne dit pas java (qui est un autre langage). Cette confusion est pénible.
2) Il y a des bugs de partout dans cet extrait de code
3) Ta fonction reverse() marche-t-elle, parce que là, j'ai quand même de gros doutes ?
4) Apparement, tu utilises jquery. Elle est où, la ligne qui inclut jquery ?
5) Il y a quoi dans ../scripts/commun.js ?
6) Ils sont passés où, tes onmouseout et onmouseover sur les images qu'on survole ?
7) Et du coup, comme il n'y a pas ces onmouseout et onmouseover, comment sait-on quelle image il faut mettre quand on survole une image (je ne vois rien dans ce code-ci qui permet de connaitre cette information) ?

Amicalement,
Alors oui effectivement, ce code ne fonctionne pas.. honte a moi.. J'ai du retirer quelque chose qui ne faillais pas.. Smiley confused Smiley confused Smiley confused

1) Je ne savais pas désoler, je pensais que js voulais dire javascript et que pour faire un peu plus cours on pouvais dire java.

2)Pas étonnant

3) Normalement oui puisque dans mon script complet tout fonctionne, mais j'ai constater que sur le code que je t'avais passer y avais une faute a l'id.

4)Alors euh... sa vient uniquement de la Toile cette partit la:
http://code.jquery.com/jquery-2.1.0.min.js

Honnêtement je ne sais pas du tout as signifie quoi, mais sans sa le script ne fonctionne pas..

5)Rien du tout, j'ai supprimer cette ligne de code qui était clairement inutile

6&7)Je l'ai ai pas mis dans le code que je t'ai envoyé (erreur de ma part)
-----------------------------------------------------------------------------------------
<html>
<head>
    <title> Titre projet</title>
    <meta charset="UTF-8" />
    <script src="js.js"></script>
<title>DHTML exercice : déplacement d'image</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<script language=JavaScript>
<!--
function deplace(x,y) 
{ 
if(document.getElementById) 
{ 
hautimage += y; 
gaucheimage += x; 
document.getElementById("box1").style.top = hautimage; 
document.getElementById("box1").style.left = gaucheimage; 
} 
}
//-->
</script>
<script language="JavaScript"></script>
</style>
</head>
<a href="Explication.txt">Explication d'utilisation en cliquant ici!</a>
<body>
<script language="javascript"> 
var hautimage = 30; 
var gaucheimage = 145; 
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" >
<br>
<input type="image" onClick="deplace(-200,200);return false;" src="gauche.gif" width="68" height="16" border="0" >
<input type="image" onClick="deplace(200,200);return false;" src="droite.gif" width="68" height="16" border="0" >
</br>
</form>
<h2 style="text-align: right;padding-right: 10px">Bibliotheques</h2>
<!-- La zone qui comprend les images à sélectionner -->
<div id="Echantillon">
<div id="title" style="text-align: right;padding-right: 10px" id="echantillon" style="text-align: right;padding-right: 10px">-------Colonne 1------- </div>
<div id="Echantillon" style="text-align: right;padding-right: 10px">
<img alt= "Survol" height="30" width="30" onmouseout="this.src='Debut.gif';" onmouseover="this.src='Etape1.gif';" src="Debut.gif" />
<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> 
  </body>
</html>

-----------------------------------------------------------------------------------------
J'ai joint (normalement, le fichier js.js)
J'ai remis le code plus complet que le précédent sans toucher a des script qui pourrai l’empêcher de fonctionner correctement. Smiley confused
J'ai assez honte mdr... Je suis vraiment pas ouf pour codé désoler, merci de prendre de ton temps pour m'aidez parsimonhi
(Le fichier js.js contient simplement toute les lignes du lien: http://code.jquery.com/jquery-2.1.0.min.js )

(Ne pas oubliez, ce que je cherche a faire c'est de donnée la fonction du curseur de ma sourie a une image que je déplace avec des bouton, faire croire a une image que ce n'est pas une image qui ce place sur elle mais le curseur, bien sur que c'est l'image et pas le curseur en lui même)

Cordialement
Modifié par _laurent (08 Apr 2021 - 11:43)
Modérateur
Bonjour,

1) OK pour jquery, si c'est recopié dans le fichier js.js, ça peut fonctionner (c'est une vieille version de jquery, mais admettons).
2) Tu as plusieurs éléments qui ont pour id "Echantillon". Or, dans une page html, un id ne peut être utilisé que pour un seul élément. Et du coup, la ligne $("#Echantillon img").click(...) fonctionne sur un coup de bol. Il faudrait corriger ça.
3) Je ne comprends pas quelles sont les images qui sont concernées par le survol. Je croyais qu'il y en avait plusieurs. Dans ton code, il n'y en a qu'une. Quelles sont les autres ?
4) Il y a pas mal d'autres maladresses, mais on verra ça après.

Amicalement,
1) Smiley rolleyes
2)Pas de problème
3) Les images concerné par le survol, c'est :
Input.jpg
Output.jpg
Pour le moment j'avais fait des test entre Debut.gif et Etape1.gif

-----------------------------------------------------------------------------------------

<div id="title" style="text-align: right;padding-right: 10px">-------Colonne 1------- </div>
<div id="Echantillon" style="text-align: right;padding-right: 10px">

<div id="title" style="text-align: right;padding-right: 10px">-------Colonne 2------- </div>
<div id="Echantillon1" style="text-align: right;padding-right: 10px">

-----------------------------------------------------------------------------------------

ceci me permet d'avoir 2 colonne possédant les même images,

-----------------------------------------------------------------------------------------

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

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

-----------------------------------------------------------------------------------------

Et la les 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>');
  });
});



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

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

-----------------------------------------------------------------------------------------
J'ai essayé de faire une présentation pas trop complexe. Dans la colonne qui se présente à droite, on envoie l'image ayant le survol dans la colonne de gauche.
4) Oups.. Smiley sweatdrop
5) Merci

Cordialement
Modifié par _laurent (08 Apr 2021 - 11:43)
Modérateur
Bonjour,
Kizars a écrit :
Les images concerné par le survol, c'est :
Input.jpg
Output.jpg
Pour le moment j'avais fait des test entre Debut.gif et Etape1.gif

1) Il n'y a que ces deux images Input.jpg et Output.jpg de concernées ou bien aussi toutes les autres images de la colonne de droite ?

2) On les remplace par quoi au survol ?

Amicalement,
1) A l'heure actuelle il n'y a que c'est deux là

2)Et bien l'une par l'autre si possible mais le survol ne se fait pas avec la souris on est d'accord? (Toujours avec l'image du rond rouge) Smiley rolleyes

Merci

Cordialement
Modérateur
Bonjour,

Kizars a écrit :
Et bien l'une par l'autre si possible

Moi pas comprendre.

Toi quoi afficher initialement alors ? Parce que tel que ton code est fait actuellement, les deux images sont affichées dès le départ.

Kizars a écrit :
mais le survol ne se fait pas avec la souris on est d'accord? (Toujours avec l'image du rond rouge)

Oui, mais c'est du détail (le code que j'avais proposé précédemment fait ça). Le plus important maintenant, c'est de savoir quelles images sont concernés, et par quoi elles sont remplacées, car la solution dépend de ces informations.

Et j'ai l'impression que tu ne vois dans quel flou on est sur cette question.

Amicalement,
Et bien par exemple,a la base on voit l'image Input , et quand on passe le petit point rouge dessus, l'image Output prend le dessus et sa dans plusieurs colonne là ou se situerais l'images input et output.
Tu comprend?

Cordialement
Modérateur
Bonjour,

Ça veut dire que quand on passe sur l'image input (avec la souris ou le rond rouge), il y aura deux fois côte à côte l'image output avec le code html que tu as montré.

Donc, non, je ne comprends pas.

Amicalement,
Beh? Je suis pas sur d'avoir bien compris moi non plus ce que tu as dit.

Voici un exemple concret:

http://www.ostralo.net/javascript/pages/pageE2.htm

La tu peux voir qu'on doit passer le curseur de la souris sur les mot "ICI", mais a la place de faire sa avec la souris, je veux faire sa avec mon image que j'aurai déplacer avec les bouton, c'est a dire que si je place le point rouge dans l'exemple du liens sur "ICI" alors l'image ce montrera comme si c’était le curseur de la souris qui l'avais fait. Smiley ohwell

Cordialement
J'ai modifié leur code a ma sauce;
Tu as juste a remplacé : Memoire.gif par une autre image que tu as (les deux), et Memoire1 aussi par une autre image.
Pour ma par, les deux image était identique a différence que l'une des deux était remplie de la couleur rouge et l'autre blanche (Utilisation de paint)
Faire la même chose avec une image qui se déplace grâce a des div, c'est possible?
-----------------------------------------------------------------------------------------
<html>
<head>
<script language="javascript">
function changeimage(url) {
document.getElementById('image').src=url; //Avec l'identité
//Ou avec le nom : document.image.src=url;
}
</script>
</head>
<body>
<img id="image" name="image" src="Memoire.gif">
<a href="javascript:;" onMouseOver="changeimage('Memoire1.gif')" onMouseOut="changeimage('Memoire.gif')">Passer la souris ici</a>
</body>
</html>

-----------------------------------------------------------------------------------------
Modifié par _laurent (08 Apr 2021 - 11:45)
Modérateur
Bonjour,

Ce n'est juste pas possible de proposer un code avec des spécifications qui bougent à chacun de tes posts.

Déjà, as-tu essayé le code que j'ai proposé initialement quand il n'y a qu'une image concernée ?

Ensuite, s'il y a plusieurs images concernées, il faut bien, pour proposer un code, savoir où elles sont et par quoi on les remplace. Sinon, il faut que tu adaptes toi-même le code que j'ai proposé initialement.

Amicalement,
J'ai essaye a plusieurs reprise ton code, mais je n'ai pas réussi a le faire fonctionné.. Je doit vraiment être bon a rien pour sa mdr, j'ai essayé en le mettant dans un fichier .js en le reliant a mon fichier html, sa na pas fonctionné, j'ai essayé de le mettre directement das une balise <script></script> mais la non plus sa na pas fonctionné, donc voilà Smiley decu .
Modérateur
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,
Pages :
Sujet clos
Aller à