0

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.

Tautvis
  • 81
  • 1
  • 2
  • 8
  • If you want to change the image without submiting the form, you will have to probably use JS+html. Php is not very suitable for the job. You can look into [HTML 5 canvas](https://www.w3schools.com/hTml/html5_canvas.asp). maybe it is adaptable to fit your needs. – Eugene Anisiutkin Nov 28 '18 at 11:26
  • This is more a html/javascript/css question than a PHP question. – JoSSte Nov 28 '18 at 11:27
  • Possible duplicate of [How can we overlap two images using css style?](https://stackoverflow.com/questions/1782601/how-can-we-overlap-two-images-using-css-style) – JoSSte Nov 28 '18 at 11:27
  • Edited my question @JoSSte – Tautvis Nov 28 '18 at 11:30
  • 1
    _“but I strongly want to implement this using PHP”_ - that doesn’t change the fact that you will still have to format the output using CSS in some way, to get the images displayed on top of each other; if you just output a bunch of `` tags with PHP, they will be displayed _next_ to each other. – misorude Nov 28 '18 at 11:38
  • 1
    @Tautvis, Consider also this, Php is a server-side language, so any php calculations are made on the server. Now what will happen if say 10000 users push submit button on your form? There will be 10000 POST request with different data, with different processing and different replies and also a ton of GET requests for images themselves. - the server will probably go nuts, because it will be unable to keep up with the load. – Eugene Anisiutkin Nov 28 '18 at 11:50
  • @misorude it can be done without CSS: layering the images in GD – JoSSte Nov 28 '18 at 12:04
  • The argument about n different options is irrelevant. The Clientside javascript sollution, or even an SVG with all the layers, where you just hide them all from the beginning, is quite valid. – JoSSte Nov 28 '18 at 12:05
  • @JoSSte of course it _can_, but whether that makes sense, is a different question. Simply overlaying multiple images on the client would require much less data transfer for example, than creating a new image for each selected combination server-side each time. – misorude Nov 28 '18 at 12:54
  • @misorude if you read my answer, and comments you will see that we agree ;-) – JoSSte Nov 28 '18 at 13:04

2 Answers2

2

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?
JoSSte
  • 2,953
  • 6
  • 34
  • 54
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.'" />';
        };
    }
Parvej Alam
  • 258
  • 2
  • 8
  • Thank You for the advice, I will surely try it out whenever I can, but I am just thinking if the image will contain 5 different checked boxes, will this give me what I want? – Tautvis Nov 28 '18 at 11:31
  • yes as many as checkboxes you want, you can. this will work properly – Parvej Alam Nov 28 '18 at 11:34
  • This solution implies that images for wheels, etc a kept seperatly. But what if a whole rendered image is kept? Then you have to basically reload the whole thing when something is changed. In this instance you also have to keep a ton of pre-made images for every occasion. I will say again - Php is not very suitable for the solution of this problem. – Eugene Anisiutkin Nov 28 '18 at 11:38
  • I am sorry, maybe I was not clear enough. I updated the question again – Tautvis Nov 28 '18 at 12:03