Zone cliquable sur des images avec transparen

Overstyle -  
 Shapes -
Bonjour à tous,

J'aimerais savoir s'il est possible, et si oui comment faire pour que la zone cliquable d'une image ne prenne pas en compte la transparence de cette dernière?

Ce sont des images en png-8, ce n'est pas un problème d'affichage car la dessus la transparence est bien prise en compte.

PS: je dois à tout prix éviter les area shape car ces zones cliquables changeront de couleur Roll Over (javascript)

J'espère que quelqu'un à saisi ce que je veux dire

merci d'avance
Configuration: Windows Vista
Firefox 2.0.0.16

3 réponses

  1. Groarh Messages postés 706 Statut Membre 185
     
    En html et xhtml, une image est rectangulaire, et le seul moyen de changer cette forme est d'utiliser les areas.
    Dans ton cas, tu dois en conclure que l'objet image ne te sauvera pas. => Il faut utiliser un objet flash !

    Reprends tes PNG et intègre-les dans flash en suivant la procédure habituelle pour faire des boutons. Pour l'état "over", tu mets une autre image qui aura la même forme mais pas la même couleur, en la calant bien par-dessus la première.
    Simple ! Et même pas besoin de javascript.
    1
  2. MaitreDragon
     
    Salut,

    Groarh> est ce que je pourrais avoir la solution en javascript stp ? Dans mon cas, je ne peux pas utiliser du flash.

    Merci
    0
  3. Groarh Messages postés 706 Statut Membre 185
     
    Hello,

    il y a moyen de faire ça en JavaScript, mais la méthode est peu élégante. L'idée est de relever les coordonnées de la souris à chaque clic sur l'image, et de ne rien faire si ça correspond à une zone transparente. Ca risque de rendre le code très lourd, surtout si l'image est complexe ...

    Si tu es sûr de vouloir faire ça, montre-moi ton image et j'essayerai de te faire un script le plus compact possible. (L'idéal serait de pouvoir décrire les contours des zones transparentes avec des fonctions mathématiques assez simples. En gros on refait "à la main" les routines de traitement du flash ... sauf que comme c'est interprété à la volée, ce sera beaucoup plus lent ...)

    J'attends ta réponse. ;)
    0
    1. MaitreDragon
       
      Ah d'accord :s

      Je ne vais pas t'embeter a faire ce que tu a proposé comme solution, car elle n'ira pas non plus ^^'

      Le truc, c'est qu'il y a plusieurs images superposées et que si c'est une zone transparente pour l'une des images, ca ne sera pas une zone transparente pour une autre image se trouvant en dessous.
      0
      1. Shapes > MaitreDragon
         
        Salut MaitreDragon,
        J'ai exactement le même besoin que toi.
        As-tu trouvé la solution ? Si oui, comment ?
        Dans l'espoir d'une réponse,
        Cordialement
        Shapes
        0
      2. Shapes > MaitreDragon
         
        Re-salut,

        J'ai trouvé une manière de le faire...

        https://cyberzoide.developpez.com/html/map.php3

        Ca fonctionne, par contre, je n'arrive pas à faire d'effet mouseover (changement de l'image au passage souris) avec cette technique...

        Cordialement,
        Shapes
        0
      3. Shapes > MaitreDragon
         
        Re-salut,
        J'ai trouvé une solution ici :
        https://cyberzoide.developpez.com/html/map.php3
        Par contre, je n'arrive pas à faire d'effet mouseover (changement de l'image au passage de la souris) avec cette technique... Si quelqu'un a une idée ?
        Cordialement,
        Shapes
        0