Adding or Changing the Background Color on Mouse Over

In some cases it can be nice to display a different background when customers mouse over a product/category/etc. in your storefront. This is quite easy to do even if you are not a programmer at all. It's the beauty of using ProductCart, where you have access to the software source code and can modify it as you wish (make sure to read our guidelines on making modifications to the source code).

Here is a visual example of what we are talking about. You can see it yourself by visiting the home page of one of our demo stores.

To the benefit of all of us that are not trained programmers (but want to fake it at times), this is quite easy to do. Continuing on the example above, we simply edited one line of code in the file homeCode.asp, which handles most of the “logic” for what is displayed on the home page (home.asp).

• Download the file homeCode.asp from the pc folder using your favorite FTP program
• Make a back-up copy of the original file
• Open it with your favorite HTML editor
• Locate the following section of the source code:

  <td> 
   <!--#include file="pcShowProductH.asp" -->
  </td>

• Replace the beginning ”<td>” tag (a table cell) with the following:

  <td onmouseover="style.backgroundColor='#F7F7F7'" onmouseout="style.backgroundColor=''">

  …where “#F7F7F7” is the background color that you want to show when you mouse over the table cell (light gray in this case).

• So the code for that entire section becomes:

  <td onmouseover="style.backgroundColor='#F7F7F7'" onmouseout="style.backgroundColor=''">
   <!--#include file="pcShowProductH.asp" -->
  </td>

• You're done already! Save the edited file and uploaded it back to your store.

You can do the same with many other pages in your storefront. For example, do a search in your storefront for the string “pcShowProductH.asp” (products shown horizontally, with thumbnails) and “pcShowCategoryH.asp” (categories shown horizontally, with thumbnails) and you will find several files where you can apply this or similar effects (the Find & Replace tool in Adobe Dreamweaver® works quite well for source code searches - there are many other such tools).

Those of you that don't like any in-line styling (and you're right!) can use a slightly different version of this code and handle the style separately, in an external CSS document such as pc/pcStorefront.css. Specifically, you can assign a CSS class to the content, and then change the class when you mouse over. Here's how this is done.

<td onmouseover="this.className='pcShowCategoryBgHover'" onmouseout="this.className='pcShowCategoryBg'" class="pcShowCategoryBg"> 
 <!--#include file="pcShowCategoryH.asp" -->
</td>

… where “pcShowCategoryBgHover” is the CSS class that is applied when you mouse over the table cell, and “pcShowCategoryBg” is the CSS class that is applied when you mouse out (and when you have not moused over yet). As you can see, there is no color set here in the code. The color of the background would be set in the class definition inside the CSS document. Something like this:

.pcShowCategoryBgHover {
 background-color: #F7F7F7;
}

In the example above the source code is from the file viewcategories.asp: it's the section that handles the horizontal display of categories and subcategories when category thumbnails are used.