Image au survol dans un tableau

**api82** · 19/01/2017, 09h41

Bonjour,

J'ai installé sur mon site un tableau pour visualiser un calendrier des floraisons.
Les données s'affichent correctement et la souris détecte bien l'image contenue dans la cellule photos, mais le format de la ligne est redimensionné.
Je souhaiterais que l'image apparaisse en plus grand, en survol et en superposition (foreground ) , sans modifier les dimensions de la ligne.
Mon code html

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
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="stylecalendar.css">
</head>
<body>
<table>
<CAPTION><FONT FACE="ARIAL" SIZE="8" , color=#000000 >Tableau de floraison des fleurs méllifères</FONT></CAPTION>
<thead>
<tr>
<th>Nom commun</th>
<th>Photos</th>
<th>Nom latin</th>
<th>Famille</th>
<th>Floraison</th>
<th>Nectar</th>
<th>Pollen</th>
</tr>
</thead>
<tbody>
<tr>
<td>Amandier</td>
<td style="width:50px;height:70px";
onmouseover="this.style.backgroundImage='url(amandier.jpg)';"
onmouseout="this.style.backgroundImage='url(none)';" >
Amandier </td>
<td>Prunus dulcis</td>
<td>Rosacées</td>
<td> Février->Mars</td>
<td>++</td>
<TD bgcolor="#FFFFFF" onMouseOver="this.bgColor='#6f5b5a';" onMouseOut="this.bgColor='#FFFFFF';" >Gris marron</td>
</tr>
</tbody>
</table>
</html>
 
Mon code css
<style>
table {
font-family: arial, sans-serif;
border-collapse: collapse;
width: 100%;
font-size: 10px;
}
tr:hover{background-color:#EFEFEF}
td, th {
border: 1px solid #000000;
text-align: center;
padding: 8px;
font-size: 10px;
}
th {color:#000000;font-size:18px;}
td {color:#000000;font-size:15px;}
tr:nth-child((3n+0) {
background-color: #D9E6F6;
}
</style>

Avez-vous une solution ?
Par avance merci et bonne année 2017
Bien cordialement

**api82** · 20/01/2017, 12h35

Bonjour,
L'idée de survol pouvait agrémenter le site en apportant des précisions florales et une meilleure lisibilité pour les botanistes amateurs.
Mon tableau fonctionne correctement , je ne poursuis pas cette amélioration trop coûteuse en temps de recherches et de développement.
Merci à ceux qui ont pris un peu de leur temps à me lire .

**melka one** · 20/01/2017, 20h08

jour

teste ceci

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
<html>
<head>
<script>
 
<html>
<head>
<script>
 
 function change(e){
 
                var le_clone=e.currentTarget.cloneNode(true);
                
                var bd=e.currentTarget.getBoundingClientRect()
                
                var taille_plus=250
                
                le_clone.style.position='absolute';
                le_clone.style.border='solid 1px black';
                le_clone.style.borderRadius='5px';
                
                le_clone.style.height=bd.height+taille_plus+'px';
                
                var width_plus=(bd.width/bd.height)*(bd.height+taille_plus)
                var left_plus=(width_plus-bd.width)/2
                
                le_clone.style.width =width_plus+'px';
                
                le_clone.style.left=bd.left-left_plus+scrollX+'px'
                le_clone.style.top=bd.top-taille_plus/2+scrollY+'px'
                le_clone.style.zIndex=100;
                le_clone.onmouseout=function(e){e.currentTarget.parentNode.removeChild(e.currentTarget)}
                le_clone.onmouseover="";
                document.body.appendChild(le_clone);
 
        }
</script>
</head>
<body>
 
<table style='width:600px;margin:auto;margin-top:100px'>
<tr>
<td><img src ='d1.jpg'onmouseover="change(event)"></td>
<td><img src ='d2.jpg'onmouseover="change(event)"></td>
<td><img src ='d3.jpg'onmouseover="change(event)"></td>
 
</tr>
</table>
 
</body>
</html>

pour modifier la taille de l'image il suffit de modifié la variable taille_plus

**NoSmoking** · 21/01/2017, 14h05

Bonjour,
tu peux réaliser cela rapidement en CCS en utilisation la propriété transform: scale(x), l'avantage et que cela ne « cassera » pas ta <table>.
Exemple de principe

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
<!DOCTYPE html>
<html lang="fr">
<head>
<meta charset="UTF-8">
<title>Zoom au survol</title>
<meta name="Author" content="NoSmoking">
<style>
#main {
  max-width: 60em;
  margin: auto;
}
img {
  transform-origin: left top;
  transition: all .5s;
  border: 1px solid #ccc;
}
img:hover {
  transform: scale(2);
}
</style>
</head>
<body>
<div id="main">
  <h1>Zoom au survol</h1>
  <img src="http://club.developpez.com/webdesign/Rubriques/Web/CSS/logo_outils_css.gif" alt="" class="">
 </div>
</body>
</html>

Nota :

<CAPTION><FONT FACE="ARIAL" SIZE="8" , color=#000000 >Tableau de floraison des fleurs méllifères</FONT></CAPTION>

vire tous les styles « inline » pour les mettre dans la partie style de ta page.

**api82** · 21/01/2017, 22h01

@melka one

Bonsoir,
Le script fonctionne et répond en partie , seuls les codes accentués ne sont pas gérés et affichent des incohérences,voir le fichier joint.
Merci pour cette nouvelle approche de gestion du survol
Cordialement Nom : codesaccentues.jpg
Affichages : 708
Taille : 25,2 Ko

Nom : codesaccentues.jpg
Affichages : 708
Taille : 25,2 Ko

Bonjour,
Le but recherché est le survol, mais sans pertes de définition , ce qui n’est pas le cas lors de l’agrandissement (var taille_plus=250) ,j’ai fait les essais en diminuant la valeur de cette variable.
En fait , il faut fonctionner en mode survol par la souris , de la cellule ,colonne photos (icône appareil photo), et faire apparaitre la photo représentative des différentes parties de la fleur, voir fichier joint.
J’ai essayé les fonctions ,onmouseout,onmouseover,mais sans succès.
Le projet avance !!!!
Nom : maquettecalendriersurvol.jpg
Affichages : 768
Taille : 91,0 Ko

Nom : maquettecalendriersurvol.jpg
Affichages : 768
Taille : 91,0 Ko

**api82** · 21/01/2017, 22h10

@NoSmoking

Merci pour ce script, mais comme inclure l'effet "Zoom" dans la structure du tableau suivant:

Code html :

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

1
2
3
4
5
6
7
8
9
10
11
12
<table >
<tr>
    <td>Abricotier</td>
    <td><img src ='*.jpg'></td>		
    <td>Prunus .....</td>
    <td>Rosa.....</td>
     <td>Mars->....l</td>
      <td>++</td>
    <TD bgcolor="#FFFFFF" onMouseOver="this.bgColor='#fed201';" onMouseOut="this.bgColor='#FFFFFF';" >Jaune d'or</td>
  </tr>
...
</table>

Cordialement

**api82** · 22/01/2017, 09h21

Bonjour,
Le but recherché est le survol, mais sans pertes de définition , ce qui n’est pas le cas lors de l’agrandissement (transform: scale(x)). En fait , il faut fonctionner en mode survol par la souris , de la cellule ,colonne photos (icône appareil photo), et faire apparaitre la photo représentative des différentes parties de la fleur, voir fichier joint.
J’ai essayé les fonctions ,onmouseout,onmouseover,mais sans succès.
Le projet avance !!!!

Nom : maquettecalendriersurvol.jpg
Affichages : 730
Taille : 91,0 Ko

Nom : maquettecalendriersurvol.jpg
Affichages : 730
Taille : 91,0 Ko

**api82** · 22/01/2017, 10h05

Pour info, les codes accentués sont réglés par la balise meta à placer dans la partie head.

Code html :

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

1
2
3
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
</head>

Cette partie est résolue,fonctionnement correct

**Watilin** · 22/01/2017, 18h48

Salut api82,

voilà une version reprise de ton code où j’ai séparé les couches HTML, CSS et JS comme le conseillait NoSmoking.

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
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>Api82</title>
  <style>
  
  body { font: 10px Arial, sans-serif;
  }
  table { border-collapse: collapse;
          width: 100%;
  }
  tr:nth-child(3n) { background-color: #D9E6F6;
  }
  tr:hover { background-color: #EFEFEF;
  }
  td, th { border: 1px solid black;
           text-align: center;
           padding: 8px;
           color: black;
  }
  th { font-size: 18px;
  }
  td { font-size: 15px;
  }
  caption { color: black;
            font-size: 500%;
  }
  
  /* --- cellules dynamiques --- */
  
  td.photo { width: 50px;
             height: 70px;
             background-size: 100%;
             background-position: center;
  }
  td.pollen { background-color: white;
  }
  
  </style>
</head>
<body>
 
<table>
  <caption>Tableau de floraison des fleurs méllifères</caption>
  <thead>
    <tr>
      <th scope="col"> Nom commun </th>
      <th scope="col"> Photos     </th>
      <th scope="col"> Nom latin  </th>
      <th scope="col"> Famille    </th>
      <th scope="col"> Floraison  </th>
      <th scope="col"> Nectar     </th>
      <th scope="col"> Pollen     </th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Amandier</td>
      <td class="photo" data-hover-image="amandier.jpg"> Amandier </td>
      <td> Prunus dulcis </td>
      <td> Rosacées </td>
      <td> Février &rarr; Mars </td>
      <td> ++ </td>
      <td class="pollen" data-hover-color="#6F5B5A"> Gris marron </td>
    </tr>
  </tbody>
</table>
 
<script>
 
'use strict';
 
document.addEventListener('mouseover', function (event) {
  let target = event.target;
  if ('TD' === target.tagName) {
    if (/\bphoto\b/.test(target.className)) {
      target.style.backgroundImage = 'url(' + target.dataset.hoverImage + ')';
    }
    else if (/\bpollen\b/.test(target.className)) {
      target.style.backgroundColor = target.dataset.hoverColor;
    }
  }
});
 
document.addEventListener('mouseout', function (event) {
  let target = event.target;
  if ('TD' === target.tagName) {
    if (/\bphoto\b/.test(target.className)) {
      target.style.backgroundImage = '';  
    }
    else if (/\bpollen\b/.test(target.className)) {
      target.style.backgroundColor = '';
    }
  }
});
 
</script>
</body>
</html>

Cette version tire parti des attributs HTML data-* qui se traduisent automatiquement en propriétés dataset dans le code JS.

Je me suis permis d’utiliser le récent mot-clé let, mais en revanche pas la méthode matches, qui n’est pas encore suffisamment supportée. Ça passe avec un polyfill mais je n’ai pas voulu encombrer le code.

Ce code permet de faire apparaître une miniature de l’image au survol de la cellule de tableau, mais pour l’instant, rien n’est fait pour que l’image apparaisse en plus grand en superposé.
L’idée de melka one me paraît bonne : cloner l’élément et modifier les dimensions du clone, cela permet d’éviter tout problème de déformation du contenant. Si j’ai bien compris, tu veux éviter le scaling CSS car ça crée des artefacts visuels.

Avec mon code c’est un peu l’inverse qui se produit : c’est l’image en pleine taille qui est utilisée pour la miniature. Si l’image est volumineuse, la miniature mettra du temps à apparaître et l’utilisateur peut croire que l’aperçu ne marche pas.
Pour corriger ce problème, on peut ajouter un code de préchargement des images, mais on a alors un autre problème : s’il y a beaucoup d’images, ça consomme de la bande passante et ça occupe de la mémoire vive.

Je te conseille de créer une version miniature pour chaque image, et de précharger uniquement les miniatures. Mais on pourra y revenir plus tard.
Pour l’instant ce qui nous intéresse c’est de mettre en œuvre ce système de clone. Pour faire simple, on va commencer avec un élément <img> nu, mais si tu veux ajouter des fioritures, il faudra sans doute employer une structure plus complexe.

Voilà une solution minimaliste qui a l’avantage de ne rien rajouter au code HTML. Je te donne simplement les morceaux à rajouter dans le code que je t’ai déjà donné :

Code CSS :

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

1
2
3
#grande-image { position: absolute;
                box-shadow: 0 0.5ex 1ex rgba(0, 0, 0, 0.5);
}

À placer à la fin du script, ou au début mais pas avant le 'use strict' :

Code JS :

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
let clone;
 
function afficherClone(src, rect) {
  if (!clone) {
    clone = document.createElement('img');
    document.body.appendChild(clone);
    clone.id = 'grande-image';
    clone.addEventListener('mouseout', function (event) {
      masquerClone();
    });
  }
  clone.src = src;
  clone.style.left = rect.left + 'px';
  clone.style.top  = rect.top  + 'px';
  clone.style.display = '';
}
 
function masquerClone() {
  clone.style.display = 'none';
}

Et à rajouter au gestionnaire 'mouseover' existant :

Code JS :

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

1
2
3
4
5
6
7
8
9
    …
    if (/\bphoto\b/.test(target.className)) {
      target.style.backgroundImage = 'url(' + target.dataset.hoverImage + ')';
      afficherClone(
        target.dataset.hoverImage,
        target.getBoundingClientRect()
      );
    }
    …

C’est vraiment minimal. Pour bien faire il faudrait contrôler les dimensions de l’image ; s’assurer qu’elle ne dépasse pas de la page quand elle est trop grande ; afficher un indicateur de chargement ; la positionner plus joliment comme l’a fait melka one ; etc. On peut aussi envisager d’ajouter des effets de transition (zoom, apparition/disparition progressive avec transparence, etc.).
C’est là qu’on aura besoin d’une structure HTML, ne serait-ce que mettre l’image dans une div.

Ça demande un petit peu plus de travail. Dis-moi déjà si cette solution part dans la bonne direction

**NoSmoking** · 22/01/2017, 19h36

Le but recherché est le survol, mais sans pertes de définition , ce qui n’est pas le cas lors de l’agrandissement (transform: scale(x)).

dans ce cas il te suffit sur le :hover de définir une scale(1) ce qui signifie qu'il faut démarrer avec une scale(.25) par exemple.

Je viens de voir la réponse de Watilin et sans avoir regardé sa proposition je pense qu'elle est aux petits oignons comme d'habitude

Je te fais une autre proposition qui reste dans l'esprit que je t'ai proposé, à savoir sur base exclusive de CSS.

Pour le soucis d'intégration dans une <table> il suffit d'intégrer l'image dans une <div> et ce compte tenu du comportement particulier des <table>.

Voici l'exemple qui ne demande pas plus de commentaire.

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
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
<!DOCTYPE html>
<html lang="fr">
<head>
<meta charset="UTF-8">
<title>[CSS] Zoom sur le <code>:hover</title>
<meta name="Author" content="NoSmoking">
<style>
#main {
  margin: auto;
  max-width: 60em;
}
table {
  border: 1px solid #888;
  border-collapse: separate;
  border-spacing: 0;
  empty-cells: hide;
  font: .9em Verdana,Geneva,Arial,Helvetica,sans-serif;
  background-color: #FFF;
}
caption {
  padding: .5em;
  font-size: 1.5em;
  font-weight: bold;
  color: #069;
}
th {
  height: 2em;
  border: 1px 1px 0 1px solid #FFF #888 #888 #FFF;
  text-shadow: 1px 1px 1px #FFF;
  background: linear-gradient(to bottom,#ABC 0,#CDE 2em);
}
td {
  padding: 0.5em;
  border-top: 1px solid #CCC;
  border-right: 1px solid #888;
  white-space: nowrap;
  word-break: normal;
}
td img {
  z-index: 1;
  transition: all .5s;
  transform: scale(.225);
  transform-origin: left top;
  cursor: pointer;
}
td img:hover {
  z-index: 1000;
  box-shadow: 2px 2px 10px #888;
  transform: scale(1);
}
td div {
  position: relative;   /* pour servir de référent */
  width: 6em;
  height: 4.75em;
  margin: auto;
  text-align: center;
  font-weight: bold;
}
td +td {
  width: 7em;
  padding: 0;
  text-align: left;
  font-weight: normal;
}
td +td +td {
  width: 15em;
  padding-left: .25em;
  border-right: none;
}
</style>
</head>
<body>
<div id="main">
  <h1>Zoom sur le <code>:hover</code></h1>
  <table>
    <caption>Aquarelles de René CHARRIER</caption>
    <tr>
      <th>Lieu</th>
      <th>Illustration</th>
      <th>Commentaire</th>
    </tr>
    <tr>
      <td>Fond d'Urle</td>
      <td><div><img src="http://nosmoking.developpez.com/demos/images/_font_d_urle.jpg" alt="" class=""></div></td>
      <td>A la sortie de la forêt de Lente</td>
    </tr>      
    <tr>
      <td>Vassieux</td>
      <td><div><img src="http://nosmoking.developpez.com/demos/images/_carrefour_vassieux.jpg" alt="" class=""></div></td>
      <td>Carrefour de la route de Font d’Urle avant la descente vers Vassieux.</td>
    </tr>
    <tr>
      <td>Grand-Veymont</td>
      <td><div><img src="http://nosmoking.developpez.com/demos/images/_grand_veymont.jpg" alt="" class=""></div></td>
      <td>Vu depuis le plateau de La Montagne de Beure.</td>
    </tr>      
  </table>
</div>
</body>
</html>

**api82** · 22/01/2017, 19h52

Bonsoir
Merci pour cette recherche, mais il n'y pas de résultats, voir nouveau script utilisé et fichier joint
Cordialement

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
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>Api82</title>
  <style>
  #grande-image { position: absolute;
                box-shadow: 0 0.5ex 1ex rgba(0, 0, 0, 0.5);
}
  body { font: 10px Arial, sans-serif;
  }
  table { border-collapse: collapse;
          width: 100%;
  }
  tr:nth-child(3n) { background-color: #D9E6F6;
  }
  tr:hover { background-color: #EFEFEF;
  }
  td, th { border: 1px solid black;
           text-align: center;
           padding: 8px;
           color: black;
  }
  th { font-size: 18px;
  }
  td { font-size: 15px;
  }
  caption { color: black;
            font-size: 500%;
  }
  
  /* --- cellules dynamiques --- */
  
  td.photo { width: 50px;
             height: 70px;
             background-size: 100%;
             background-position: center;
  }
  td.pollen { background-color: white;
  }
  
  </style>
</head>
<body>
 
<table>
  <caption>Tableau de floraison des fleurs méllifères</caption>
  <thead>
    <tr>
      <th scope="col"> Nom commun </th>
      <th scope="col"> Photos     </th>
      <th scope="col"> Nom latin  </th>
      <th scope="col"> Famille    </th>
      <th scope="col"> Floraison  </th>
      <th scope="col"> Nectar     </th>
      <th scope="col"> Pollen     </th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Amandier</td>
      <td class="photo" data-hover-image="amandier.jpg"> Amandier </td>
      <td> Prunus dulcis </td>
      <td> Rosacées </td>
      <td> Février &rarr; Mars </td>
      <td> ++ </td>
      <td class="pollen" data-hover-color="#6F5B5A"> Gris marron </td>
    </tr>
  </tbody>
</table>
 
<script>
 
'use strict';
 
document.addEventListener('mouseover', function (event) {
  let target = event.target;
  if ('TD' === target.tagName) {
    if (/\bphoto\b/.test(target.className)) {
      target.style.backgroundImage = 'url(' + target.dataset.hoverImage + ')';
    }
    else if (/\bpollen\b/.test(target.className)) {
      target.style.backgroundColor = target.dataset.hoverColor;
    }
  }
});
 
document.addEventListener('mouseout', function (event) {
  let target = event.target;
  if ('TD' === target.tagName) {
    if (/\bphoto\b/.test(target.className)) {
      target.style.backgroundImage = '';  
    }
    else if (/\bpollen\b/.test(target.className)) {
      target.style.backgroundColor = '';
    }
  }
});
let clone;
 
function afficherClone(src, rect) {
  if (!clone) {
    clone = document.createElement('img');
    document.body.appendChild(clone);
    clone.id = 'grande-image';
    clone.addEventListener('mouseout', function (event) {
      masquerClone();
    });
  }
  clone.src = src;
  clone.style.left = rect.left + 'px';
  clone.style.top  = rect.top  + 'px';
  clone.style.display = '';
}
 
function masquerClone() {
  clone.style.display = 'none';
}
 
</script>
</body>
</html>

Nom : watilin22_01_17.jpg
Affichages : 711
Taille : 41,5 Ko

**api82** · 22/01/2017, 20h55

Le nouveau script est testé avec mes paramètres, il semble répondre à mes recherches.
Je remercie les participants à cette discussion, beau travail d'équipe !!!
Je vais continuer la mise en place de mes nouvelles observations florales.

Image au survol dans un tableau

JavaScript

Discussions similaires

Partager

Partager