Home/ Questions/Q 6542373
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-05-25T11:13:09+00:00

With my custom CMS I’m developing I have a menu structures type module where

  • 0

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 created 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.

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    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.

    • 0