5438 sujets

Sémantique web et HTML

Pages :
Bonjour à tous,

Je souhaite afficher des textes différents selon la zone ou se situe ma souris sur une image.

Sur l'image jointe ci-dessous de l'avocat, je souhaiterais 1 texte différent selon si on passe sur la peau, la chair ou le noyau.

J'ai divisé mon image en parties différentes, mais forcément seul le texte de l'image au premier plan s'affiche.

Auriez vous une solution ?

Merci à tous.

upload/1642682785-84086-avocatsmall.png
Modérateur
Salut !

Alors le soucis c'est qu'une image, c'est carré. Donc la y'a 3 carrés l'un sur l'autre et meme si tu les réduit au max tu va avoir un truc du genre :

upload/1642683967-42161-capturedancran2022-01-2014054.png
Mais bon c'est pas ouf... Le seukl moyen que je vois pour avoir un découpage aussi préci c'est de passer par du SVG inline. Refaire les formes de tes parties en SVG et superposer ça a ton image.
Hello,

Merci pour ton retour rapide, c'est ce que je me disais, avec que des carrés c'est compliqué, donc je vais regarder pour le SVG Inline.
Modérateur
Bonjour,

Il me semble qu'on pourrait ici utiliser la propriété css clip-path.

On découpe l'image en plusieurs images, qui peuvent avoir la même taille que l'image de départ. On ajoute pour chaque image un clip-path qui entoure seulement la partie pour laquelle on veut qu'une action ait lieu.

Un exemple vite fait : https://jsfiddle.net/parsimonhi/k85pLsmf/

Amicalement,
Modifié par parsimonhi (20 Jan 2022 - 14:50)
Merci Parsimonhi,

Je ne connaissais pas cette fonction css, je vais essayer de comprendre le système des pourcentages.
La fonction SVG a l'air plus propre mais aussi plus compliquée Smiley sweatdrop
Modérateur
Bonjour,

Les %, c'est juste une unité comme une autre. Le clip-path peut être un polygone qui entoure au mieux la portion de l'image concernée. Chaque couple de % représente un des sommets du polygone. Par exemple, "50% 0" représente un point qui est au milieu et en haut de l'image. "50% 50%" est le point au centre de l'image.

Amicalement,
Modérateur
Bonjour,

Voici une version où le noyau est découpé avec plus de précision à l'aide de courbes de Bézier.

https://jsfiddle.net/parsimonhi/4yftvmcb/

J'ai rajouté une <div> par dessus que j'ai colorisé afin qu'on puisse visualiser les contours de la découpe. Mais il faut bien entendu retirer cette <div> une fois la découpe mise au point.

EDIT: variante avec le noyau, la chair et la peau mis en évidence https://jsfiddle.net/parsimonhi/pqkcugL9/

Amicalement,
Modifié par parsimonhi (20 Jan 2022 - 16:05)
Modérateur
Waaaaah la violence du clip-path ! Je suis admiratif. T'as fait ca direct dans l'éditeur à vue ou t'a un éditeur pour le dessiner ?
Modérateur
Bonjour,

_laurent a écrit :
T'as fait ca direct dans l'éditeur à vue ou t'a un éditeur pour le dessiner ?


La méthode est la suivante.

1) J'ai téléchargé l'image de l'avocat
2) J'ouvre l'image de l'avocat avec Inkscape (logiciel qui fait du svg mais qui peut ouvrir des images de tout format).
3) Dans la colonne de gauche je clique sur l'outil qui permet de "Tracer des courbes de Bézier et des segments de droites".
4) Je fais une série de clics pour entourer une forme.
5) Dans la colonne de gauche je clique sur l'outil qui permet de "Editer les noeuds ou les poignées de control d'un chemin".
6) Je sélectionne tous les noeuds du chemin dessiné à l'étape 4.
7) Dans la barre d'outil du haut, je clique sur l'outil qui permet de "Rendre doux les noeuds sélectionnés". À ce stade, le "chemin" devient prêt à l'emploi.
8) Il y a ensuite pas mal de manières de récupérer le code du chemin. Pour ma part, j'utilise l'éditeur XML de Inkscape que je fais apparaitre à la droite de l'écran. Je cherche le chemin dans le code et je fais simplement un copier-coller.

Il faut moins de 5mn montre en main pour fabriquer le chemin souhaité.

Amicalement,
Et j'ai une autre question : Au lieu d'afficher du texte dans la bulle je souhaite afficher une image, je sais qu'il y a moyen de le faire mais après presque 10 ans sans coder je suis un peu perdu Smiley sweatdrop

J'ai essayé plusieurs choses mais sans résultat Smiley confus
Modérateur
Bonjour,

Tu peux éventuellement faire la chose suivante :
1) tu mets dans le html les images (que je vais appeler "images bulle") que tu veux faire apparaitre juste après les images (que je vais appeler "de base") dont le survol provoquera l'apparition des images bulle.
2) dans le css, tu mets le display des images bulle à none.
3) dans le css toujours, tu mets le display d'image bulle à block lorsqu'elle suit une image de base que tu survoles.
4) dans le css toujours, tu mets toutes ces images en position absolute pour qu'elles se superposent.


img.imgBulle {position:absolute;display:none;}
img.imgDeBase:hover+img.imgBulle {display:block;}


Tu auras peut-être quelques adaptations de positionnement à faire, et peut-être aussi à utiliser la propriété css pointer-events:none ici et là, mais ça devrait tomber en marche assez facilement.

Tu peux aussi remplacer les images bulle par des boites plus complexes contenant plusieurs balises. Le principe sera le même.

Amicalement,
Hello, après plusieurs tentatives, je n'arrive pas à afficher correctement les choses, soit le "svg" n'est plus pris en compte, donc au survol ça affiche qu'une seule image quelque soit l'endroit ou est la souris, soit j'ai trois images "avocat", qui ouvrent bien chacune son image bulle...

Donc en gros, j'arrive à faire fonctionner les choses une par une, mais ça ne fonctionne pas tout ensemble, je pense qu'il me manque quelques notions malgré les explications claires Smiley decu
Modifié par Zizoumou (18 Feb 2022 - 14:41)
Hello,

Un des multiples codes essayés... Celui ci me donne trois images différentes sans prendre en compte le noyau, la chair et la peau.
Ma compagne qui veut ça sur son site et je pensais être capable de le faire mais j'ai perdu beaucoup de notions de code Smiley biggol

<div class="avocat">
		<img title="" src="https://forum.alsacreations.com/upload/1642682785-84086-avocatsmall.png" class="imgB1">
		<img title="" src="..//Avocat/250s1.png" class="imgBulle1">
		<div></div>
		<img title="" src="https://forum.alsacreations.com/upload/1642682785-84086-avocatsmall.png" class="imgB2">
		<img title="" src="..//Avocat/20s1.png" class="imgBulle2">	
		<div></div>
		<img title="" src="https://forum.alsacreations.com/upload/1642682785-84086-avocatsmall.png" class="imgB3">
		<img title="" src="..//Avocat/3s1.png" class="imgBulle3">
		<div></div>
	</div>


img.imgB1:nth-of-type(1),
div>div:nth-of-type(1) {
  clip-path: path('M 50,85 C 46,88 50,94 49,99 49,102 46,105 46,108 45,112 46,115 46,118 46,123 45,128 46,133 46,136 48,140 49,144 50,148 52,152 53,155 55,161 56,167 58,173 64,187 71,200 79,212 88,224 98,236 110,245 124,256 141,265 159,270 171,273 184,274 196,272 207,270 218,265 227,259 233,254 242,249 241,241 237,169 146,129 84,93 78,89 71,88 65,87 60,86 54,82 50,85 Z');
}

img.imgB2:nth-of-type(2),
div>div:nth-of-type(2) {
  clip-path: path('M 100,45 C 97,46 95,50 94,53 91,58 90,63 89,67 88,73 87,79 87,84 86,89 86,94 86,98 85,107 85,116 86,125 87,134 90,143 93,152 96,163 99,176 106,186 110,192 117,195 123,200 133,207 144,215 155,221 167,228 179,236 192,241 202,244 213,248 223,247 230,246 238,243 243,238 246,235 246,231 247,227 249,220 251,214 251,208 250,197 246,186 242,176 238,168 233,160 228,152 212,130 194,111 174,93 166,86 157,81 148,75 144,72 140,68 135,66 133,65 131,67 129,66 122,63 120,54 114,50 110,47 105,44 100,45 Z');
}

img.imgB3:nth-of-type(3),
div>div:nth-of-type(3) {
  clip-path: path('M 183,100 C 180,101 177,103 175,105 171,108 169,113 166,117 164,122 162,126 160,131 158,134 157,137 156,141 155,146 155,151 155,156 154,159 153,163 154,166 155,170 159,173 161,176 164,179 166,181 169,183 172,186 176,186 179,188 183,191 186,194 189,196 192,197 195,197 198,198 202,198 206,198 209,197 213,195 217,192 220,189 222,186 224,182 226,178 228,173 228,167 228,161 228,156 227,151 225,146 224,142 223,139 221,136 220,132 218,129 217,126 215,123 213,121 211,118 209,116 207,113 205,111 203,109 200,108 198,106 195,104 193,102 190,101 189,100 188,100 187,100 186,100 184,99 183,100 Z');
}

div>div {
  position: absolute;
  width: 600px;
  height: 622px;
  pointer-events: none;
}

img.imgBulle1 {position:absolute;display:none;}
img.imgB1:hover+img.imgBulle1 {display:block;}

img.imgBulle2 {position:absolute;display:none;}
img.imgB2:hover+img.imgBulle2 {display:block;}

img.imgBulle3 {position:absolute;display:none;}
img.imgB3:hover+img.imgBulle3 {display:block;}
Modérateur
Bonjour,

Bon, on va essayer de sauver ton couple ! Smiley lol

Tu souhaites quoi ? Une seule image de l'avocat visible et 3 bulles qui sont elles-mêmes des images ?

Edit : et tes images-bulles, elles sont comment ?

Amicalement,
Modifié par parsimonhi (18 Feb 2022 - 16:16)
Modérateur
parsimonhi a écrit :
Bon, on va essayer de sauver ton couple ! Smiley lol

mdr Smiley lol
Lol merci Smiley lol

C'est bien ça, une seule image d'avocat visible et 3 "images bulles" différentes qui s'affichent lors du passage sur le noyau, la chair, la peau.

les images bulles sont des images 400x400, je n'ai pas d'image bulle finale à te présenter car elle n'a pas encore finalisé son texte mais voilà les exemples avec lesquels j'ai essayé.

upload/1645198282-84086-imgbulle1.png
upload/1645198297-84086-imgbulle2.png
upload/1645198320-84086-imgbulle3.png
Modérateur
Bonsoir,

tu devrais simplifier tes sélecteurs pour éviter de t’emmêler les pinceaux.
Toutes tes images ont une classe différente(pourrait être une id en final), le :nth-of-type n'est pas nécessaire à priori et source de confusion/erreur.
Ton avocat est en position 1/3/5 et les images bulles en 2/4/6 .... donc pas de clip-path pour les trois dernières avec ton :nth-of-type (4/5/6 text/avocat/text)

Tu appliques le clip-path aussi sur l'image du texte , forcément il va t'en manquer un morceau Smiley cligne .

Il y a aussi des div qui semble tout prêt a recevoir ton texte. Veut tu les utiliser à la place des images à textes ?( peut-être? figure/img/figcaption )

Enfin, est ce que ces trois parties à survoler ne vont montrer qu'un texte ou y aura-t’il aussi un lien(option) cliquable vers une définition ou une portion de ta page ? ( peut-être image map ?)

la bulle est à afficher en dessous de l'image ou au dessus ? (pointer-events?)

Cdt
Modifié par gcyrillus (18 Feb 2022 - 18:06)
Modérateur
Bonjour,

Alors déjà, on peut simplifier le html. On peut se contenter d'une seule image de l'avocat. Et il faut mettre les <div></div> avant les bulles qui les concernent.

<div class="avocat">
	<img title="" src="https://forum.alsacreations.com/upload/1642682785-84086-avocatsmall.png" class="imgAvocat">
	<div></div>
	<img title="" src="../Avocat/bulle1.png">
	<div></div>
	<img title="" src="../Avocat/bulle2.png">	
	<div></div>
	<img title="" src="../Avocat/bulle3.png">
</div>


Ensuite, pour le css, il faut mettre pointer-events: none sur les images car celles-ci sont affichées en entier (les bulles dépassent des parties sensibles de l'avocat si je comprends bien ce que tu veux faire) et il faut donc les rendre inactives au passage de la souris (c'est à ça que ça sert, pointer-events: none). Par contre il ne faut surtout pas mettre de pointer-events: none sur les <div> qui eux sont "découpés" et constitueront les parties sensibles qui lorsqu'elles seront survolées provoqueront l'affichage des bulles.

Ensuite, pour la taille des images et des <div>, il faut que tout soit à la même taille et corresponde au découpage qui est fait dans le clip-path. Ce découpage a été prévu pour une taille de l'image de 300x322 px. S'il te faut une autre taille pour l'image de l'avocat, il faudra sans doute utiliser la propriété css transform:scale(x) sur les <div> où x est un nombre indiquant le grossissement. Attention, ça peut être délicat à mettre au point. Il faudra peut-être aussi rajouter une translation via par exemple les propriétés css left et top. Dans l'exemple qui suit, j'affiche une image d'avocat de 600x644 soit le double des dimensions de départ (au passage, 2 fois 322 = 644 et non pas 622).

.avocat {
	position: relative;
	width: 600px;
	height: 644px;
}
.avocat img
{
	position: absolute;
	pointer-events: none;
}
.avocat div:nth-of-type(1) {
	clip-path: path('M 50,85 C 46,88 50,94 49,99 49,102 46,105 46,108 45,112 46,115 46,118 46,123 45,128 46,133 46,136 48,140 49,144 50,148 52,152 53,155 55,161 56,167 58,173 64,187 71,200 79,212 88,224 98,236 110,245 124,256 141,265 159,270 171,273 184,274 196,272 207,270 218,265 227,259 233,254 242,249 241,241 237,169 146,129 84,93 78,89 71,88 65,87 60,86 54,82 50,85 Z');
}

.avocat div:nth-of-type(2) {
	clip-path: path('M 100,45 C 97,46 95,50 94,53 91,58 90,63 89,67 88,73 87,79 87,84 86,89 86,94 86,98 85,107 85,116 86,125 87,134 90,143 93,152 96,163 99,176 106,186 110,192 117,195 123,200 133,207 144,215 155,221 167,228 179,236 192,241 202,244 213,248 223,247 230,246 238,243 243,238 246,235 246,231 247,227 249,220 251,214 251,208 250,197 246,186 242,176 238,168 233,160 228,152 212,130 194,111 174,93 166,86 157,81 148,75 144,72 140,68 135,66 133,65 131,67 129,66 122,63 120,54 114,50 110,47 105,44 100,45 Z');
}

.avocat div:nth-of-type(3) {
	clip-path: path('M 183,100 C 180,101 177,103 175,105 171,108 169,113 166,117 164,122 162,126 160,131 158,134 157,137 156,141 155,146 155,151 155,156 154,159 153,163 154,166 155,170 159,173 161,176 164,179 166,181 169,183 172,186 176,186 179,188 183,191 186,194 189,196 192,197 195,197 198,198 202,198 206,198 209,197 213,195 217,192 220,189 222,186 224,182 226,178 228,173 228,167 228,161 228,156 227,151 225,146 224,142 223,139 221,136 220,132 218,129 217,126 215,123 213,121 211,118 209,116 207,113 205,111 203,109 200,108 198,106 195,104 193,102 190,101 189,100 188,100 187,100 186,100 184,99 183,100 Z');
}

.avocat div {
	position: absolute;
	left: 150px;
	top: 161px;
	width: 300px;
	height: 322px;
	transform: scale(2);
}

.avocat img:not(:first-of-type) {display:none;}
.avocat div:hover+img {display:block;}

.avocat .imgAvocat {
	width: 600px;
	height: 644px;
}


EDIT: du fait que les bulles sont des images qui peuvent dépasser des parties sensibles, et du fait qu'on n'a pas en fait 3 images découpées pour l'avocat, mais une seule, j'ai dû modifier le principe du code que j'avais fait il y a quelques semaines.

Amicalement,
Modifié par parsimonhi (18 Feb 2022 - 18:40)
Meilleure solution