Zone cliquable sur des images avec transparen
Overstyle
-
Shapes -
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
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
A voir également:
- Zone cliquable sur des images avec transparen
- Alternative zone telechargement - Accueil - Outils
- Des images - Guide
- Sommaire cliquable word - Guide
- Zone alarm - Télécharger - Pare-feu
- Frédéric cherche à faire le buzz sur les réseaux sociaux. il a ajouté une image de manchots sur une image de plage. retrouvez l'image originale de la plage. que cachent les manchots ? ✓ - Forum Windows
3 réponses
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.
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.
Salut,
Groarh> est ce que je pourrais avoir la solution en javascript stp ? Dans mon cas, je ne peux pas utiliser du flash.
Merci
Groarh> est ce que je pourrais avoir la solution en javascript stp ? Dans mon cas, je ne peux pas utiliser du flash.
Merci
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. ;)
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. ;)
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.
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.
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
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
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
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
