Question

使用我的自定义CMS我正在开发我有一个菜单结构类型模块，管理员可以为其网站创建菜单结构。数据库内部是链接表，我试图找出如果链接有实际图像我可以做什么。我创建了一个名为link_image的字段但是我只想到了如果链接是精灵的一部分，它会占用大部分时间图像的3个部分（活动，悬停，正常）或其他任何或拥有自己的精灵。如果我想将这些信息存储在数据库中，我该如何处理呢。

Answer 1

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

该网站将自动生成精灵图像和CSS。我用它所有的时间： http://spritegen.website-performance.org/

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

Answer 2

它几乎不符合SO的格式，但这是一个很酷的问题！我们说话的时候我正在建立自己的CMS。我个人不喜欢图像链接，但我确实有一个解决方案。

让我们将我们的概念放在一起一块一块地

一切都从数据库开始。如你所说，你有link_image列。这是图像键名，或者你想要称之为.. 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 |活动（在活动状态下，我的意思是当前页面）

简而言之，这是我的概念。你必须个性化它，当然，它的基本概念，理论上它的工作原理。可能需要调整一点CSS，menu_current链接将有不同的悬停或类似..但这并不难。

图像链接存储在数据库中

2 个答案: