28111 sujets

CSS et mise en forme, CSS3

SVG et apparition/disparition de DIV

Bonjour tout le monde,

Aujourd'hui je bosse sur une page web comprenant une carte de France en svg, naturellement faite sur Illustrator, avec chaque région dans un groupe différent, une classe + un id pour chaque région.

Par très familier avec l'utilisation de svg, je tente des trucs mais je n'arrive pas au résultat souhaité.

Le but, justement, est d'arriver à afficher une div lorsque l'on passe la souris voire lorsque l'ont clique sur une région en particulier, affichant alors des informations sur celle-ci sous ladite carte de France.

Les yeux remplis d'espoir, j'ai posté dans CSS, sait on jamais, mais j'ai bien peur qu'il faille passer par du JS.

Je ne sais pas si je suis assez clair, n'hésitez pas à me demander des précisions si ce n'est pas le cas.

Merci par avance <3
Modifié par CKVTDN (22 Feb 2018 - 15:21)
Modérateur
Salut,

Est-ce que ton SVG est importé comme une image (<img src>) ou bien est-ce qu'il est en inline directement dans le code ?
Je ne te cache pas que la seconde solution est la plus arrangeante ! Smiley lol
Et si c'est la première, est-ce que tu as moyen de l'intégrer pour changer ça ?
Modifié par _laurent (22 Feb 2018 - 15:53)
Hey !

Merci de ta réponse.

Le SVG est intégré dans le code entre deux <svg>, c'est donc la solution la plus arrangeante à priori =)
Modérateur
J'imagine que ta div a faire apparaitre n'est pas du svg.... Bon du coup petit passage par du Js mais rien de compliqué.

Il faut récupérer le hover d'un svg et afficher ce que tu veux en fonction dans la div. Ou est-ce que tu coinçais ?

Voila un petit exemple https://jsfiddle.net/Undless/ao3bLdn8/14/
Effectivement, ma div à faire apparaître n'est pas du svg. N'est svg que ma carte. Le reste des infos est en brut dans le html.

Je ne suis pas un as (du tout) du JS, donc je coinçais juste après l'étape ou j'ai tenté quelque chose comme ça :

.textregion {
display: none;
}

.maregionsvg:hover .texteregion {
display: block;
}

Enfin pas loin. J'ai voulu faire l'apprenti sorcier. Dans d'autres cas de figure ça peut fonctionner, mais je n'ai jamais utilisé de svg auparavant et à priori ça ne réagit pas tout à fait de la même façon que les balises plus courantes.

Je vais donc aller jeter un œil à ton lien !
Modérateur
Ce que tu as tenté c'est du CSS pas du Js Smiley cligne Et l'idée était là !
Mais ".maregionsvg:hover .texteregion" ca voulais dire que .texteregion était à l'intérieur de .maregionsvg. Il aurait fallu mettre ".maregionsvg:hover ~ .texteregion" pour lui dire de prendre .texteregion à coté de .maregionsvg. Mais la comme .maregionsvg est en dehors du SVG il faut ressortir du parent et ca en CSS on ne peut pas encore...

Si tu as un soucis a comprendre le code que j'ai fait hésite pas.

Tien nous au jus
Bonjour !

Merci de nouveau pour ta réponse !

Effectivement, ce que j'ai tenté est du CSS, je disais simplement que je suis vraiment un noob en JS. Je lis (un peu) et je peux le modifier (un peu) pour l'adapter mais ça s'arrête là ; et que donc ce que j'ai tenté s'arrête au morceau de code que j'ai drop.

Quoi qu'il en soit, j'ai jeté un œil rapidement à ce que tu as fait sur jsfiddle, ça m'a l'air pas mal du tout et je devrais pouvoir en faire quelque chose. Je n'ai pas vraiment eu le temps de m'y pencher pour le moment. Je regarde ça vite et je reviens par ici quoi qu'il arrive pour notifier ou non le sujet comme résolu.

Merci encore, vraiment. C'est très sympa.
Modérateur
Ca marche. Pas de soucis. Hésites pas à m'envoyer un MP si tu reviens sur le sujet dans quelques jours parce-que j'ai pas de notif quand tu réponds et je ne vais pas surveiller le sujet pendant des semaines ! Smiley biggrin

(D’ailleurs cette fonctionnalité me changerait la vie !!)

Bon courage !
Sujet clos
Aller à