Image links stored in database

With my custom CMS I'm developing I have a menu structures type module where the admin can create a menu structures for their website. Inside the db is the links table and I'm trying to figure out what I can do if the link has an actual image. I create开发者_如何学God a field called link_image however I just thought of what if the link is apart of a sprite which would have most of the time 3 parts of the image (active, hover, normal) or whatever or has its own sprite. How should I handle this if I want to store this information in the database.

When using image sprites, it's best practice to combine all of your images into one image, and then change the background-position for each state to expose different parts of the image. This will help your page load faster because you only have to do one http request to fetch all of the images you need.

This website will automatically generate sprite images and css. I use it all the time: http://spritegen.website-performance.org/

If you just combine your three different images into one, then you don't need three fields in your database. Just one image_link field.

It barely fits SO's format, but a cool question! I'm building my own CMS as we speak. Personally I don't like image-links, but I do have a solution to offer.

So lets get our concept together piece by piece:

It all starts from the DB. Where you have column link_image as you said. That's the images-key-name or however you wish to call it.. PS! I would recommend to hold the file name + extension in that column. Because some images may be JPEG and some PNG.

Now you need some sort of a checkpoint, that checks whether the image-links or text-links are being used. You could do this individually on each link, but that most likely will look ugly.. So make some menu related setting, that sets the links type.. Lets call that setting: $cms_settings['main_menu_type'] = 'image';

Now we are going to display the links:

$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 />';
    }
}

And the CSS makes difference:

.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;}

This method requires that, all the images are the same size.. 100x90px to be exact, in this case.. And sprite order from top to bottom is NORMAL | HOVER | ACTIVE (under active, I mean the current page)

This is my concept in a nutshell. You have to personalize it of course, but its the basic concept and in theory it works.. Probably need to tweak the CSS a little, that menu_current link would have different hover or such.. but that's not hard.