Image interactive et personnalisation.
Profil bloqué
-
Santa -
Santa -
Bonjour,
Je souhaiterais mettre en place un aperçu interactif sur un site de vente de produits en tissu avec des flocages personnalisés.
Je m'explique, je souhaiterais qu'en quelques clics, le client personnalise la couleur du tissu, le flocage (texte ou image) sur le tissu et sa position et qu'il ait un aperçu en en temps réel avant de valider le panier.
L'idée était de mettre une image en fond pour l'élément en tissu (préparé sur photoshop) et d'y ajouter par dessus des SVG pour la personnalisation (seulement en svg car je travaille seulement sous ce format pour les flocages).
j'espère que j'étais assez clair, je sais pas trop vers ou chercher, ccs, html ou JS ?
Merci d'avance.
Je souhaiterais mettre en place un aperçu interactif sur un site de vente de produits en tissu avec des flocages personnalisés.
Je m'explique, je souhaiterais qu'en quelques clics, le client personnalise la couleur du tissu, le flocage (texte ou image) sur le tissu et sa position et qu'il ait un aperçu en en temps réel avant de valider le panier.
L'idée était de mettre une image en fond pour l'élément en tissu (préparé sur photoshop) et d'y ajouter par dessus des SVG pour la personnalisation (seulement en svg car je travaille seulement sous ce format pour les flocages).
j'espère que j'étais assez clair, je sais pas trop vers ou chercher, ccs, html ou JS ?
Merci d'avance.
Configuration: Windows / Chrome 96.0.4664.110
A voir également:
- Image interactive et personnalisation.
- Image iso - Guide
- Acronis true image - Télécharger - Sauvegarde
- Reduire taille image - Guide
- Légender une image - Guide
- Image gratuite - Guide
1 réponse
Salut,
les trois peuvent être utilisés et vont être nécessaire je pense.
Mais surtout il faut que vous pensiez à votre base de données et plus largement votre système d'information.
https://www.commentcamarche.net/contents/1083-systeme-d-information
Quel partie exactement vous pose problème, qu'avez vous fait et comment faites vous votre site?
Pour des SVG dans du HTML:
https://www.w3schools.com/html/html5_svg.asp
Pour créer des SVG avec JavaScript vous pouvez utiliser la méthode suivante:
https://developer.mozilla.org/fr/docs/Web/API/Document/createElementNS
un autre exemple plus avancé :
https://stackoverflow.com/questions/3492322/javascript-createelementns-and-svg
Et un cours complet sur le sujet:
https://infoforall.fr/js/javascript-act120.html
Notez que l'on peut utiliser style pour certaines propriétés (du SVG) donc on peut faire ce qu'on veut, comme changer la couleur d'une zone du SVG tant que celle ci est repérée ou simplement ajouter un 'calque' dans le SVG qui contient la couleur de base, un pour le motif, etc...
Les données sont les critères que vous avez trié/décidé et qui seront utile à votre programme/site.
Mieux avec une base de données donc, ne serait ce que pour les facturations et les commandes.
les trois peuvent être utilisés et vont être nécessaire je pense.
Mais surtout il faut que vous pensiez à votre base de données et plus largement votre système d'information.
https://www.commentcamarche.net/contents/1083-systeme-d-information
Quel partie exactement vous pose problème, qu'avez vous fait et comment faites vous votre site?
Pour des SVG dans du HTML:
https://www.w3schools.com/html/html5_svg.asp
Pour créer des SVG avec JavaScript vous pouvez utiliser la méthode suivante:
https://developer.mozilla.org/fr/docs/Web/API/Document/createElementNS
un autre exemple plus avancé :
https://stackoverflow.com/questions/3492322/javascript-createelementns-and-svg
Et un cours complet sur le sujet:
https://infoforall.fr/js/javascript-act120.html
Notez que l'on peut utiliser style pour certaines propriétés (du SVG) donc on peut faire ce qu'on veut, comme changer la couleur d'une zone du SVG tant que celle ci est repérée ou simplement ajouter un 'calque' dans le SVG qui contient la couleur de base, un pour le motif, etc...
Les données sont les critères que vous avez trié/décidé et qui seront utile à votre programme/site.
Mieux avec une base de données donc, ne serait ce que pour les facturations et les commandes.