Utiliser onmouse (quelquechose)

**jlb59** · 15/07/2024, 13h14

Bonjour à tous,

Comment faire pour arriver à faire ça ?
Nom : Image2.jpg
Affichages : 88
Taille : 15,3 Ko

Je voudrais faire presque pareil mais je n'ai pas trouvé ce que je cherchais.
Sur W3school, il y a bien un exemple, mais j'ai pas tout compris, en fait, pas du tout compris.

C'est dans du html et je suppose qu'il y a aussi du JS, mais comme je suis nul en ce domaine, j'aurais besoin de votre aide ?

Merci d'avance.

**Volid** · 15/07/2024, 13h40

Regarder du coté hover

https://www.w3schools.com/cssref/sel_hover.php

**jlb59** · 15/07/2024, 13h54

Merci mais c'est pas ça que je recherche.

**NoSmoking** · 15/07/2024, 16h15

Bonjour,

Je voudrais faire presque pareil

ou autre

... c'est pas ça que je recherche

oui mais en clair, on ne sait pas ce que tu cherches à faire

**jlb59** · 15/07/2024, 17h33

J'ai fait une copie d'écran, c'est parlant tout de même !

**Doksuri** · 16/07/2024, 09h53

bah non justement :/ ton screenshot decrit une situation a un instant T... mais on ne sait pas comment tu veux arriver a cette situation

**jlb59** · 16/07/2024, 10h24

L'instant T comme tu dis, c'est le moment où la souris parcours le lien.
Habituellement, il y a le moyen de changer la couleur et le background, mais c'est pas ça que je cherche à faire, c'est dans mes moyens, je voudrais simplement faire apparaître un popup au lieu du changement de couleur.

Je l'avais fait en 94, mais depuis, l'eau a passe sous les ponts.
Je ne me souviens plus s'il y avait du JS, mais ça fonctionnait bien.
Comme tout évolue, après une période d'abstinence, j'ai beaucoup de mal à suivre.

Suis-je assez clair :
Faire apparaître un popup au passage de la souris sur le lien.

**ProgElecT** · 16/07/2024, 10h46

Salut

Un tuto de NoSmoking Tooltip (infobulle) avec flèche devrait t'éclairer.

Conserves ce lien aussi, NoSmoking te propose plein de trucs sympa.

**NoSmoking** · 16/07/2024, 12h21

Envoyé par jlb59

Sur W3school, il y a bien un exemple, mais j'ai pas tout compris, en fait, pas du tout compris.

Peux être aurais dû tu mettre de quel exemple il s'agissait

Il me semble avoir trouvé : https://www.w3schools.com/cssref/try...css_sel_hover2.
Qu'est ce que tu ne comprend pas dans un exemple aussi simple, si il s'agit bien de celui-là ?

Ressources :

Envoyé par jlb59

J'ai fait une copie d'écran, c'est parlant tout de même !

Pas mieux, voir réponse de Doksuri !

Envoyé par jlb59

Suis-je assez clair :
Faire apparaître un popup au passage de la souris sur le lien.

Là je dirais que oui, donc l'exemple trouvé semble être le bon !

Envoyé par ProgElecT

Un tuto de NoSmoking Tooltip (infobulle) avec flèche devrait t'éclairer.

C'est gentil mais je n'en suis pas sûr du tout

**jlb59** · 16/07/2024, 13h39

Envoyé par NoSmoking

Peux être aurais dû tu mettre de quel exemple il s'agissait

Il me semble avoir trouvé : https://www.w3schools.com/cssref/try...css_sel_hover2.
Qu'est ce que tu ne comprend pas dans un exemple aussi simple, si il s'agit bien de celui-là ?

C'est certain que c'est simple, mais c'est pas ça du tout que je voulais faire.
J'ai plusieurs liens en colonne et je voudrais que lorsque la souris passe sur l'un d'eux, qu'il y ai bien sur le titre du lien, faire une ligne dessous puis expliquer briévement l'utilité.

Envoyé par NoSmoking

C'est gentil mais je n'en suis pas sûr du tout

Par contre, ProgElcT m'a donné le lien de ta page et c'est exactement ce que je voulais faire.
J'admire ta modestie !

Bon, c'est assez compliqué car il y a des chose en CSS qui me sont inconnues, entre autres, mais du mal en patience, je crois, du moins je l'espère, que je parviendrai à mes fin... mais c'est pas gagné !

Dans ton tuto, les liens sont dans de "<UL>", or, sur ma page où je voulais faire ça, il n'y a que des "<DIV>". Comme j'avais commencé avec ça, j'ai continué à le faire.

Code :

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
<!-- SECTION DE PSYCHOLOGIE -->		
 
	<!-- Début cadre-test-qi -->
	<div class="cadre-test-qi">
	<section class='ecart60 '>
 
		<header><span class="puce-page">&nbsp;&nbsp;</span><span class="majuscule gras">Section de psychologie</span></header><br />
 
			<div class="ecart50">
				<img src="images/deco/g.jpg" width="" alt="" />
				<a href="?page=tests_verbal_orthographe1">Tests de l'orthographe 1</a>&nbsp;(10 questions)
				</div>
			<div class="ecart50">
				<img src="images/deco/g.jpg" width="" alt="" />
				<a href="?page=tests_verbal_orthographe2">Tests de l'orthographe 2</a>&nbsp;(10 questions)
			</div>
			<div class="ecart50">
				<img src="images/deco/g.jpg" width="" alt="" />
				<a href="?page=tests_sens_synonymes">Tests des synonymes</a>&nbsp;(10 questions)
			</div>
			<div class="ecart50">
				<img src="images/deco/g.jpg" width="" alt="" />
				<a href="?page=tests_sens_antonymes">Tests des sens antonymes</a>&nbsp;(20 questions)
			</div>
			<div class="ecart50">
				<img src="images/deco/g.jpg" width="" alt="" />
				<a href="?page=tests_sens_mots">Tests de sens des mots</a>&nbsp;(20 questions)
			</div>
			<div class="ecart50">
				<img src="images/deco/g.jpg" width="" alt="" />
				<a href="?page=tests_verbal_intrus1">Tests des mots intrus 1</a>&nbsp;(10 questions)
			</div>
			<div class="ecart50">
				<img src="images/deco/g.jpg" width="" alt="" />
				<a href="?page=tests_verbal_intrus2">Tests des mots intrus 2</a>&nbsp;(10 questions)
			</div>
			<div class="ecart50">
				<img src="images/deco/g.jpg" width="" alt="" />
				<a href="?page=tests_verbal_paronymes1">Tests des paronymes 1</a>&nbsp;(10 questions)
				</div>
			<div class="ecart50">
				<img src="images/deco/g.jpg" width="" alt="" />
				<a href="?page=tests_verbal_paronymes2">Tests des paronymes 2</a>&nbsp;(10 questions)
			</div>
	</section>
	<!-- Fin cadre-test-qi -->
	</div>

Ca donne ça en réalité :
Nom : Image1.jpg
Affichages : 58
Taille : 42,1 Ko

Il y a 4 sections de tests pour l'instant et j'en ai encore d'autres à mettre.

Alors, tu vois que c'est pas gagné si je mets tout en liste !

**NoSmoking** · 17/07/2024, 12h09

C'est certain que c'est simple, mais c'est pas ça du tout que je voulais faire.

je pense tout au contraire que c'est la base de ce que tu veux faire !

Dans ton tuto, les liens sont dans de "<UL>", or, sur ma page où je voulais faire ça, il n'y a que des "<DIV>". Comme j'avais commencé avec ça, j'ai continué à le faire.

Je ne vois pas de différence si ce n'est, dans ton cas, l'utilisation de balises non sémantique.

Ton code pourrait avantageusement être remplacé par le HTML suivant :

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
<!-- SECTION DE PSYCHOLOGIE -->
<section>
  <h2>Section de psychologie</h2>
  <ul>
    <li>
      <a href="?page=tests_verbal_orthographe1">Tests de l'orthographe 1</a> (10 questions)
    </li>
    <li>
      <a href="?page=tests_verbal_orthographe2">Tests de l'orthographe 2</a> (10 questions)
    </li>
    <li>
      <a href="?page=tests_sens_synonymes">Tests des synonymes</a> (10 questions)
    </li>
    <li>
      <a href="?page=tests_sens_antonymes">Tests des sens antonymes</a> (20 questions)
    </li>
    <li>
      <a href="?page=tests_sens_mots">Tests de sens des mots</a> (20 questions)
    </li>
    <li>
      <a href="?page=tests_verbal_intrus1">Tests des mots intrus 1</a> (10 questions)
    </li>
    <li>
      <a href="?page=tests_verbal_intrus2">Tests des mots intrus 2</a> (10 questions)
    </li>
    <li>
      <a href="?page=tests_verbal_paronymes1">Tests des paronymes 1</a> (10 questions)
    </li>
    <li>
      <a href="?page=tests_verbal_paronymes2">Tests des paronymes 2</a> (10 questions)
    </li>
  </ul>
</section>

et pour le rendu visuel le CSS suivant :

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
ul {
  list-style: none;
}
li {
  display: flex;
  align-items: center;
}
li::before {
  content: "»";
  color: #F00;
  font-size: 2em;
  margin-right: .5em;
}
li a {
  min-width: 15em;
}

**jlb59** · 17/07/2024, 13h39

Bonjour NoSmoking,

Merci pour bout de code.
Je l'ai pas encore essayé parce que je bataille avec ce que m'a donné ProgElecT.

En effet, le code est simple pour un averti, mais c'est pas mon cas.
J'ai cherché le moyen de mettre en entête ce à quoi ça sert et en dessous un petit exemple.
C'est vraiment la galère, pour moi en tout cas.

Alors quand je mets ton exemple dans un fichier pour essai, avec CSS et JS, ça fonctionne super bien.
Voyant le résultat, j'ai mis les fichiers dans des répertoires appropriés et bien-sûr la partie html, mais rien ne va !

Pourtant, ton exemple est pas mal !

Lorsque j'ai fait ça il y a + de 20 ans, le popup se déclenchait au survol du lien et suivrait le mouvement de la souris toujours sur le lien.
Mais tout évolue et je n'arrive pas à suivre.

Mais je vais essayer ton code et te communiquerai le résultat.

**jlb59** · 17/07/2024, 18h22

C'est sympa NoSmoking,

Ca, je sais le faire mais c'est pas l'objet de mon problème.

Comme ton code que m'a envoyé ProgElecT est assez compliqué, je me débrouille comme je peux.

**NoSmoking** · 17/07/2024, 19h09

Comme ton code que m'a envoyé ProgElecT est assez compliqué, je me débrouille comme je peux.

montre où tu en es, la structure HTML devrait être quelque chose comme :

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
<li>
  <a href="?page=tests_verbal_orthographe1" class="info-inside">Tests de l'orthographe 1
  <div class="info-content">
    Lorem ipsum dolor sit amet, consectetur adipiscing elit.
    Vestibulum ultricies laoreet orci, sit amet molestie nulla efficitur ac.
  </div>
  </a>(10 questions)
</li>
<li>
  <a href="?page=tests_verbal_orthographe2" class="info-inside">Tests de l'orthographe 2
  <div class="info-content">
    Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos.
    Maecenas tellus elit, suscipit at laoreet et, tempor a orci.
  </div>
  </a>(10 questions)
</li>

**jlb59** · 17/07/2024, 20h35

Non, je ne me disperse pas, j'ai toujours le problème de taille de police et le tooltip.
Si tu vois ces 2 topics, c'est parce que je répondais à ce qu'on menvoyait.
La capture que j'ai envoyée, c'est parce que les MP ne la prend pas et c'était pour montrer sur ce qu'on m'a demandé, suite a "@media..." qui n'allait pas.
Pour le tooltip, j'avais pose la question, je ne sais plus où, mais comme on m'a répondu ici, j'ai continué sur La lancée.

Et je ne peux te montrer le code que je suis en train de faire parce que je suis en train de voir ton code avec du JS et le dernier que tu m'a envoyé et testé m'affichait simplement la liste sans plus.
Mais il y a des class et des div qui ne sont pas présent, donc, je ne peux te donner le html... qui n'a rien a voir avec ce que tu me donnes.

Mais merci pour le bout de code, et celui que j'essaie reste le tien.

Certainement que c'est la solution la plus simple ce que tu me donnes, mais je ne vois pas comment ça va marcher.

**NoSmoking** · 18/07/2024, 09h48

Non, je ne me disperse pas, j'ai toujours le problème de taille de police et le tooltip.

Si tu vois ces 2 topics, c'est parce que je répondais à ce qu'on menvoyait.

La capture que j'ai envoyée, c'est parce que les MP ne la prend pas et c'était pour montrer sur ce qu'on m'a demandé, suite a "@media..." qui n'allait pas.

Tu t'es donc trompé de discussion, je déplace donc cette réponse.

Pour le tooltip, j'avais pose la question, je ne sais plus où, mais comme on m'a répondu ici, j'ai continué sur La lancée.

On peut retrouver toutes ses discussions dans son tableau de bord.

**jlb59** · 18/07/2024, 10h10

Bonjour Smoking,
Merci de mettre en place.

**NoSmoking** · 18/07/2024, 17h46

Envoyé par jlb59

... le dernier que tu m'a envoyé et testé m'affichait simplement la liste sans plus.

Normal, le but étant d'aller étape par étape et donc si tu as cette structure pour faire apparaître l'« info bulle » il faut utiliser le CSS suivant.

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
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
ul {
  list-style: none;
}
li {
  display: flex;
  align-items: center;
  position: relative;
}
li::before {
  content: "»";
  color: #F00;
  font-size: 2em;
  margin-right: .5em;
}
li a {
  min-width: 15em;
  position: relative;
}
/*-- ce qui est ajoouté --*/
.info-content {
  display: none;
  z-index: 1;
  position: absolute;
  top: 100%;
  left: 0;
  width: auto;
  margin-top: 1em;
  padding: .5em;
  min-width: 20em;
  border: 2px solid #080;
  color: #000;
  background-color: #FAFEFA;
}
.info-content h3 {
  margin: 0 0 .25em;
}
li a:hover {
  background-color: #DEF;
}
li a:hover .info-content {
  display: block;
}

Reprise du HTML en ajoutant un titre dans l'« info bulle ».

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
<section>
  <h2>Section de psychologie</h2>
  <ul>
    <li>
      <a href="?page=tests_verbal_orthographe1" class="info-inside">Tests de l'orthographe 1
      <div class="info-content">
        <h3>Test #1</h3>
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.
        Vestibulum ultricies laoreet orci, sit amet molestie nulla efficitur ac.
      </div>
      </a>(10 questions)
    </li>
    <li>
      <a href="?page=tests_verbal_orthographe2" class="info-inside">Tests de l'orthographe 2
      <div class="info-content">
        <h3>Test #2</h3>
        <p>Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos.
        Maecenas tellus elit, suscipit at laoreet et, tempor a orci.
      </div>
      </a>(10 questions)
    </li>
  </ul>
</section>

A ce stade l'« info bulle » apparaît mais est statique, ce qui est très souvent largement suffisant pour ne pas donner le tournis

**jlb59** · 19/07/2024, 11h58

Envoyé par NoSmoking

Normal, le but étant d'aller étape par étape et donc si tu as cette structure pour faire apparaître l'« info bulle » il faut utiliser le CSS suivant.

A ce stade l'« info bulle » apparaît mais est statique, ce qui est très souvent largement suffisant pour pas donner le tournis

Bonjour NoSmoking,

L'exemple que tu m'as donné est idéal, et comme tu dis, même s'il est statique, pour l'instant ça me convient.

De toute manière, en surfant et en visitant beaucoup de sites et forums, je n'en ai trouvé aucun où le Tooltip suit le mouvement de la souris.

Je vais me servir de ton exemple qui est très simple à manipuler, sinon dans les autres, il y a du JS, c'est sans doute mieux encore faut-il bien connaître ce langage.

Un grand merci et passe une agréable journée... à l'ombre sans aucun doute !

**NoSmoking** · 19/07/2024, 18h39

Je vais me servir de ton exemple qui est très simple à manipuler, sinon dans les autres, il y a du JS, c'est sans doute mieux encore faut-il bien connaître ce langage.

lorsque le CSS suffit à faire le job autant utiliser le CSS.

Ceci dit avec l’avènement des variables CSS il devient encore plus aisé de manipuler les éléments en JavScript avec la méthode setProperty().

Ressources :

PS : n'hésite pas à mettre la discussion en résolue.

Utiliser onmouse (quelquechose)

CSS

Discussions similaires

Partager

Partager