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

Question

我的网站主页上显示了一个图像，我需要在其一部分上放置另一个较小的图像（实际上是折扣贴纸 像这样）。

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

在 Google 上寻找它时，我遇到了这个问题 关于使用下拉列表更改页面主题。我认为原理是完全相同的，但我无法找出适合我的解决方案。

我只是在寻找能为我指明正确方向的人，因为当我尝试在 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 中选定图像的 ID （柱子： image_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 块（通过 PHP 代码设置样式属性）。

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

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

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

Answer 2

您可以将更改处理程序挂接到下拉列表上，如下所示：

<select name="image_chooser" id="image_chooser">
    <option value="image1.gif" selected>Image 1</option>
    <option value="image2.gif">Image 2</option>
</select>

<img src="image1" alt="Image" id="image_to_switch">

<script type="text/javascript" charset="utf-8">

    $("#image_chooser").change(function() {

        $("#image_to_switch").attr("src", $(this).val());

    });

</script>

此代码假设您正在使用 jQuery。