Personnalisation d'objets côté visiteur
Bonjour à tous et à toutes,
Je ne suis pas vraiment sûr d'être dans la bonne rubrique.....
Je fais de la sérigraphie, j'ai un site de présentation de mes produits, site que j'ai réalisé tout seul, juste pour dire que j'ai quelques notions de programmation, mais mon niveau est loin d'être d'un niveau pro....
Mon projet :
Je souhaite qu'un visiteur puisse personnaliser un objet, un tee-shirt.... en ligne du style spreadshirt ou autre....
L'idée générale est que le visiteur puisse mettre sur un objet du texte avec choix de la police, une image....
Qu'il valide sa création.
Que je récupère dans un bon de commande l'image de sa création avec les variables.
Je voudrai éviter le flash que je ne connais pas et qui ne fonctionne pas partout principalement sur les Smartphones.
J'imagine bien qu'il soit nécessaire d'utiliser le PHP mais je pense qu'il est aussi nécessaire de travailler avec du JS JQuery.... (?)
J'ai un début de code, mais je ne suis pas sûr d'avoir bien démarré, je vous laisse le découvrir...
Code:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
| <!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>Document sans titre</title>
<link rel="stylesheet" href="01.css" title="01" type="text/css">
<link rel="stylesheet" href="02.css" title="02" type="text/css">
<link rel="stylesheet" href="03.css" title="03" type="text/css">
<script language="javascript">
function change_cellule(texte)
{
document.getElementById('zone').innerHTML = texte;
}
</script>
<script language="JavaScript" type="text/javascript" src="police.js">
</script>
<style>
#zone {
position:absolute;
text-align:center;
width:150px;
height:100px;
border:dotted #FF0000 2px;
left: 195px;
top: 161px;
z-index:100;
}
</style>
<script language="javascript">
function ChangeImage(url) {
document.getElementById("img").src = url;
}
</script>
</head>
<body>
<div style=" width:750px; position:relative; float:left">
<div style="position:relative; float:right">
<textarea onkeyup="change_cellule(this.value)"> </textarea><br><br>
<a href="#" onclick="regleStyle('01'); return false">police1</a>
<a href="#" onclick="regleStyle('02'); return false">police2</a>
<a href="#" onclick="regleStyle('03'); return false">police3</a><br><br>
<br>
</div>
<div>
<div style="position:relative; float:left" >
<img src="images/01.jpg" width="540" height="600" id="img">
</div>
<div class="police" id="zone">
</div>
</div>
<div style="clear:both"></div>
<div>
<img src="images/01.jpg" height="110" onClick="ChangeImage(this.src);">
<img src="images/02.jpg" height="110" onClick="ChangeImage(this.src);">
<img src="images/03.jpg" height="110" onClick="ChangeImage(this.src);">
</div>
</body>
</html> |
Ca fonctionne pour le changement de T-shirt, pour la police d'écriture aussi, mais déjà là je coince pour la taille, la couleur de la police et surtout je ne suis pas certain d'avoir la bonne option....
Merci à vous d'avoir lu ce topic et si vous avez la patience de m'accompagner dans le développement de ce projet vous serez les bienvenus
