Infobulles sur une image avec des liens cliquables

Version imprimable

30/01/2019, 21h36
bahh66

1 pièce(s) jointe(s)

Infobulles sur une image avec des liens cliquables

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.
Pièce jointe 446101

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
30/01/2019, 22h41
ABCIWEB

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é.
31/01/2019, 07h54
bahh66

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

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:

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:

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.

Salut

Citation:

Envoyé par NoSmoking

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

:pastaper:

Code:

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 ? :oops:, étant toujours en apprentissage, je voulais voir s'il était possible de faire cela juste en JavaScript.

06/02/2019, 15h57
bahh66

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:

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
06/02/2019, 18h45
NoSmoking
Citation:

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:

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.
07/02/2019, 08h30
bahh66

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