Php 存储在数据库中的图像链接

有了我的定制CMS，我正在开发一个菜单结构类型模块，管理员可以在其中为他们的网站创建菜单结构。数据库中是links表，我试图弄清楚如果链接有一个实际的图像，我能做什么。我创建了一个名为link_image的字段，但是我只想到了如果链接是一个精灵的一部分，那么这个精灵在大多数情况下会有图像的3个部分（活动、悬停、正常）或其他任何部分，或者有自己的精灵。如果我想在数据库中存储这些信息，我应该如何处理它。

它几乎不符合SO的格式，但这是一个很酷的问题！我正在构建自己的CMS。就个人而言，我不喜欢图片链接，但我确实有一个解决方案

因此，让我们把我们的概念一块一块地整合起来：

$current_page = (isset($_GET['pageid']) ? $_GET['pageid'] : NULL);

define('MENU_IMAGES_DIR', 'images/main_menu/');

if ($cms_settings['main_menu_type'] == 'image') {
    foreach ($links as $link) {
        echo '<a href="' . $link['href'] . '"><div style="background-image: ' . MENU_IMAGES_DIR . $link['link_image'] . ';" class="main_menu_image' . ($current_page == $link['id'] ? ' menu_current' : '') . '" title="' . $link['title'] . '" /></a><br />';
    }
} else {
    foreach ($links as $link) {
        echo '<a href="' . $link['href'] . '">' . $link['title'] . '</a><br />';
    }
}

.main_menu_image {background-position: top; background-repeat: no-repeat; width: 100px; height: 30px;}
.main_menu_image:hover {background-position: 0px 30px;}
.main_menu_image.menu_current {background-position: bottom;}

这一切都从数据库开始。如你所说，你有一列

链接图片
。这是图像密钥名称或您希望如何称呼它PS我建议在该列中保留文件名+扩展名。因为有些图像可能是JPEG和PNG

现在您需要某种检查点，用于检查是否正在使用图像链接或文本链接。您可以在每个链接上单独执行此操作，但这很可能看起来很难看。。因此，做一些与菜单相关的设置，设置链接类型。。让我们调用该设置：
$cms\u设置['main\u menu\u type']='image'

现在我们将显示链接：

$current_page = (isset($_GET['pageid']) ? $_GET['pageid'] : NULL);

define('MENU_IMAGES_DIR', 'images/main_menu/');

if ($cms_settings['main_menu_type'] == 'image') {
    foreach ($links as $link) {
        echo '<a href="' . $link['href'] . '"><div style="background-image: ' . MENU_IMAGES_DIR . $link['link_image'] . ';" class="main_menu_image' . ($current_page == $link['id'] ? ' menu_current' : '') . '" title="' . $link['title'] . '" /></a><br />';
    }
} else {
    foreach ($links as $link) {
        echo '<a href="' . $link['href'] . '">' . $link['title'] . '</a><br />';
    }
}

.main_menu_image {background-position: top; background-repeat: no-repeat; width: 100px; height: 30px;}
.main_menu_image:hover {background-position: 0px 30px;}
.main_menu_image.menu_current {background-position: bottom;}

此方法要求所有图像大小相同100x90px，准确地说，在这种情况下。。精灵从上到下的顺序是正常|悬停|活动（活动下，我指的是当前页面）

简而言之，这是我的概念。当然，你必须对它进行个性化设置，但这是一个基本概念，从理论上讲，它是可行的。。可能需要稍微调整CSS，当前链接的菜单会有不同的悬停等等。。但这并不难。
在使用图像精灵时，最好将所有图像组合成一幅图像，然后更改每个状态的背景位置以暴露图像的不同部分。这将帮助您更快地加载页面，因为您只需执行一个http请求即可获取所需的所有图像

该网站将自动生成精灵图像和css。我一直在使用它：

如果您只是将三个不同的图像组合成一个，那么数据库中就不需要三个字段。只需一个图像链接字段。
您可以用json格式存储信息。您可以将所有需要的信息存储到一个数组中，并将数组转换为json字符串（使用JSONECODE）。然后将字符串存储到sql中。当您从sql中检索时，您可以获得所需的信息。因此，您认为我应该将每个部分的维度存储为图像表的不同字段。您究竟为什么要将json字符串存储在关系数据库中？这是我不理解的。Np。我喜欢系统结构概念。但是，请记住，还有一个叫做Programmers.stackexchange.com的地方，我通常会在那里发布我的概念性问题：p无论如何，祝CMS好运。另一个很棒的建议。链接也很棒。这就是Facebook所做的。但它并不完美，在某些浏览器上，像笑脸这样的东西会被剪辑/显示另一张图片的一部分。如果你的精灵被剪辑，你就错了。使用本文中的链接。每次都很有效。