Sometimes it is just the little things that can really set a site apart from the others. Having just a simple little variation in behavior or looks of anything, even something as small as the eBay Image used in Build a Niche Store can mean the difference between a click through and a possible commission and the user losing interest and leaving. I was asked about doing this in the forum and thought I’d go ahead and post it for everyone.

Although the title and instructions are for creating a mouse over on the ebay.gif used in BANS, this can be applied to any image anywhere on your site. I’ll add some additional instructions below on how to accomplish this.

There are a few easy steps you will need to do in order to make this happen. For those that are not quite sure what a mouse over effect is, run your mouse over the ebay image below. The steps I took to make this image flip in this post are the same as listed in setup 2 below.

Setup 1: Adding a mouse over to the default eBay Image

1. Create 2 new images and name them ebay1.gif and ebay2.gif
2. Create a new transparent (completely clear, see thru) image the same size as the ones you made above and name it ebay.gif.
3. Upload the images to your themes image folder overwriting the original ebay.gif.
4. Open your style sheet (styles.css) and add this code at the bottom:
   

   #ebaylogo a {
   width: 70px;
   float: left;
   padding: 0px;
   background-image:url(‘images/ebay1.gif’);
   background-repeat:no-repeat;
   }

   #ebaylogo a:hover {
   background-image:url(‘images/ebay2.gif’);
   }

5. Save your changes and upload the style sheet to your themes folder overwriting the original styles.css.
6. BANS VERSION 2 ONLY FROM HERE! Open the FrontControl.php in the cont folder and find the code below. Now add in the bold items to make the ebay logo a link
   (has to be a link to make it work!)

   function logodisplay(){
   $temp = $this->getOptions("template");
   $ebaylogo = $this->getOptions("logo");
   if ($ebaylogo != ’0′){
   $f = "<a href=’YOUR AFFILIATE LINK’>
   <img src=’".URL_PATH."/themes/".$temp."/images/ebay.gif’ alt=’eBay’ /></a>
   ";
   return $f;

7. Save your changes and upload the FrontConrol.php to your stores cont folder overwriting the original FrontControl.php

That’s it. It will be working now. If the ebay.gif image is not transparent (ie made using a program like PhotoShop or Fireworks, that has that capability) then you will not see the behind effect as the image will render white and hide them.

Setup 2: Adding the mouse over effect to any image

To incorporate this method to any image simple follow about the same steps as I’ll show you below

1. Create 2 new images and name them image1.gif and image2.gif
2. Create a new transparent (completely clear, see thru) image the same size as the ones you made above and name it image.gif.
3. Upload the images to your themes image folder.
4. Open your style sheet (styles.css) and add this code at the bottom:
   

   .ebayflip a {
   width: 70px; /*You can change this to the actual size of the image*/
   padding: 0px;
   background-image:url(‘images/image1.gif’);
   background-repeat:no-repeat;
   }

   .ebayflip a:hover {
   background-image:url(‘images/image2.gif’);
   }

5. Save your changes and upload the style sheet to your themes folder overwriting the original styles.css.
6. Now anywhere you want to place the image in your site just add this code:
   

   <div class=”ebayflip”><a href=”YOUR_LINK_HERE”><img src=”http://YOUR_DOMAIN_NAME/themes/YOUR_THEME/images/image.gif” alt=”" /></a></div>

That is all there is to it. Sometimes just a little something extra can make or break the sell!