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

Question

与我的自定义CMS，我正在开发，我有一个菜单结构类型模块，其中管理员可以为他们的网站创建菜单结构。在db中是链接表，我想知道如果链接有一个实际的图像，我能做什么。我创建了一个名为link_image的字段，但我只是在想，如果链接是精灵的一部分，而精灵大部分时间都有图像的3个部分(活动、悬停、正常)，或者其他任何东西，或者有自己的精灵。如果我想在数据库中存储此信息，我应该如何处理此问题。

Answer 1

它几乎不符合SO的格式，但这是一个很酷的问题！正如我们所说的那样，我正在构建自己的CMS。就我个人而言，我不喜欢图片链接，但我有一个解决方案可以提供。

因此，让我们将我们的概念一块一块地组合在一起：

这一切都从数据库开始。就像你说的那样，你有列link_image。这就是images key-name，或者您希望调用它的任何名称。PS!我建议在该列中保留文件名+扩展名。因为一些图像可能是JPEG和一些PNG。

现在，您需要某种检查点，用于检查是否正在使用图像链接或文本链接。您可以在每个链接上单独执行此操作，但这很可能看起来很丑陋。因此，进行一些与菜单相关的设置，设置链接类型。让我们将该设置命名为：$cms_settings['main_menu_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 />';
    }
}

而CSS则有所不同：

.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，确切地说是，在本例中。而精灵从上到下的顺序是NORMAL | HOVER | ACTIVE (在active下，我指的是当前页面)

简而言之，这是我的概念。当然，您必须对其进行个性化设置，但这是基本概念，并且在理论上是可行的。可能需要稍微调整一下CSS，这个menu_current链接会有不同的悬停或者类似的东西。但这并不难。

Answer 2

在使用图像精灵时，最佳实践是将所有图像合并为一个图像，然后更改每个状态的背景位置以显示图像的不同部分。这将帮助您的页面更快地加载，因为您只需执行一次http请求即可获取所需的所有图像。

这个网站将自动生成雪碧图和css。我一直在使用它：http://spritegen.website-performance.org/

如果您只是将三个不同的图像合并为一个，那么您的数据库中就不需要三个字段。只有一个image_link字段。