Surlignage ligne + affichage div avec jonction

Discussion dans 'Développement d'un site Web ou d'une appli mobile' créé par poupilou, 28 Juin 2012.

  1. poupilou
    poupilou WRInaute impliqué
    Inscrit:
    9 Février 2004
    Messages:
    934
    J'aime reçus:
    15
    Salut à tous,

    J'ai mes produits qui sont affichés dans un tableau html et je souhaiterai lorsqu'on passe la souris sur une ligne du tableau que la ligne change de couleur et qu'à la fin de cette ligne (à droite) une div s'affiche avec le détail de ce produit.

    J'aimerai qu'il y ai une jonction entre la ligne et la div qui soit faite par un V tourné à 90° dans le sens d'une montre.

    Il y a quelque temps, j'avais lu sur le web un tuto qui expliquait cette technique mais j'arrive pas à le retrouver :(

    Pouvez-vous m'aider ? :)
     
  2. poupilou
    poupilou WRInaute impliqué
    Inscrit:
    9 Février 2004
    Messages:
    934
    J'aime reçus:
    15
    Spout, j'ai essayé de faire fonctionner ce jquery plugin http://craigsworks.com/projects/qtip/demos/ mais ça ne fonctionne pas :( l'as-tu déjà fait fonctionner ?

    J'ai essayé cet exemple ci-dessous qui devrait afficher "This is an active list element" au survol des <li> mais ça marche pas :

    Code:
    <html>
    <body>
    <ul>
        <li>Salut</li>
        <li>Salut 2</li>
        <li>Salut 3</li>
        <li>Salut 4</li>
    </ul>
    <script type="text/javascript">
    $('ul:last li.active').qtip({
       content: 'This is an active list element',
       show: 'mouseover',
       hide: 'mouseout'
    })
    </script>
    <script type="text/javascript" src="../scripts/jquery-1.3.2.min.js"></script>
    <script type="text/javascript" src="../scripts/jquery.qtip-1.0.0.min.js"></script>
    </body>
    </html>
    
    C'est ce style de div http://www.dynamicdrive.com/style/csslibrary/item/css_triangle_arrow_divs/ que je souhaite réaliser (avec une flêche qui pointera sur la ligne de mon tableau)
     
  3. spout
    spout WRInaute accro
    Inscrit:
    14 Mai 2003
    Messages:
    9 163
    J'aime reçus:
    338
    Ça ne marche pas car tu initialises qtip alors qu'il n'est pas encore inclus.
    Firebug est ton ami :)
     
  4. poupilou
    poupilou WRInaute impliqué
    Inscrit:
    9 Février 2004
    Messages:
    934
    J'aime reçus:
    15
    J'ai aussi essayé comme cela :

    Code:
    <html>
    <head>
    <script type="text/javascript" src="../scripts/jquery-1.3.2.min.js"></script>
    <script type="text/javascript" src="../scripts/jquery.qtip-1.0.0-rc3.min.js"></script>
    <script type="text/javascript">
    <!--
    $('ul:last li.active').qtip({
       content: 'This is an active list element',
       show: 'mouseover',
       hide: 'mouseout'
    })
    //-->
    </script>
    </head>
    <body>
    <ul>
        <li>Salut</li>
        <li>Salut 2</li>
        <li>Salut 3</li>
        <li>Salut 4</li>
    </ul>
    </body>
    </html>
    
    mais ça ne marche pas non plus :(
     
  5. poupilou
    poupilou WRInaute impliqué
    Inscrit:
    9 Février 2004
    Messages:
    934
    J'aime reçus:
    15
    Pouvez-vous me dire si ce triangle noir s'affiche correctement avec votre Internet Explorer 9 ?
    Code:
    <html>
    <head>
    <style>
    .css-arrow-right {
        border-color:transparent transparent transparent #000000;
        border-style:solid;
        border-width:10px 0 10px 15px;
        height:0;
        width:0;
    }
    </style>
    </head>
    <body>
    <div class='css-arrow-right'></div>
    </body>
    </html>
    
    Sur mon ordi il y a une pointe du triangle qui est rognée :( avec Firefox pas de problème mais avec IE9 ça bug, et chez vous?
     
  6. spout
    spout WRInaute accro
    Inscrit:
    14 Mai 2003
    Messages:
    9 163
    J'aime reçus:
    338
  7. poupilou
    poupilou WRInaute impliqué
    Inscrit:
    9 Février 2004
    Messages:
    934
    J'aime reçus:
    15
    Merci pour ce lien Spout que je ne connaissais pas, je vais le mettre en favoris :D

    As tu essayé mon code html ci-dessus sur ton ordi avec IE9 pour voir si ce triangle noir s'affiche correctement parce qu'avec mon IE9 voici le résultat (le triangle est tronqué) :

    [​IMG]
     
Chargement...
Similar Threads - Surlignage ligne affichage Forum Date
La surbrillance dans le cache google ; le surlignage est absent ou décalé Problèmes de référencement spécifiques à vos sites 18 Juin 2009
[résolu] surlignage css Développement d'un site Web ou d'une appli mobile 26 Avril 2007
Boutique en ligne de mode Demandes d'avis et de conseils sur vos sites 16 Novembre 2021
Mise en ligne de beaucoup de produits e-commerce 17 Juin 2021
Les meilleurs sites en ligne pour faire une vente aux enchères Demandes d'avis et de conseils sur vos sites 20 Mai 2021
Test de mon nouveau site en laissant l'ancien en ligne Administration d'un site Web 28 Avril 2021
Choix de balise de données structurées pour un service en ligne gratuit Débuter en référencement 31 Mars 2021
Je débute dans l'indexation d'une boutique en ligne e-commerce 17 Mars 2021
Un concurrent qui saute sur Google - les 3/4 de son site est hors ligne suite Incendie OVH Référencement Google 15 Mars 2021
Restriction éditeur pour Jeux d'argent et de hasard en ligne AdSense 16 Février 2021
WordPress Lignes restantes après changement de plugin de cache URL Rewriting et .htaccess 5 Juin 2020
Un Featured Snippet envoie l'internaute vers le texte surligné en jaune fluo Référencement Google 4 Juin 2020
Ajouter des lignes de rich snippet - KK Star Référencement Google 31 Mars 2020
Aligner des checkboxradio jQuery Développement d'un site Web ou d'une appli mobile 7 Mars 2020
Problème de hauteur de ligne Développement d'un site Web ou d'une appli mobile 7 Mars 2020
Faut-il préparer plusieurs articles avant mise en ligne ou pas ? Débuter en référencement 29 Janvier 2020
WordPress Boutique en ligne - 2 noms identiques ? Débuter en référencement 29 Janvier 2020
Problème avec les lignes <hr> Développement d'un site Web ou d'une appli mobile 21 Janvier 2020
Activité nationale en ligne et locale en physique Référencement Google 3 Novembre 2019
Google et les casinos en ligne comment celà peut être possible Référencement Google 9 Juillet 2019