Page 1 of 1

Need some help with pictures and php

Posted: Thu Nov 05, 2009 4:18 am
by jefffan24
I've never had a need to use pictures and php together, but what I am doing is making a website where a user can select a color and decal and then hit submit, then a picture of their shirt color with the decal on top of it (so they can see what it looks like sort of). I have no clue where to start when trying to display pictures with php. So any help here would be nice right now all I have is a form:

Code: Select all

 <center><form name="blah" id="blah" method="post"><select name="sizes" tabindex="1"><option value="small" id="small">Small</option><option value="blueshirt.png" id="medium">Medium</option><option value="large" id="large">Large</option><option value="xlarge" id="xlarge">X-Large</option><option value="xxlarge" id="xxlarge">XX-Large</option></select>&nbsp;&nbsp;<select name="colors" tabindex="2"><option value="orange" id="orange">Orange</option><option value="blue" id="blue">Blue</option><option value="lightblue" id="lightblue">Light Blue</option><option value="green" id="green">Green</option><option value="lightgreen" id="lightgreen">Light Green</option></select>&nbsp;&nbsp;<select name="decal" tabindex="3"><option value="redBox" id="redBox">Red Box</option><option value="blueBox" id="blueBox">Blue Box</option></select><br /><br /><input type="submit" value="submit" /></form> 
I dont' have any php currently as I don't know where to start, so thanks!

Re: Need some help with pictures and php

Posted: Thu Nov 05, 2009 5:14 am
by eastsideyahh
Hello,

you should use 1 div, and set the shirt image as a background. Next, you should put a picture of a decal inside that div, and set margins to put it where you need it.

Do you want to show only a few specific shirt colors, or to show any color ?

For a few shirt colors, you could create pictures first, make them all same size and give them names like 'blue.jpg' 'orange.jpg', then put them in the same folder, like 'shirts'.
Next, you should put a picture of decal inside that div. Decals should also be in the same folder, for example 'decals'.

Code: Select all

 
<?php
$color = $_POST['colors'];
$decal = $_POST['decal'];
print "
<div class=\"shirt\" style=\"background-image:url(shirts/$color.jpg)\"><br />\n
<img class=\"decal\" src=\"decals/$decal.jpg\" />\n
</div>
";
 
Next, you create a css style and set the size of div and position of img.

Also, your form will need some changes. If you don't want to use only one type of pictures, you should put the name of it with an extension in the form:

Code: Select all

 
<option value="redBox.jpg" id="redBox">Red Box</option>
<option value="blueBox.png" id="blueBox">Blue Box</option>
 
and then your php would be

Code: Select all

 
...
<img class=\"decal\" src=\"decals/$decal\" />\n
...
 
If you are using mysql database, you could add more options.

Re: Need some help with pictures and php

Posted: Thu Nov 05, 2009 5:20 am
by jefffan24
What I wanted was like a blank area, the person would select their options from the drop down boxes, then hit a button to render their shirt.

Depending on what they picked it would show that shirt color, and that decal.

My shirt colors are going to be:

Orange, blue, light blue, green, and light green. I have pictures already just need to get them to display.

Also I can make a database no problem, but what more options would it open up?