Images next to mouse over links in Categories sidebox

Hi fellow zenners,

I've been struggling on trying to figure out how to get a small image to appear next to a category link in the sidebox when I hover over it.

Here's the link to the main site! https://www.vapur.us

Here's the link to the shopping cart. https://www.vapur.us/shop
(a trend that has unfortunately continued where the site was built first)

Here's where I'm at:
includes/templates/MY_TEMPLATE/sideboxes/tpl_categories.php

(I copied the template_default file to my template).

I uploaded my small image to MY_TEMPLATE/images/water.jpg

...warning - PHP primate trying to do something here...:blink:

I don't know how or where to insert this:

<img src="images/water.jpg">

somewhere in here:

      if ($box_categories_array[$i]['current']) {
        if ($box_categories_array[$i]['has_sub_cat']) {
          $content .= '<span class="category-subs-parent">' . $box_categories_array[$i]['name'] . '</span>';
        } else {
          $content .= '<span class="category-subs-selected">' . $box_categories_array[$i]['name'] . '</span>';
        }
      } else {
        $content .= $box_categories_array[$i]['name'];
      }

      if ($box_categories_array[$i]['has_sub_cat']) {
        $content .= CATEGORIES_SEPARATOR;
      }
      $content .= '</a>';

      if (SHOW_COUNTS == 'true') {
        if ((CATEGORIES_COUNT_ZERO == '1' and $box_categories_array[$i]['count'] == 0) or $box_categories_array[$i]['count'] >= 1) {
          $content .= CATEGORIES_COUNT_PREFIX . $box_categories_array[$i]['count'] . CATEGORIES_COUNT_SUFFIX;
        }
      }

      $content .= '' . "\n";
    }
  }

I don't want to use an image background because it would then be in a generic position. I want the image to be "right next to" the category link no matter the length of the name.

Thank you so much!!!!!

Michelle

We need some more detail. Do you want this image for only one category, or do you want a (different) image for each category? What size are the images (same height as the category name, or taller?) Exactly where do you want the image to appear relative to the category name? You do want the image(s) to appear only on hover, right?

Thanks for the quick reply!

The image is 9x13 px. I would like the same image next to every category/product and I would like it relative to the category/product name.

Here's what I need with an example of what I don't need:

Attachment #6681

It is a white image so it can "always" be there but "appears" when it is moused over.

Thank you so much for the quick response and the help! :smile:

Sorry...image being the water_drop and the background on mouse over!

MC

I had a feeling you meant that it had to move left/right depending on the length of the name. That requires a distinctly more complex solution, though using the same image removes another bit of complexity. You will have to have the text in an inline element, followed by the drop image, wrapped in a block element to get the full-width hover color.

You might try adding a span in every case and inserting the image after that:```php
if ($box_categories_array[$i]['current']) {
if ($box_categories_array[$i]['has_sub_cat']) {
$content .= '<span class="category-subs-parent">' . $box_categories_array[$i]['name'] . '</span>';
} else {
$content .= '<span class="category-subs-selected">' . $box_categories_array[$i]['name'] . '</span>';
}
} else {
$content .= '<span class="category-placeholder">' . $box_categories_array[$i]['name'] . '</span>';//add this span
}

  if ($box_categories_array[$i]['has_sub_cat']) {
    $content .= CATEGORIES_SEPARATOR;
  }
  $content .= '<img src="' . DIR_WS_TEMPLATE_IMAGES . 'water.jpg" /></a>';//add image

  if (SHOW_COUNTS == 'true') {
    if ((CATEGORIES_COUNT_ZERO == '1' and $box_categories_array[$i]['count'] == 0) or $box_categories_array[$i]['count'] >= 1) {
      $content .= CATEGORIES_COUNT_PREFIX . $box_categories_array[$i]['count'] . CATEGORIES_COUNT_SUFFIX;
    }
  }

  $content .= '' . "\n";
}

}

<img src="' . DIR_WS_TEMPLATE_IMAGES . 'water.jpg" />
will point to /includes/templates/your_template/images/water.jpg, which is where images for template use should be.

You also want to use a gif instead of a jpg, both because gif will make a smaller file for simple graphics like this, and gifs can have transparent backgrounds while jpegs cannot.

UMMMMM........................YOU ARE AMAZING!:clap:

It worked!!!!

I just need and itty bitty space between the water drop and the name of the category/product.

dummy alert :blush::

Need to add &nbsp..I thought is might be here..but that gave me a blank site...LOL

if ($box_categories_array[$i]['has_sub_cat']) {
          $content .= '<span class="category-subs-parent">' . $box_categories_array[$i]['name'] . '</span>' .  
        } else {
          $content .= '<span class="category-subs-selected">' . $box_categories_array[$i]['name'] . '</span>' .  
        }
      } else {
          $content .= '<span class="category-placeholder">' . $box_categories_array[$i]['name'] . '</span>'; 
      }

      if ($box_categories_array[$i]['has_sub_cat']) {
        $content .= CATEGORIES_SEPARATOR;
      }
      $content .= '<img src="' . DIR_WS_TEMPLATE_IMAGES . 'img_waterDrop_white_small.png"/></a>';//add image

Thanks again!

Michelle

The simplest place to add a space would be just before the drop image:```php
$content .= ' <img src="' . DIR_WS_TEMPLATE_IMAGES . 'img_waterDrop_white_small.png"/></a>';//add image

When inserting text or HTML output into PHP statements, you need to surround them with quotes so they are understood as literal strings.```php
 . '</span>' . ' ';
```This would have worked. PHP needs the ending ; to tell it the statement is finished.

Looks great, not smushed! Thank you soooooooo much for all your help. I reall learn a lot from you and others on this forum! :smile:

Michelle