Surlignage ligne + affichage div avec jonction

poupilou · 28 Juin 2012

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 ?

spout · 28 Juin 2012

http://craigsworks.com/projects/qtip/demos/
http://www.1stwebdesigner.com/css/stylish-jquery-tooltip-plugins-webdesign/
http://www.webdesignbooth.com/15-jquery-plugins-to-create-an-user-frie ... y-tooltip/
?

poupilou · 28 Juin 2012

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)

spout · 28 Juin 2012

Ça ne marche pas car tu initialises qtip alors qu'il n'est pas encore inclus.
Firebug est ton ami

poupilou · 28 Juin 2012

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

poupilou · 28 Juin 2012

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?

spout · 28 Juin 2012

Ok sur Chrome, pour faire le test vite fait: http://jsbin.com/urahaz/edit#preview

poupilou · 29 Juin 2012

Merci pour ce lien Spout que je ne connaissais pas, je vais le mettre en favoris

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é) :