Forum : Remplacer un path par une image

Bonjour,

Voila je rencontre un petit problème avec mon code, voila ou j'en suis, la map du haut est un SVG: https://jsbin.com/runihig/edit?html,css,output

Ce que j'aimerai savoir c'est, comment faire pour que quand je passe ma souris sur une région colorée de la map du haut celle-ci se change en image de la région en question.
https://jsbin.com/runihig/edit?html,css,output
(Vous pouvez tester avec l'image du bas)

En clair, est-il possible de changer la zone colorée en la survolant par une image faisait exactement les memes dimensions ?

Voila dans l'idée

3 réponses

Soundboy39,

il y a 7 ans

Bonjour,

Mon idée (non testée) :

pour chaque lien, mettre en inner le path + l'image de la région au format png détouré (apparement on peut bien mettre des images dans du SVG : https://developer.mozilla.org/fr/docs/Web/SVG/Tutoriel/SVG_Image_Tag).
utiliser du CSS pour cacher les images dans les liens au repos et les afficher au survol des liens;

Je te laisse tester et nous retenir au courant.

lemoyy,

il y a 7 ans

Déjà merci de ta réponse, mais:

Qu'est ce qu'un inner ?
Je ne vois pas ce que tu veux dire par la :/

Soundboy39,

il y a 7 ans

Inner : c'est le contenu Html d'un tag, en l'occurence dans ton cas il faut mettre une balise <path> et une balise <image> à l'intérieur de chaque tag <a>