11548 sujets

JavaScript, DOM et API Web HTML5

Comment obtenir cet effet en hover sur un row de table

Bonjour à tous,

on me demande de réaliser un effet qui me parrait franchement compliqué à faire sur un row de table.
Voilà l'image, regarder bien l'effet hover sur le row un peu en dessous de la moitié :
upload/23395-tableauex.jpg

Etant donné que l'effet s'applique en hover sur un row (un tr), il me semble que le javascript est indispensable.

Le grossiement de l'ensemble y compris de lataille des caractère et surtout L'effet de decrochage me semble difficile à faire.

Si quelqu'un à une idée de la façon de s'y prendre pour faire ça et de façon compatible meme sur ie7 ce serait très intéressant.

Merci pour votre aide souvent précieuse. Smiley biggrin
Je pense que je ferais comme ceci :

sur le mouseover copier le contenu de la TR,
créer une div contenant une table, y injecter le contenu de la TR et afficher le tout par dessus
Bonjour,

Voici peut-être une piste. Ce n'est pas TOUT A FAIT le même effet, mais il a le mérite de ne pas faire appel au javascript. Il n'utilise que le CSS et fonctionne parfaitement sur IE8 et Firefox 3.6.13. J'ai pas testé d'autres navigateurs ...

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
  <head>
    <meta http-equiv="content-type" content="text/html; charset=iso-8859-1" />
    <title>Mise en évidence d'une ROW lors d'un HOVER</title>
    <style type="text/css">
[code=css]/*<![CDATA[*/
        #tableau {
                width:600px;
                margin:0 auto;
                font:normal 11pt helvetica,arial,verdana;
                border:none
        }
        th {
                background:#EBEBEB;
                font:bold 12pt helvetica,arial,verdana;
                text-align:center;
                color:#6B6B6B
        }
        td {
                border-bottom:solid 1px #E1E1E1;
                padding-left:20px
        }
        .g {
                color:blue;
                font-weight:bold
        }
        .ligne:hover > td {
                cursor:pointer;
                font-size:14pt;
                padding:7px 0px 7px 10px;
                border-top:solid 2px #DADADA;
                border-bottom:solid 3px #F1F1F1;
        }
        .l1 {background:#E2E9F1}
        .l2 {background:#EBEBEB}
    /*]]>*/
</style>
</head>
<body>
<table id="tableau" border="0" cellpadding="2" cellspacing="0">
<tr><th>COLONNE 1</th><th>COLONNE 2</th><th>COLONNE 3</th></tr>
<tr class="ligne l1"><td class="g">col 1</td><td>col 2</td><td>col 3</td></tr>
<tr class="ligne l2"><td class="g">col 1</td><td>col 2</td><td>col 3</td></tr>
<tr class="ligne l1"><td class="g">col 1</td><td>col 2</td><td>col 3</td></tr>
<tr class="ligne l2"><td class="g">col 1</td><td>col 2</td><td>col 3</td></tr>
<tr class="ligne l1"><td class="g">col 1</td><td>col 2</td><td>col 3</td></tr>
<tr class="ligne l2"><td class="g">col 1</td><td>col 2</td><td>col 3</td></tr>
<tr class="ligne l1"><td class="g">col 1</td><td>col 2</td><td>col 3</td></tr>
<tr class="ligne l2"><td class="g">col 1</td><td>col 2</td><td>col 3</td></tr>
</table>
</body>
</html>
[/code]

A+
Cordialement,
Lddsoft
Modifié par lddsoft (05 Mar 2011 - 12:12)
Merci beaucoup,

Je crois que ta methode nucleo m'a l'air interessante.
Pas facile à realiser je crois mais surement une des meilleures pistes.
Je vais bosser sur le sujet d'ici qq jours avec plus d'attention.
Je viendrais vous dire comment je m'y suis pris.

Merci iddsoft pour ta reponse mais ton systeme n'est pas du tout crossbrowser et l'usage du javascript sera de tout de façon obligatoire pour faire fonctionner le hover.
De plus ça ne prend pas en compte le decrochage sur les coté ainsi que les ombres et les petits details que je suis bien obligé de rendre precisemment.
Modifié par boucdur00000 (05 Mar 2011 - 16:58)
@boucdur00000

Je t'avais dit d'emblée que ce n'était pas tout à fait pareil que sur l'image que tu affiches. Désolé !

Pour ne pas mourir idiot : en quoi mon systeme (validé W3C) n'est-il pas du tout crossbrowser, s'il te plaît ?
boucdur00000 a écrit :
mais ton systeme n'est pas du tout crossbrowser et l'usage du javascript sera de tout de façon obligatoire pour faire fonctionner le hover

Heu... :hover marche dans tous les navigateurs modernes, et même dans cette antiquité d'IE7. Smiley cligne
:hover fonctionne même (partiellement) dans IE5 et 6 Smiley langue Ça dépend juste sur quel élément on l'applique. Smiley cligne
Modifié par jb_gfx (05 Mar 2011 - 22:02)
A ma connaissance il me semblait que le hover ne fonctionnait que sur les éléments <a> dans ie7 mais je me trompe peut etre en effet.

Quoi qu'il en soit merci pour le coup de main iddsoft.
boucdur00000 a écrit :
A ma connaissance il me semblait que le hover ne fonctionnait que sur les éléments &lt;a&gt; dans ie7 mais je me trompe peut etre en effet.

C'est le cas dans IE6. L'implémentation de :hover a été corrigée dans IE7.
À toi de voir si tu vises Papy IE6 (parts de marché à 3.9% ou 1.87% en février 2011 en France, selon la source choisie). IE6 peut tout à fait être traité en dégradation gracieuse (effet au survol absent).
Sujet clos
Aller à