PHP + CSS > 使用下拉列表从管理控制面板更改图像样式

Question

我的网站主页上显示了一张图片，我需要在其中的一部分上放置另一张较小的图片(实际上是折扣贴纸 like this )。

这很容易用 CSS 实现，但这里的问题是:我想在管理控制面板上实现一个下拉列表，以在不同的图像(女巫会有不同的颜色)之间进行选择，或者根本没有图像。这是一个简单的 PHP 网站，而不是 Wordpress。

在 Google 上寻找它，我遇到了 this question关于使用下拉列表更改页面主题。我认为原理是一样的，但我找不到适合我的解决方案。

我只是在寻找能为我指明正确方向的人，因为当我尝试在 Google 中搜索它时，我总是会看到类似“如何为下拉列表/选择设置 CSS 样式？”之类的页面...我感谢任何愿意提供帮助的人。

Answer 1

例子(主要是逻辑)

1 - 您可以将图像名称存储在单独的数据库表中

表:discount_stickers

+----------+---------------------+
| image_id | image_file          |
+----------+---------------------+
|        1 | sticker_red.jpg     |
|        2 | sticker_blue.jpg    |
|        3 | sticker_orange.jpg  |
|        4 | sticker_maroon.jpg  |
|        5 | sticker_brown.jpg   |
|        6 | sticker_green.jpg   |
|        7 | sticker_rainbow.jpg |
+----------+---------------------+

2 - 在您保存网络应用程序设置的表格中添加新行

表:app_settings

+------------+---------------------+
| setting    | value               |
+------------+---------------------+
...
| STICKER_ID | 0                   |
+------------+---------------------+

值 0 表示没有贴纸，值大于零表示从表 discount_stickers(列:image_id)中选择的图像的ID。

app_settings 表中的这一行保留您的选择。

3 - 生成 discount_stickers 表元素的下拉框。

$dropdown_code = '<select name="discount_image_picker"><option value="0">No sticker image</option>';

$sql = "SELECT * FROM discount_stickers";
$res = mysql_query($sql);
while ($row = mysql_fetch_array($res)) {
  $dropdown_code .= '<option value="' . $row['image_id'] . '">' . $row['image_file'] . '</option>';
  }
$dropdown_code .= '</select>';

然后在管理面板(表单)中您想要的地方回显您的 $dropdown_code。

你会有这样的东西(根据我的例子)

4 - 现在编写提交脚本以将 SELECT 值存储到您的数据库(表 app_settings，setting=STICKER_ID 所在的行)。您可以使用 AJAX 进行更新或使用常规表单提交来发送请求。

5 - 您现在需要做的就是在您要将贴纸附加到图像时从数据库中获取此值。使用此值从 discount_stickers 表中获取文件名，并使用该文件名创建带有或不带有贴纸的 HTML block (从 PHP 代码设置样式属性)。

6 - 在您的页面上显示新图像(将 HTML 代码放在您想要的位置)。

此外，您可以在一张图像中使用所有贴纸并将坐标存储在数据库中。稍后通过设置适当的 CSS 样式参数显示该图像的适当部分。

当然，也...您可以使用 GD 库或 ImageMagick 生成带(或不带)贴纸的输出图像。那么您就不需要 HTML 代码(DIV、CSS 等)。