Photoshop Question posted in
The official user guide can be found here.

Images with PHP and checkboxes – Photoshop

I want to learn how to display combined images with help of checkboxes. Lets say I have three images, the first one is a car, second one is the same car with new wheels on the car, third is is the same car but with tinted windows, fourth one is the car with both assets combined. I always display the original image of the car on the website higher and new one(tuned one) lower, but lets say if I click the box for new wheels it shows the second image or if I click tinted windows box, third image appears. The images are prepared with photoshop and stored in folder, simple stuff.

<form action="#" method="post">
<input type="checkbox" name="option" value="Wheels">Wheels</input>
<input type="checkbox" name="option" value="Tint">Windows</input>
<input type="submit" name="submit" value="Submit"/>
</form>
<?php
if (isset($_POST['option'])){
 // Display.
}
?>

I made a simple form so far and lets say as I said if I check Wheels, the wheels appear on the car, I uncheck it they disappear. But how could I do that if I check both boxes, the fourth image appear? I would like a solution that if I had more different check boxes, I would not need to code a lot of statements
I am not asking for a code, but just ideas how to do it, because my idea is to hard code many if statements.

EDIT: I am sorry if this is maybe a duplicate, but I strongly want to implement this using PHP, because lets say a person might click n different combinations of how the car should look if there are more than 20 checkboxes and he wants to add different components to the car.

Tags:

2

Answers


  1. 0

    try this code:- 

    <form action="#" method="post">
    <input type="checkbox" name="option[]" value="Wheels">Wheels</input>
    <input type="checkbox" name="option[]" value="Tint">Windows</input>
    <input type="submit" name="submit" value="Submit"/>
</form>

    <?php
    if (isset($_POST['submit'])){
        foreach ($_POST['option'] as $item) {
            echo '<img src="assets/images/'.$item.'.png" alt="'.$item.'" />';
        };
    }
    Login or Signup to reply.
  2. 0

    You say that you want to do this using PHP.

    As the comments state, and my duplicate flag indicates, this is not necessary.

    You can look at the GD library about layering images, skip CSS completely, and just link to that image.

    Another PHP based approach is this:

    <!Doctype>
<html>
<head>
    <style>
    .base-car
    {
        position: relative;
        top: 0;
        left: 0;
    }
    .additions
    {
        position: absolute;
        top: 0;
        left: 0;
    }
    </style>
</head>
<body>
<form action="#" method="post">
    <input type="checkbox" name="option[]" value="Wheels">Wheels</input>
    <input type="checkbox" name="option[]" value="Tint">Windows</input>
    <input type="submit" name="submit" value="Submit"/>
</form>
<img src="car.jpg" class="base-car">
<?php
$option = filter_input_array (INPUT_POST,$filter_args); //see: http://php.net/manual/en/function.filter-input-array.php
foreach($option){
  echo "<img src="$option.png" class="additions">";
}
?>

    This takes your input, and create an <img> element for each option, with the CSS class that places it on top of the base car image.

    This is just as easy to do in javascript

    Disadvantage of PHP:

    • Cannot update without resending page
    • Extra overhead in whole page being sent every time the user updates
    • More network traffic
    • You are sending (in your example) potentially unfiltered data to your server.

    Advantages of Javascript solution:

    • Real-time updates
    • Less network traffic
    • Only the image requests are sent to your server.

    Other things to take in to account:

    • Do any of the images have mutual exclusivity (ie two different types of tyres)
    • Does the order of the options matter in relation to the layers?
    • Are the images the same size?
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search