Question

我想学习如何在复选框的帮助下显示组合图像。可以说我有三个图像，第一个是汽车，第二个是同一汽车，但车轮上有新的车轮，第三个是同一汽车，但带有着色的窗户，第四个是将两种资产组合在一起的汽车。我总是在网站上方显示汽车的原始图像，在网站上显示新的汽车（经过调整的图像），但是如果我单击新车轮框，它将显示第二张图像，或者如果单击有色窗口框，则显示第三张图像。图像是用photoshop准备的，并存储在简单的文件夹中。

<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.
}
?>

到目前为止，我做了一个简单的表格，可以说，如果我检查了Wheels，车轮出现在汽车上，我取消选中它们就消失了。但是，如果我同时选中两个框，该怎么办呢？我想要一个解决方案，如果我有更多不同的复选框，则无需编写很多语句我不是要代码，而只是想知道如何做，因为我的想法是硬编码许多if语句。

编辑：很抱歉，如果这可能是重复的，但我强烈希望使用PHP来实现，因为可以说一个人可能会单击n不同的组合，以表示如果有多个，汽车的外观20个复选框，他想向汽车添加不同的组件。

Answer 1

您说您想使用PHP做到这一点。

正如评论状态和我的重复标记所示，这是不必要的。

您可以查看有关分层图像的GD库，完全跳过CSS，然后直接链接到该图像。

另一种基于PHP的方法是

<!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\">";
}
?>

这将接受您的输入，并使用CSS类将每个选项创建一个<img>元素，并将其放置在基本汽车图像的顶部。

这与使用javascript一样容易

PHP的缺点：

不重新发送页面就无法更新
每次用户更新时发送的整个页面的额外开销
更多的网络流量
您正在将（例如）可能未经过滤的数据发送到服务器。

JavaScript解决方案的优点：

实时更新
较少的网络流量
仅图像请求发送到您的服务器。

需要考虑的其他事项：

任何图像是否具有互斥性（即两种不同类型的轮胎）
选项的顺序相对于图层重要吗？
图像大小相同吗？

Answer 2

尝试此代码：-

<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.'" />';
        };
    }

具有PHP和复选框的图像

2 个答案: