Souci de click sur mon image ...

Résolu/Fermé

PinkieArts Messages postés 5 Date d'inscription jeudi 19 décembre 2019 Statut Membre Dernière intervention 19 décembre 2019 - Modifié le 19 déc. 2019 à 15:57
PinkieArts Messages postés 5 Date d'inscription jeudi 19 décembre 2019 Statut Membre Dernière intervention 19 décembre 2019 - 19 déc. 2019 à 18:44

Bonjour tout le monde, j'ai un petit souci, ...
Alors voila j'ai une photo et j'aimerais que chaque éléments de la photo sois cliquable et que lorsqu'on clique dessus cela affiche une image .. mais je n'y arrive pas du tout ..
Voici mon image :

et voici le code que j'avais trouver mais le souci c'est que je n'arrive pas a localiser les click ..

<html>
    <head>
        <meta charset="utf-8"/>
        <title> changement image </title>
        <link href="CSS.css" rel=stylesheet type="text/css" media="all">
        <script type="text/javascript">
            
            var click1 = "1";
            
            function change1(){
                var image = document.getElementById('fond');
                
                if (click1=="1"){
                    image.src="Photo/1.Line.png"
                    click1 = "2";
                }
                else if (click1=="2"){
                    image.src="Photo/79798224_2238817193077924_2235141950531436544_n.jpg"
                    click1 = "1";
                }
                else if (click1=="3"){
                    image.src="Photo/2.Fond.png"
                    click1 = "2";
                }
            }
        </script>
    </head>
    
    <body>
        
        <div class="super image">
            <img src="Photo/79798224_2238817193077924_2235141950531436544_n.jpg" id="fond" usemap="carte" onclick="change1()">
        </div>
        
        </body>
</html>

EDIT : Ajout des balises de code
EDIT² : Déplacement de la question dans le forum Javascript

Est ce que quelqu'un sais m'aider s'il vous plais ? ^^

A voir également:

Souci de click sur mon image ...
Image iso - Guide
Acronis true image - Télécharger - Sauvegarde
Image de profil - Guide
Auto click - Télécharger - Divers Utilitaires
Google recherche par image - Guide

6 réponses

Réponse 1 / 6

jordane45 Messages postés 38138 Date d'inscription mercredi 22 octobre 2003 Statut Modérateur Dernière intervention 17 avril 2024 4 649
19 déc. 2019 à 15:58

https://www.w3schools.com/html/html_images_imagemap.asp

Réponse 2 / 6

jordane45 Messages postés 38138 Date d'inscription mercredi 22 octobre 2003 Statut Modérateur Dernière intervention 17 avril 2024 4 649
19 déc. 2019 à 16:10

Oui c'est possible.
Tu joues avec l'évent ONCLICK sur les area.

Réponse 3 / 6

PinkieArts Messages postés 5 Date d'inscription jeudi 19 décembre 2019 Statut Membre Dernière intervention 19 décembre 2019
19 déc. 2019 à 16:01

Merci beaucoup mais j'ai oublier de préciser un détails .. xs en fait je doit faire en sorte que au moments ou je clique, cela ne m'emmène pas vers un lien mais que l'image apparaisse sur la page sur laquelle j'ai cliqué... est ce que c'est possible ? ^^

Réponse 4 / 6

PinkieArts Messages postés 5 Date d'inscription jeudi 19 décembre 2019 Statut Membre Dernière intervention 19 décembre 2019
19 déc. 2019 à 16:13

Je suis pas sur de tout comprendre mais je vais essayer ! Merci beaucoup ! ^^

Vous n’avez pas trouvé la réponse que vous recherchez ?

Posez votre question

Réponse 5 / 6

PinkieArts Messages postés 5 Date d'inscription jeudi 19 décembre 2019 Statut Membre Dernière intervention 19 décembre 2019
Modifié le 19 déc. 2019 à 16:22

Bon je pense que j'ai rien compris en fait XD (sorry je viens de débuter donc je ne m'y connais absolument pas ..) j'ai ma photo en fond mais je ne parviens pas cliquer dessus... Voila mon code ..

<html>
<head>

<meta charset="utf-8"/>
<link href="CSS.css" rel=stylesheet type="text/css" media="all">

<div class="super">
<img src="Photo/79798224_2238817193077924_2235141950531436544_n.jpg" id="fond" alt="" usemap="Carte">
</div>

<map name="Carte">
<area shape="rect" coords="40,50,270,350" alt="papier 1" href="Photo/1.Line.png">

<area shape="rect" coords="10,5,20,15" alt="papier 2" href="Photo/2.Fond.png">
</map>

</head>

<body>
</body>

</html>

Réponse 6 / 6

PinkieArts Messages postés 5 Date d'inscription jeudi 19 décembre 2019 Statut Membre Dernière intervention 19 décembre 2019
19 déc. 2019 à 18:44

C'est bon j'ai trouver ! ^^ Merci à toi pour tes conseils ! ^^

Discussions similaires

Retrouver l'image originale après avoir fait des modifications ?

Site de confiance ou non ?

Sur la plage...

Discussions similaires

Newsletters