Opacité avec un .SVG au passage de la souris.

Bonsoir,

Je cherche à réaliser une page d'accueil pour un site web, où j'aimerais bien que l'idée que j'ai en tête se concrétise, mais j'avoue avoir un peu de mal à assembler ma vision de la chose, avec le coté programmation; je m'en remet donc à vous.

J'ai réalisé, tout d'abord, un dessin vectoriel représentant un camembert coupé en 6 part égales, de la forme:

https://imageshack.com/

Maintenant, j'y inclus diverses images à l'intérieur, de la sorte:

https://imageshack.com/

Maintenant, que j'ai un peu imagé le problème, je vais vous expliquer ce que j'aimerais obtenir en résultat:
Le 'camembert' (on va l'appeler comme ça :icon_biggrin:), devrait être remplie (contrairement à l'exemple ci-dessus), de 6 images bien distinct.
Chacune de ces images, devrait au survol de la souris, voir son opacité réduite de 40%.

Ma question est: Comment pourrais-je faire cela? Sans compter que par la suite, j'aimerais qu'au 'clique' sur l'une de ces images, à l'aide d'une fonction JavaScript un texte s'afficherait (ailleurs que sur le camembert, donc là n'est pas mon soucis).

Puis-je me servir du .SVG pour réaliser cette requête?

Je me vois un schéma bien trop complexe dans ma tête, ou je devrais découper chaque parcelle du camembert (donc avoir 6 images bien distinctes en .GIF ou .PNG), leurs donner un attribut de style pour l'opacité (et bien les positionner à l'aide de la feuille de style et des attributs z-index), et faire un jolie mapping tout moche pour définir les zones de travail (via un map area en html).
Je suis sûr qu'il y a beaucoup plus simple... En cherchant un peu sur le net, j'ai cru voir que l'on pouvait se servir du dessin vectoriel de bien des façons, alors peut-être pourrais-je m'en servir?!

Je m'en remet à vous.
Merci d'avance de vos réponses, et bonne soirée.
Jo.