2011-09-02 41 views
1

我正在开发自定义CMS我有一个菜单结构类型模块,管理员可以在其中为其网站创建菜单结构。在数据库里面是链接表,我想弄清楚如果链接有一个实际的图像我可以做什么。我创建了一个名为link_image的字段,但我只是想到如果链接与大多数情况下图像的三个部分(活动,悬停,普通)或任何其他内容或具有自己的精灵的部分分开。我应该如何处理这个,如果我想将这些信息存储在数据库中。存储在数据库中的图像链接

+2

你可能会以json格式存储信息 – benck

+0

你究竟是什么意思? –

+2

您可以将所有需要的信息存储到数组中并将数组转换为json字符串(使用jsonencode)。然后将字符串存储到sql中。当你从sql中检索时,你可以获得尽可能多的信息。 – benck

回答

1

它几乎不符合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;} 

此方法需要,所有的图像都是相同的S ize .. 100x90px确切地说是,在这种情况下..而且从上到下的精灵顺序是NORMAL | HOVER | ACTIVE(under active,我的意思是当前页面)

这是我的概念。当然,你必须个性化它,但它的基本概念和理论上它的工作原理可能需要稍微调整CSS,那menu_current链接会有不同的悬停或这样的..但这并不难。

+0

这是一些很好的信息。谢谢你,卡勒。 –

+0

Np。我喜欢系统结构概念。但是,请记住,这里也有一个名为Programmers.stackexchange.com的地方,我通常会在这里发表我的概念性问题:无论如何,祝您CMS运气好。 –

2

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

本网站会自动生成精灵图片和css。我一直都在使用它: http://spritegen.website-performance.org/

如果你只是将你的三个不同的图像组合成一个,那么你不需要在你的数据库中有三个字段。只需一个image_link字段。

+0

另一个伟大的建议。太棒了。 –

+0

这就是Facebook所做的。虽然这并不完美,并且在某些浏览器上,像表情符号等剪辑/显示另一张图片的部分内容。 –

+0

如果你的精灵被剪断,你做错了。使用这篇文章中的链接。每次工作。 – Adam

相关问题