i currently doing a online tshirt design website where user customise their own shirt by adding text on the shirt.
So, how the text will be placed on top of shirt when user input their text?
i'hv told that to use php generated image to make a text image.....but after generated the text image..it cant placed on top of the shirt..anyone solutions for dat?
thanks in advance
online tshirt design
Moderators: onion2k, General Moderators
- feyd
- Neighborhood Spidermoddy
- Posts: 31559
- Joined: Mon Mar 29, 2004 3:24 pm
- Location: Bothell, Washington, USA
Here's an idea: using a div, two <img> tags, and some CSS you could MacGyver their image underneath a partially transparent overlay of the t-shirt acting as a mask. Their image can then be moved around, resized all from the comfort of their browser using Javascript. No server interaction necessary until a submission is made. They wouldn't even have to upload the image until that submission if you did it a certain way.
Unless I am missing something (probably!) the sandbox doesn't allow that behaviour in Firefox and Netscape. It does seem to work in Internet Explorer though as discovered in the following test.feyd wrote:They wouldn't even have to upload the image until that submission.
Code: Select all
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html lang="en">
<head>
<meta http-equiv="content-type" content="text/html; charset=iso-8859-1">
<script type="text/javascript">
function load_image(input)
{
tee_shirt_img = document.getElementById('tee_shirt_img')
tee_shirt_img.src = 'file:///' + input.value
tee_shirt_img.style.display = ''
}
</script>
<title></title>
</head>
<body>
<form action="" enctype="multipart/form-data" method="post">
<p><input type="file" name="file" onchange="load_image(this)"></p>
<p><img id="tee_shirt_img" style="display:none"></p>
</form>
</body>
</html>