Изображения с PHP и флажки - PullRequest
Новая
       1

Изображения с PHP и флажки

0 голосов
/ 28 ноября 2018

Я хочу научиться отображать комбинированные изображения с помощью флажков.Допустим, у меня есть три изображения, первое - автомобиль, второе - та же машина с новыми колесами на автомобиле, третье - та же машина, но с тонированными стеклами, четвертое - машина с обоими активами.Я всегда отображаю исходное изображение автомобиля на сайте выше, а новое (настроенное) ниже, но, скажем, если я нажимаю на поле для новых колес, оно показывает второе изображение или, если я нажимаю на окно с тонированными стеклами, появляется третье изображение.Изображения готовятся в фотошопе и хранятся в папке, простые вещи. 

<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 флажков и он хочет добавить различные компоненты к машине.

Ответы [ 2 ]

0 голосов
/ 28 ноября 2018

Вы говорите, что хотите сделать это с помощью 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\">";
}
?>

Он принимает ваш ввод и создает элемент <img> для каждой опции, с классом CSS, который помещает его поверх основы.изображение автомобиля.

Это так же просто сделать в javascript

Недостаток PHP:

  • Невозможно обновить без повторной отправкиpage
  • Дополнительные издержки на всю страницу, отправляемую каждый раз, когда пользователь обновляет
  • Больше сетевого трафика
  • Вы отправляете (в вашем примере) потенциально нефильтрованные данные на ваш сервер.

Преимущества решения Javascript:

  • Обновления в режиме реального времени
  • Меньше сетевого трафика
  • Только изображениезапросы отправляются на ваш сервер.

Другие вещи, которые необходимо учитывать:

  • Имеют ли какие-либо изображения взаимную исключительность (т.е. дваразличные типы шин)
  • Имеет ли значение порядок параметров по отношению к слоям?
  • Изображения одинакового размера?
0 голосов
/ 28 ноября 2018

попробуйте этот код: - 

<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.'" />';
        };
    }
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...