28173 sujets

CSS et mise en forme, CSS3

Bonjour à tous,
J'ai développé un petit système sous wordpress qui me permet de remplir les cases d'un cercle avec des images de textures. En faite, si je coche une texture dans les catégories wordpress au niveau d'un article, alors le cercle se remplit de la couleur correspondante. Donc pour l'image ci-dessous, j'ai coché dans l'admin 2 couleurs. upload/17281-Capturedec.png
J'ai fait cela en css. Ma première image est un cercle vide positionné en relatif, et a chaque fois que j'ajoute une couleur, une image en background (css) apparait par dessus l'autre image, ainsi de suite, elles sont donc en absolu top:0 et left:0.
Les images se superposent. ca marche c'est cool, mais y a une limite et c'est là que j'ai besoin de votre aide Smiley smile

Je souhaite ajouter un petit effet tooltip, afin de pouvoir avoir le nom de la couleur qui apparait. Hors, comme les images sont superposées, impossible de faire cela. Il faut donc que je trouve une autre solution.
Si vous en avez une, je suis preneur !

Pour info, cela peut toujours service, voici mon code wp.

  <div class="couleurs">
             <?php $args = array('orderby' => 'term_group', 'fields' => 'all');
              $terms = wp_get_object_terms($post->ID,'couleurs', $args );
 $count = count($terms);
 if ( $count > 0 ){
     foreach ( $terms as $term ) {
       echo '<div class="' . $term->slug . '"><a class="hastip" title="' . $term->name. '"></a></div>';
		 }
	 }
	 ?>	 
	 </div>


Merki
Modifié par dreadstock (24 Sep 2012 - 21:09)
Bonjour,

Essai peut être un mapping que tu prépares au complet :
www.w3schools.com/tags/tag_map.asp

Et tu n'affiches que les balises "area" qui doivent correspondre au textures qui sont présentes.
Peut être d'autres solutions existent mais là je n'ais pas d'autres idées simple à mettre en place. Smiley cligne
Cette solution fonctionne t'elle ? Ca serait sympa d'avoir quand même un petit retour de ta part... Smiley cligne
Modifié par Spacedementia (24 Sep 2012 - 21:08)
Spacedementia a écrit :
Cette solution fonctionne t'elle ? Ca serait sympa d'avoir quand même un petit retour de ta part... Smiley cligne

Je n'ai pas utilisé cette solution, car pas possible de l'adapter en dynamique avec Wordpress. J'ai du changer d'idée Smiley cligne .
Mais le map area est une excellente alternative. Merci
Ok, merci pour ton retour. Par contre ça serait intéressant d'expliquer pour les suivants la technique alternative que tu as utilisé. A moins que tu as finalement laissé tombé l'idée du cercle ? Smiley cligne
Modifié par Spacedementia (24 Sep 2012 - 21:15)