javascript

**gdisque** · 21/03/2021, 23h02

salut

débutant en javascript
j'affiche une image qui fais aussi un lien relatif sur une autre page

Code:

<a href="page2.html" class="page2"><image class="image1" src="1.jpg"/><a/>

avec le CSS j'affiche une autre image lorsque je survole l'image avec le pseudo-format hover

Code:

.image1:hover
{
background-image:url("1 image milieu.jpg");
position: absolute; top: 710px; left: 500px;
width:650;
height:250;

}

d'accord mais je voudrais maintenant
affiché la seconde image avec les coordonnés de la souris

Code:

<script type="text/javascript">function onclick_page(event)
{
   
  var x = event.clientX + (document.body.scrollLeft || document.documentElement.scrollLeft);
  var y = event.clientY + (document.body.scrollTop || document.documentElement.scrollTop);
  
  
 if(x > 100 && x < 160  )
{
 if( y > 600 && y < 660  )
 {
 alert('OK'); /*affiché l'image  */
}
}

comment affiché une image au-dessus d'une autre avec les coordonnées de la souris, le style position: absolute; top: 710px; left: 500px; ?

**gdisque** · 21/03/2021, 23h13

ne pas prend en compte les valeurs de la position de la souris dans la condition if

Merlin95 · 22/03/2021, 01h15

Tu changes l'attribut "src" de la balise image, par exemple.

**vgondr98** · 22/03/2021, 10h35

Bonjour, voila ma proposition

https://developer.mozilla.org/fr/doc...t/setAttribute
https://www.w3schools.com/jsref/met_...tattribute.asp

var element = document.getElementById(id);

var style = "position: absolute; top: " + parseInt(y) + "px; left:" + parseInt(x) +"px; width:650; height:250;"

element.setAttribute("style", style);

A voir en vidéo sur Futura · Aujourd'hui

**umfred** · 22/03/2021, 10h37

en utilisant l'événement, on mouseover https://www.w3schools.com/jsref/event_onmouseover.asp

**gdisque** · 22/03/2021, 15h17

salut
j'utilise l'événement on mouseover umfred

j'ai fais ce code pour firfox mais rien

Code HTML:

<html>
<head> 
        <meta charset="utf-8" />
        <link rel="stylesheet" href="1.css" /> 
        <title>rex</title>
</head>
<body>


<a href="page2.html" class="page2"><image class="image1" src="1.jpg"/><a/> 
<script type="text/javascript">function coordonnésouri(event)
{
   
  var x = event.clientX + (document.body.scrollLeft || document.documentElement.scrollLeft);
  var y = event.clientY + (document.body.scrollTop || document.documentElement.scrollTop);
  var element = document.getElementsbyclass('image1');
  
  if(x > 500 && x < 1150  )
{
 if( y > 800 && y < 900  )
 {
  
  element.style.position = "absolute";
  element.style.top = "710px";
  element.style.left ="500px";
  element.style.backgroundImage= "url('1 image milieu.jpg')";
  
 }
}

}</script>

</head>
<body  onmouseover="coordonnésouri(event);">

</body>
</html>

Code HTML:

.image1
{
position: absolute; top: 710px; left: 500px;
}

**vgondr98** · 22/03/2021, 15h55

Est-ce-que tu utilises la console du développeur avec F12 ?

var element = document.getElementsbyclass('i mage1'); ne me semble pas une fonction correcte

Quand je googelise ta fonction, je tombe sur https://developer.mozilla.org/fr/doc...ntsByClassName
qui renvoie un tableau d'element et pas un element en plus.

Avec var element = document.getElementById(id);, tu te prendras moins la tête, je pense.

Il suffit d'ajouter l'attribut id dans la balise : <h1 id="myHeader">My Header</h1>

**vgondr98** · 22/03/2021, 16h54

Il ne faut pas mettre d'accent dans du code javascript.

**gdisque** · 22/03/2021, 17h30

vgondr98

Posts résolus

Code HTML:

<html>
<head> 
        <meta charset="utf-8" />
        <link rel="stylesheet" href="1.css" /> 
        <title>rex</title>
</head>
<body>


<a href="page2.html" class="page2"><image id="image1" src="1.jpg"/><a/> 
<script type="text/javascript">function coordonnésouri(event)
{
   
  var x = event.clientX + (document.body.scrollLeft || document.documentElement.scrollLeft);
  var y = event.clientY + (document.body.scrollTop || document.documentElement.scrollTop);
  var element = document.getElementById('image1');
  
  if(x > 500 && x < 1150  )
{
 if( y > 800 && y < 900  )
 {
  
  element.style.position = "absolute";
  element.style.top = "710px";
  element.style.left ="500px";
  element.style.height="250";
  element.style.width="650";
  element.setAttribute("src", "1 image milieu.jpg");
  
 }
}

}</script>

</head>
<body  onmouseover="coordonnésouri(event);">

</body>



#image1
{
position: absolute; top: 810px; left: 500px;
}

**gdisque** · 22/03/2021, 17h38

vgondr98 Il ne faut pas mettre d'accent dans du code javascript.

oups,ok

**vgondr98** · 22/03/2021, 19h14

Envoyé par gdisque

vgondr98 Il ne faut pas mettre d'accent dans du code javascript.

oups,ok

Je ne sais pas si c'est un un problème ou pas en fait mais bon avec tous les problèmes d'encodage, je pense que cela peut-être gênant. Je ne sais pas ce qu'en pensent les autres.

Merlin95 · 23/03/2021, 00h03

Envoyé par gdisque

vgondr98 Il ne faut pas mettre d'accent dans du code javascript.

oups,ok

Ha bon ? En 1990 ou 2000 peut-être. Mais par exemple : https://developer.mozilla.org/fr/doc...uide/Functions

**vgondr98** · 23/03/2021, 10h34

Envoyé par Merlin95

Ha bon ? En 1990 ou 2000 peut-être.

Quand j'ai récupéré le code dans un bloc note, et que je l'ai lancé sur mon navigateur, j'avais un problème de token invalide à cause de cet accent (probablement à cause d'une différence d'encodage).

Cela créé du bruit pour rien donc autant ne pas mettre d'accent, tu ne penses pas ?

Merlin95 · 23/03/2021, 12h52

Alors c'est bel et bien d'un bug du navigateur, certains navigateurs n'implemznte pas bien les normes Javascript c'est pourquoi je ferais mon dev sur Firefox et ensuite je testerais sur plusieurs navigateur et le navigateur "cible". Ou alors effectivement j'enleverai l'accent pour écarter cette possibilité.

**Ikhar84** · 23/03/2021, 12h54

Clairement, les normes décrivent un code sans caractéres accentués, il faut se limiter aux caractères de la langue anglaises, pour résumer.

Se reporter à la table ASCII en cas de doutes.

C'est plus du fait d'une norme historique de codage des caractères que de leur encodage.

Maintenant, toute éditeur digne de ce nom permet d'enregistrer son code source dans un fichier encodé en utf8, ce qui devrait être obligatoire.

Le bloc note n'enregistre pas par défaut sous cet encodage, et ajoute aussi des caractères de fin de fichiers (et autres) dits non imprimables, ce qui conduit à des erreurs de "tokens" ou de fin de fichier incorrect, souvent.

Coder avec des caractères accentués est très mal vu dans le métier, et donne une image d'amateurisme, les seuls libertés autorisées sont au niveau des commentaires.

D'ailleurs, le lien donné, sur MDN, qui est une des deux grandes réferences pour tout développeur web (avec la w3 school) n'aurait pas du laisser traîner cet accent, c'est sûrement un dégât collatéral d'une traduction automatique.

Voir règles de style de codage sur un moteur de recheche pour plus d'infos, pas le temps de donner des références généralistes ou par langage maintenant !

Merlin95 · 23/03/2021, 13h24

Envoyé par Ikhar84

Clairement, les normes décrisent un code sans caractéres accentués, il faut se limiter aux caractères de la langue anglaise

Non pas du tout de ce que j'ai compris et rechercher.

Par exemple ceci est valide :

Code:

var ᾩ = "something"; 
var ĦĔĽĻŎ = "hello"; 
var 〱〱〱〱 = "less than? wtf";
var जावास्क्रिप्ट = "javascript";

Source :
https://prograide.com/pregunta/1222/...ble-javascript
Il y a un outil pour checker un nom de variable.

Après je ne sais pas si ça vaut pour les nom de fonctions.

Merlin95 · 23/03/2021, 13h35

Oups ceux ci plutôt :

Code:

var ᾩ = "something"; 
var ĦĔĽĻŎ = "hello"; 
var 〱〱〱〱 = "less than? wtf"; 
var जावास्क्रिप्ट = "javascript"; // ok that's JavaScript in hindi 
var KingGeorgeⅦ = "Roman

**Ikhar84** · 23/03/2021, 13h47

Je réponds vite fait ...

Et si, au passage, un modo acceptes de corriger mon "décrisent", je n'aur1id plus à me cacher.

Je parles bien de normes de style et pas de ce que les éditeurs ou compilos acceptent par "laxisme" ...

Pour php, par exemple voir PSR-1 à 7...

Merlin95 · 23/03/2021, 14h00

Norme de style ? Vous voulez dire les normes de chez Oracle par exemple ?

**Stan_94** · 23/03/2021, 15h22

Bonjour,
l'anglais étant la langue commune de l'informatique, il ne me viendrait pas à l'idée de mettre des accents dans des noms de variable, même si c'est permis...
C'et comme l'indentation du code, pour le rendre lisible. C'est pas obligatoire mais ça fait partie des "standards" dans le style (= façon) de codage à utiliser.
Il faut que le code source soit lisible par le plus grand nombre, non ?

Merlin95 · 23/03/2021, 15h35

Oui mais le Japon je crois qu'ils utilisent leur langue, donc dans cet exemple si le programmeur code pour son propre plaisir (oui ça existe) et bien il utilise sans doute encore sa "langue"

**gdisque** · 25/03/2021, 14h06

salut

lors d'un retour d'un lien relatif a la premier page comment imposè au navigateur les nouvelles coordonnées a la souris en javascript pour que le visiteur reviens a la position du lien ou du deniers clic de la souris ?
faut-il envoyé un tableau[1]=valeur X ,valeur Y a la page initial ou une condition sur la page initial imposant les coordonné lors d'un retour d'un lien relatif ?

Merlin95 · 25/03/2021, 14h22

Tu peux peut être utiliser le focus mais sur un lien pas possible je pense. Sinon tu utilises le standard : les ancres. Tu remplis l'attribut 'name' de ton lien, et pour revenir à la page précédente au niveau du lien, tu mets dans l'url de retour # puis le nom de ton lien.

Par exemple si ta page de retour possède l'url

Code:

"retour.html"

Alors dans cette page de retour tu mets l'attribut name, par exemple :

Code:

< a href="..." name="myName">texte du lien</href>

Et tu dois avoir ceci dans l'url du lien relatif de retour pour être positionné au niveau du lien cliqué précédemment :

Code:

"retour.html#myName"

**gdisque** · 25/03/2021, 14h46

merci Merlin95 ça fonctionne

une dernier problème,j'ai positionné trois images
Capture.jpg
lorsque les coordonnées de la souris sont positionné sur l'image3,l'image3 sa grandi en hauteur tout va
Capture2.jpg
par contre,quand l'image est a grandi en hauteur,l'image 2 au dessus ne peux pas sa grandir lorsque les coordonnées de la souris sont positionné sur l'image2
il n'y aucune différence entre hover et les coordonné de la souris

**gdisque** · 25/03/2021, 14h56

merci Merlin95 ça fonctionne

un dernier problème,j'ai positionné trois images
Capture.jpg
lorsque les coordonnées de la souris sont positionné sur l'image3,l'image3 sa grandi en hauteur ok
Capture2.jpg
par contre,quand l'image3 est a grandi en hauteur,l'image 2 au dessus ne peux pas sa grandir,lorsque les coordonnées de la souris sont positionné sur l'image2

il n'y aucune différence entre hover et les coordonnées de la souris ?

Code HTML:

 
 if( ximage1 > 490 && ximage1 < 1150 && yimage1 > 810 && yimage1 < 910 )
{
 
 
   
  element1.style.position = "absolute";
  element1.style.top = "700px";
  element1.style.left ="500px";
  element1.style.height="250";
  element1.style.width="650";
  element1.setAttribute("src", "1 image milieu.jpg");
  
 
   
 


 

}
else
{
element1.setAttribute("src", "1.jpg");//image non a grandi
element1.style.top = "810px";
element1.style.left ="500px";
element1.style.height="100";
element1.style.width="650";

}

if( ximage2 > 490 && ximage2 < 1150 && yimage2 > 910 && yimage2 < 1010 )
{
 
  element2.setAttribute("src", "2 image milieu.jpg");
  element2.style.position = "absolute";
  element2.style.top = "760px";
  element2.style.left ="500px";
  element2.style.height="250";
  element2.style.width="650";
  
 
 

}
else
{
element2.setAttribute("src", "2.jpg");//image non a grandi
element2.style.top = "910px";
element2.style.left ="500px";
element2.style.height="100";
element2.style.width="650";
}
if( ximage3 > 490 && ximage3 < 1150 && yimage3 > 1010 && yimage3 < 1110 )
{

  element3.setAttribute("src", "3 image milieu.jpg");
  element3.style.position = "absolute";
  element3.style.top = "860px";
  element3.style.left ="500px";
  element3.style.height="250";
  element3.style.width="650";
 }
else
{
element3.setAttribute("src", "3.jpg");//image non a grandi
element3.style.top = "1010px";
element3.style.left ="500px";
element3.style.height="100";
element3.style.width="650";
}

**umfred** · 25/03/2021, 15h15

c'est quoi ton code ?
un exemple de code pour faire zoomer une image (via css) sur le conteneur de l'image https://www.sitepoint.com/community/...hover/292994/5

**Ikhar84** · 25/03/2021, 19h34

Bonsoir,

Tu peux décrire exactement ce que tu souhaites faire, en présentant ton code au complet ?

**gdisque** · 29/03/2021, 17h18

salut

le week-end de dessin est terminé,bon

umfred, j'ai regardé le lien,téléchargé le fichier

mais,c'est toujours le même problème,il faut que la flèche de la souris sorte de l'image zoomé pour dézoomé l'image
moi,je veux imposé les coordonnées a la souris et non la taille de l'image pour que l'image dézoome et zoome sur l'image au-dessus

Code HTML:

<html>
<head> 
        <meta charset="utf-8" />
        <link rel="stylesheet" href="1.css" /> 
        <title>rex</title>


<script type="text/javascript">function coordonnesouri(event)

{
  var ximage1 = event.clientX + (document.body.scrollLeft || document.documentElement.scrollLeft);
  var yimage1 = event.clientY + (document.body.scrollTop || document.documentElement.scrollTop);
  var element1 = document.getElementById('image1');
  
  var ximage2 = event.clientX + (document.body.scrollLeft || document.documentElement.scrollLeft);
  var yimage2 = event.clientY + (document.body.scrollTop || document.documentElement.scrollTop);
  var element2 = document.getElementById('image2');
 
  var ximage3 = event.clientX + (document.body.scrollLeft || document.documentElement.scrollLeft);
  var yimage3 = event.clientY + (document.body.scrollTop || document.documentElement.scrollTop);
  var element3 = document.getElementById('image3');
 if( ximage1 > 490 && ximage1 < 1150 && yimage1 > 810 && yimage1 < 910 )
{
  element1.style.position = "absolute";
  element1.style.top = "700px";
  element1.style.left ="500px";
  element1.style.height="250";
  element1.style.width="650";
  element1.setAttribute("src", "imagepage1/1 image milieu.jpg");
}
else
{
  element1.setAttribute("src", "imagepage1/1.jpg");
  element1.style.top = "810px";
  element1.style.left ="500px";
  element1.style.height="100";
  element1.style.width="650";

}

if( ximage2 > 490 && ximage2 < 1150 && yimage2 > 910 && yimage2 < 1010 )
{
  element2.setAttribute("src", "imagepage1/2 image milieu.jpg");
  element2.style.position = "absolute";
  element2.style.top = "760px";
  element2.style.left ="500px";
  element2.style.height="250";
  element2.style.width="650";
}
else
{
  element2.setAttribute("src", "imagepage1/2.jpg");
  element2.style.top = "910px";
  element2.style.left ="500px";
  element2.style.height="100";
  element2.style.width="650";
}
if( ximage3 > 490 && ximage3 < 1150 && yimage3 > 1010 && yimage3 < 1110 )
{
  element3.setAttribute("src", "imagepage1/3 image milieu.jpg");
  element3.style.position = "absolute";
  element3.style.top = "860px";
  element3.style.left ="500px";
  element3.style.height="250";
  element3.style.width="650";
 }
else
{
 element3.setAttribute("src", "imagepage1/3.jpg");
 element3.style.top = "1010px";
 element3.style.left ="500px";
 element3.style.height="100";
 element3.style.width="650";
}

}
</script>
</head>

<body onmouseover="coordonnesouri(event);">

<p><div class="bg-text"><image id="flechebas1" src="imagepage1/fleche du bas1.jpg"/>DESSIN<image id="flechebas2" src="imagepage1/fleche du bas2.jpg"/></div></p> 

<p class="paragraphe">
jsdgkdvkvklvdvkoddkvdkqsvoqdjvqdjvjqdvjqdv
jsdgkdvkvklvdvkoddkvdkqsvoqdjvqdjvjqdvjqdv
jsdgkdvkvklvdvkoddkvdkqsvoqdjvqdjvjqdvjqdv
jsdgkdvkvklvdvkoddkvdkqsvoqdjvqdjvjqdvjqdv
jsdgkdvkvklvdvkoddkvdkqsvoqdjvqdjvjqdvjqdv
jsdgkdvkvklvdvkoddkvdkqsvoqdjvqdjvjqdvjqdv
jsdgkdvkvklvdvkoddkvdkqsvoqdjvqdjvjqdvjqdv
jsdgkdvkvklvdvkoddkvdkqsvoqdjvqdjvjqdvjqdv
jsdgkdvkvklvdvkoddkvdkqsvoqdjvqdjvjqdvjqdv
jsdgkdvkvklvdvkoddkvdkqsvoqdjvqdjvjqdvjqdv
jsdgkdvkvklvdvkoddkvdkqsvoqdjvqdjvjqdvjqdv
jsdgkdvkvklvdvkoddkvdkqsvoqdjvqdjvjqdvjqdv

</p>
<a href="page2.html" name="myName" class="page2"><image id="image1" src="imagepage1/1.jpg"/><a/> 
<a href="page3.html" class="page3"><image id="image2" src="imagepage1/2.jpg"/><a/>
<a href="page4.html" class="page4"><image id="image3" src="imagepage1/3.jpg"/><a/>


</body>
</html>

Code HTML:

body
{
        background: #acbbc2;
	height:1330;
	width:1000;
}
#flechebas1
{
	position: absolute; top: 30px; left:100;
	background-repeat:no-repeat;
    
}
#flechebas2
{
	position: absolute; top: 30px; right:100;
	background-repeat:no-repeat;
    
}

.bg-text 
{
        background-color: rgb(0,0,0); /* Fallback color */
        background-color: rgba(0,0,0, 0.4); /* Black w/opacity/see-through */
        color: white;
        font-weight: bold;
        font-size: 80px;
        position: absolute; /* Stay fixed */
        top: 90%;
        left: 700px;
        transform: translate(-50%,-50%);
        z-index: 2;
        text-align: center;
        border: 1px inset #000;
        background: #444;
        color: #ddd;
        width: 1445px;
        height: 150px;

}

p
{
        padding-top:150;
        padding-left:100;
        color:#444;
        width:200;
        height:200;	
}

**umfred** · 29/03/2021, 19h29

donc ce n'est pas sur l'événement hover de l'image, mais quand la souris est à certaines coordonnées si je comprends bien.
donc sûrement sur le hover du body (ou la div). ton code devrait fonctionner à condition de mettre les coordonées correspondantes et pas une valeur qui me semble correspondre à la dimension des images.
Nota: (document.body.scrollLeft || document.documentElement.scrol lLeft) ça vaut 0 ou 1 (True ou false)

javascript

javascript

Re : javscript

Re : javscript

Re : javscript

Re : javscript

Re : javscript

Re : javscript

Re : javscript

Re : javscript

Re : javscript

Re : javscript

Re : javscript

Re : javscript

Re : javscript

Re : javscript

Re : javscript

Re : javscript

Re : javscript

Re : javscript

Re : javscript

Re : javscript

Re : javscript

Re : javscript

Re : javscript

Re : javscript

Re : javscript

Re : javscript

Re : javscript

Re : javscript

Discussions similaires

javascript

Javascript : Intégrer une variable javascript dans un champ de formulaire html

SQL et JavaScript

javascript

javascript