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

如何解决PHP + CSS>使用下拉列表从管理控制台更改图像样式

|| 我的网站首页上显示了一个图像，并且需要在其一部分上放置另一个较小的图像（像这样的折扣标签）。 这很容易用CSS来实现，但是这里要注意的是：我想在管理控制面板上实现一个下拉列表，以在不同图像之间选择（女巫将具有不同的collors）或根本没有图像。这是一个简单的PHP网站，而不是Wordpress。 在Google上寻找它时，我遇到了一个有关使用下拉列表更改页面主题的问题。我认为原理是完全相同的，但是我无法找到适合我的解决方案。 我只是在寻找可以为我指出正确方向的人，因为当我尝试搜索Google时，总是会看到诸如“如何为CSS设置下拉列表/选择样式？”之类的页面...我感谢任何愿意提供帮助的人。     

解决方法

示例（主要是逻辑） 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-在您保留Web应用程序设置的表中，添加新行 表格：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-现在编写提交脚本以将SELECTs值存储到数据库中（表app_settings，行在

setting=STICKER_ID

）。您可以使用AJAX进行更新，也可以使用常规表单提交来发送请求。 5-现在，您只需要在要将贴纸粘贴到图像时从数据库获取此值即可。使用此值从discount_stickers表中获取文件名，并使用该文件名创建带或不带标签的HTML块（从PHP代码设置style属性）。 6-在页面上显示新图像（将HTML代码放入所需的位置）。 另外，您可以在一张图像中使用所有贴纸并将坐标存储在数据库中。稍后通过设置适当的CSS样式参数来显示该图像的适当部分。 当然，您也可以使用GD库或ImageMagick生成带（或不带）标签的输出图像。然后，您不需要HTML代码（DIV，CSS等）。     ,您可以像这样将更改处理程序挂在下拉列表上：

<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。