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

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

没有找到相关结果

    已邀请:

    肉脓措伪

    示例（主要是逻辑） 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等）。     
    2020-05-20 0 0
    分享

    程琶

    您可以像这样将更改处理程序挂在下拉列表上： 
    <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。     
    2020-05-20 0 0
    分享
    为什么被折叠? 0 个回复被折叠

    要回复问题请先登录或注册

    或代码 OrCode.com 备案号：粤ICP备15020848号-1
    Escape time: 0.039585828781128