Infobulles sur une image avec des liens cliquables

**bahh66** · 30/01/2019, 21h36

Bonjour,
je n'ai que peu de connaissance en encodage et je dois mettre en place une page internet sur laquelle j'ai des images renvoyant vers plusieurs liens.
Je pourrai faire des liens vers une autre page mais je souhaiterais faire apparaître des menus dans lequel on trouve des liens cliquables quand on passe sur les images ci-dessous.
Nom : page mail.JPG
Affichages : 866
Taille : 91,0 Ko

Nom : page mail.JPG
Affichages : 866
Taille : 91,0 Ko

J'ai déjà créé une page http://culturehumaniste66.ac-montpel...enu/menu.html# avec le logiciel xia.
Le rendu que j'aimerai obtenir est le même que sur la partie carnet de voyage sauf que ce serait sur du onmouseover et pas sur du clic. L'utilisation du logiciel xia rend l'affichage de la page très long je trouve et c'est pour ça que je souhaiterais partir sur du javascript plus simple.

J'ai déjà essayé de bosser à partir du code suivant https://codepen.io/cbracco/pen/qzukg en l'adaptant pour qu'il s'affiche sur une image et pas un texte ou un bouton, mais je n'y arrive pas, je me retourve avec juste des info-bulles prenant en compte le title et non du html avec des liens cliquables.

Si certains ont des idées, je suis preneur.

Merci d'avance

**ABCIWEB** · 30/01/2019, 22h41

Salut,

C'est le genre de choses que je fais en javascript avec jQuery, un exemple ici.

Si tu ne veux pas utiliser de lib javascript, il faudra patienter pour avoir une autre réponse car je ne connais pas assez CSS pour continuer avec ton exemple. J'utilise principalement javascript qui est plus adapté pour la création de modules génériques et j'utilise jQuery pour un tas d'autre choses (requêtes ajax, etc.) donc pour moi c'est la facilité.

**bahh66** · 31/01/2019, 07h54

Ton exemple correspond à ceux que je voudrais faire à la différence que j'aimerai pouvoir cliquer dans l'infobulle pour télécharger un fichier par exemple.
Et n'étant pas spécialiste, CSS ou jquery cela ne change pas grand chose pour moi

**NoSmoking** · 31/01/2019, 10h41

Bonjour,
tu peux effectivement réaliser cela en CSS mais le fait de devoir cliquer n'est pas en soit une mauvaise chose.

Pour le HTML si on utilise, par exemple

Code html :

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

1
2
3
4
5
6
7
8
9
10
11
12
<div class="menu-hover">
  <img src="https://cdn.pixabay.com/photo/2016/03/31/20/51/envelope-1296046_960_720.png">
  <article>
    <h1>Les carnets de voyage</h1>
    <div>
      <a href="./carnets_de_voyage/seance_preparatoire_carnet_de_voyage.docx" target="_blank">Séance préparatoire</a><br>
      <a href="./carnets_de_voyage/carnet_de_voyage.docx" target="_blank">Document d'accompagnement</a><br>
      <a href="./carnets_de_voyage/carnets.pptx" target="_blank">Ressources culturelles</a><br>
      <a href="./carnets_de_voyage/hda_carnet_academie_de_grenoble.mp4" target="_blank">Vidéo sur les carnets de voyage</a>
    </div>
  </article>  
</div>

le CSS ci dessous te donnera le rendu souhaité

Code css :

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
.menu-hover {
  display: inline-block;
  position: relative;
  margin-left: 10em;
}
.menu-hover img {
  max-width: 15em;
}
.menu-hover article {
  display: none;
  position: absolute;
  top: 50%;
  left: 50%;
  padding: 1em;
  min-width: 20em;
  border: 1px solid #CCC;
  background: #FFF;
  transform: translate(-50%, -50%);
}
.menu-hover:hover {
  border: 1px dotted #069;
}
.menu-hover:hover article {
  display: block;
}

certaines déclarations sont importantes les autres n’étant là que pour l'exemple.

**ProgElecT** · 31/01/2019, 17h46

Salut

Envoyé par NoSmoking

tu peux effectivement réaliser cela en CSS mais .....

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
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
<!DOCTYPE html>
<html lang="fr">
	<head>
		<meta http-equiv="content-type" content="text/html"; charset="utf-8"/>
		<title>Essais</title>
 
		<style>
                        /* pseudo boite Title */
                        #TitleInfo {
                                position:absolute;
                                display:none;
                                top:0;
                                left:0;
                                max-width:150px;
                                height:auto;
                                padding:15px;
                                border: 1px solid black;
                                background-color:white;
                        }
                        img {
                                border: 1px solid black;
                        }
                </style>
	</head>
	<body onmouseout="CacherTitle(event)">
		<h3>Pas taper</h3>
 
		<!-- ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ -->
		<div id="TitleInfo"></div> <!-- pseudo boite Title -->
		<img id="Img1" src="https://cyberzoide.developpez.com/misc/clubDeveloppeurs_original.jpg" onmousemove="AffTitle(this,event)" onmouseout="CacherTitle(event)"
			data-infimg="Bannière DVP" data-intitul="Page d'acceueil DVP" data-lien="https://www.developpez.com/" >
 
		<img id="Img2" src="https://www.developpez.com/images/logo_faq.gif" onmousemove="AffTitle(this,event)" onmouseout="CacherTitle(event)"
			data-infimg="Club des professionnels en informatique" data-intitul="Les FAQs" data-lien="https://www.developpez.com/faq/" >
		<!-- ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ -->
		<h2>Pourquoi faire simple quand on peut faire compliqué</h2>
 
		<script>
                        function AffTitle(thiss,e) {
                                //thiss représente l'élément sur lequel a été déclenché l'appel à la fonction
                                let ElemInf = document.getElementById("TitleInfo");
                                // remplis les différents éléments d'information
                                ElemInf.innerHTML = thiss.attributes['data-infimg'].value + "<br />" +
                                                                        "<a id='ancre' href=" + thiss.attributes['data-lien'].value + 
                                                                        " target='_blank' onclick='CacherTitle(event)'>" +
                                                                        thiss.attributes['data-intitul'].value +
                                                                        "</a>";
                                // positionne
                                ElemInf.style.top =(e.clientY - 15) + "px";// coordonnée verticale du pointeur de la souris quand le bouton de la souris est cliqué sur l'élément
                                ElemInf.style.left =(e.clientX - 15) + "px";//  coordonnée horizontale .......
                                ElemInf.style.display = "block"; // rend visible la div
                        }//---------------------------------------------------------
                        function CacherTitle(event) {
                                if(event.relatedTarget==null){return;} // exeption
                                let elemquiter = event.relatedTarget.id; // récupère l'id de l'éléments quitter
                                if (elemquiter == "TitleInfo" || elemquiter == "ancre"){return;} // si c'est la div d'information ou l'hyperlien quitter la fonction 
                                document.getElementById("TitleInfo").style.display = "none"; // rend invisible la div
                        }//---------------------------------------------------------
                </script>
	</body>
</html>

Code crade ?

, étant toujours en apprentissage, je voulais voir s'il était possible de faire cela juste en JavaScript.

**bahh66** · 06/02/2019, 15h57

J'ai testé ton code NoSmoking et il fonctionne très bien, merci beaucoup.
Comment faire pour changer la couleur des liens dans le CSS.
J'ai testé en mettant :

Code :

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

alink="#ffffff" link="#ffffff" vlink="#ffffff"

dans body style, mais du coup je modifie tous les liens, c'est un peu embêtant. De même, peut-on enlever le soulignage dans le css?
Merci encore

**NoSmoking** · 06/02/2019, 18h45

Envoyé par bahh66

J'ai testé en mettant :
...dans body style, mais du coup je modifie tous les liens, c'est un peu embêtant. De même, peut-on enlever le soulignage dans le css?

c'est une très mauvaise idée, il faut mettre ton CSS entre les balises <style></style> de ta page ou dans un fichier externe.

Tu peux personnaliser uniquement ces liens en ajoutant un sélecteur prenant en compte le parent, dans ton cas cela peut donner et compte tenu du code que j'ai mis :

Code css :

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

1
2
3
4
5
.menu-hover a {
  font: .9em/1.5 Arial;
  text-decoration: none;
  letter-spacing: 1px;
}

tu peux ajouter enlever ce que tu veux c'est du CSS basique.

**bahh66** · 07/02/2019, 08h30

En effet, ça rend beaucoup mieux sans gêner dans mon HTML.
Merci encore.

Infobulles sur une image avec des liens cliquables

JavaScript

Discussions similaires

Partager

Partager