Image ne s'affichant pas au mouseover

**djelectro95** · 08/09/2022, 23h23

Bonjour/Bonsoir tout le monde,

Je débute cette année dans javascript et php et lors d'un exercice on devait faire apparaître une image lorsqu'on passait notre souris dessus et lorsqu'on cliquait dessus.

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
<!DOCTYPE html>
<html lang="fr">
<head>
    <meta charset="UTF-8">
    <title>PDWJS02</title>
    <style>
        .cardesc{
            margin-right: 35px;
        }
    </style>
</head>
<body>
    <div>
        <span class="cardesc" onmouseover="showImg('../porsche.png')" onmouseout="showImg('../default.png')">Porsche</span>
        <span class="cardesc" onclick="showImg('../ferrari.png')">Ferrari</span>
        <span class="cardesc" onclick="showImg('../mclaren.png')">McLaren</span>
    </div>
    <div id="imageDesc">
        <img src="" id="myImg"/>
    </div>
<?php
 
?>
    <script>
        function showImg(imgName){
            document.getElementById('myImg').src=imgName;
        }
    </script>
</body>
</html>

De ce côté, je ne pense pas avoir de problème mais quand j'essaie de faire la manipulation, aucune image n'apparaît alors que j'ai vérifié attentivement que c'était la bonne extension et tout.
Je pense que j'ai une erreur à l'endroit du <script> mais je ne trouve pas la solution. Merci de m'éclairer.

djelectro95

**mathieu** · 09/09/2022, 06h33

regardez dans la console de développement de votre navigateur, onglet "Réseau" pour vérifier que l'url de l'image est correct.

**domi65** · 09/09/2022, 16h10

« j'ai vérifié attentivement que c'était la bonne extension et tout »

Bonjour. Le chemin est curieux. tes images ne sont pas dans un dossier propre à elles ?

**djelectro95** · 09/09/2022, 18h42

Pour les images j'ai compris que ce n'était pas obligatoire d'indiquer le dossier avant le nom et l'extension du fichier. J'ai toujours fait comme ça et ça n'a jamais créé de précédent avant cela.
Est-ce que vous pensez que c'est ça ?

Edit :
J'ai testé d'y insérer le lien de l'image mais toujours aucune image qui n'apparaît.

Code HTML :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
<div>
        <span class="cardesc" onmouseover="showImg('C:/xampp/htdocs/PDWJS02/image/porsche.png')" onmouseout="showImg('default.png')">Porsche</span>
        <span class="cardesc" onclick="showImg('C:/xampp/htdocs/PDWJS02/image/ferrari.png')">Ferrari</span>
        <span class="cardesc" onclick="showImg('C:/xampp/htdocs/PDWJS02/image/mclaren.png')">McLaren</span>
</div>

**domi65** · 09/09/2022, 18h47

Re.
Donc nous avons bien les images dans un dossier propre aux images nommé "image". N'y aurait-il pas un s à image(s) par hasard ?

**djelectro95** · 09/09/2022, 18h49

Non, mon dossier je l'ai nommé <image> sans le "s" car à la base j'allais ne mettre qu'une seule image dans le dossier XD

**domi65** · 09/09/2022, 18h53

Ok, Donc le chemin relatif devrait plutôt être ../image/porsche.png, ou, si le dossier image est contenu dans le même dossier que ton fichier HTML image/porsche.png

As-tu fait ce que suggère Mathieu ?

**djelectro95** · 09/09/2022, 19h24

J'ai fait ce qu'a suggéré Mathieu, mais dans le F12 j'ai ce message d'erreur :
Not allowed to load local resource: file:///C:/xampp/htdocs/PDWJS02/image/porsche.png

**mathieu** · 09/09/2022, 19h26

cette erreur est là parce que vous avez ouvert le fichier de votre disque directement.
essayez de passer par le serveur pour avoir une adresse du genre http://localost/PDWJS02/...

**djelectro95** · 09/09/2022, 19h29

Je l'ai fait, j'essaie tout mes codes dans le localhost de toute manière.
Nom : 2022-09-09.png
Affichages : 141
Taille : 130,1 Ko

**djelectro95** · 09/09/2022, 21h01

Après de nombreux échecs, un camarade de classe m'a enfin aidé, c'était tout bête.
À la place de ../image ou autres il fallait juste mettre ./image mais sinon merci de votre aide.

Image ne s'affichant pas au mouseover

JavaScript

Discussions similaires

Partager

Partager