Jump to content
  • Checkout
  • Login
  • Get in touch

osCommerce

The e-commerce.

Trying to use CSS for Mouseover button


COOLumbia

Recommended Posts

Posted

I'm trying to implement a hover button for the Add to Cart button on the New Products page.

 

1. I added "add2cartbutton" in the stylesheet.css between the SPAN.errorText entry and the .moduleRow entry, like this: (I don't know if the order of these entries has any significance):

 

SPAN.errorText {

font-family: Verdana, Arial, sans-serif;

color: #ff0000;

}

 

/* ADD to CART button */

 

a.add2cartbutton (

display: block;

text-align: right;

width: 110px;

height: 30px;

background-repeat: no-repeat;

background-image: url'includes/languages/english/images/buttons/add2cart.png');

cursor: hand;

padding-right: 0px;

padding-top: 0px;

background-position: 0%

}

 

a.add2cartbutton:hover {

background-position: 100% 0%;

}

 

.moduleRow { }

.moduleRowOver { background-color: #D7E9F7; cursor: pointer; cursor: hand; }

.moduleRowSelected { background-color: #E9F4FC; }

 

2. I loaded an add2cart image file (png) to my buttons folder. The file works fine in front page, as you can see at GiftsAndMore.us/add2but.htm. This image is a double-wide button, the left half normal and the right half with a green glow. The CSS style sheet just moves the display position of the image to the right when the mouse hovers over it. This is supposed to make the image change much faster than using two separate images, and does not require an image preload.

 

 

3. I updated products_new.php (and this is probably where I'm causing a problem) as follows; all I wanted to do was add the class="add2cartbutton" inside the <a></a> delimiters:

 

<td align="right" valign="middle" class="main"><?php echo '<a class="add2cartbutton" href="' . tep_href_link(FILENAME_PRODUCTS_NEW, tep_get_all_get_params(array('action')) . 'action=buy_now&products_id=' . $products_new['products_id']) . '"></a>'; ?></td>

</tr>

 

In my store products_new page, I get no button images at all, no error messages, nothing. Yet in my test page, it works great. Can some CSS and/or PHP expert see anything that I'm doing wrong? (I reverted to the working copy of products_new.php, but the old one is still there under ng_products_new.php if you want to see it).

Archived

This topic is now archived and is closed to further replies.

×
×
  • Create New...