Changing a button when hovering over it.

[Guest]

Hi everyone.

 

 

I need to be able to change this line so when the customer hovers over it, the button changes to another image.

 

<td><div align="center"><a href="' . tep_href_link(FILENAME_DEFAULT, tep_get_all_get_params(array('action')) . 'action=buy_now&products_id=' . $new_products['products_id']) . '">' . tep_image_button('addcart.png', IMAGE_BUTTON_IN_CART) . '</a></div></td>

 

 

The replacement (hover image) is addcart_hover.png but I am not sure how to make this work (style in head or css ? )

 

 

Any suggestions ?

 

 

Chris

[spooks]

 

 

If u add Pure CSS Image Swap On Hover For osC Buttons you can get that effect for any button you choose v easily

[Guest]

Hi Sam,

 

I appreciate the suggestion, but would hate to add a contribution for just one button. Would it be easier just add a javascript into the new_products.php file ?

 

 

Chris

[spooks]

Hi Sam,

 

I appreciate the suggestion, but would hate to add a contribution for just one button. Would it be easier just add a javascript into the new_products.php file ?

 

 

Chris

 

 

Well I would never use javascript when the job can be done with css, css is better, cleaner less resource hungry, no compatibity issues (mostly) & always works, you do know more & more now browse with script off due to the overuse of scripts & the massive slowdown it now often causes (this forum a case in point)

 

That is a very light contrib, very little to do.

[Guest]

Hi Sam,

 

Unfortunately, it doesn't work. In fact, the original addcart.png button doesn't show up now, just a dot where the button should be. The buttons are PNG files, is there an known issue with the file format working with this contribution ?

 

 

 

Chris

[spooks]

Hi Sam,

 

Unfortunately, it doesn't work. In fact, the original addcart.png button doesn't show up now, just a dot where the button should be. The buttons are PNG files, is there an known issue with the file format working with this contribution ?

 

 

 

Chris

 

 

No, its css, image format don't matter, you issue is usually caused by failing to add the line to your footer, did you do that?

[Guest]

Hi Sam,

 

Yes I did. I checked the changes twice.

 

 

 

Chris

[spooks]

Hi Sam,

 

Yes I did. I checked the changes twice.

 

 

 

Chris

 

 

Would you like to check your generated source & see that style entries are there. I've tested this in many configs with all types of doc-type etc, it always works!

 

 

Could u say browser type, osc version, anything un-usual

[Guest]

Hi Sam,

 

OSC is 2.2 RC2a, I am using FF 6, there is nothing unusual about the setup.

 

I will have to find another solution for my button mouseover effect. Thank you again for the suggestions.

 

 

Chris

[spooks]

OK, Sorry your not able to get it to work, in the end its just some simple css stuff, I would suspect you have a conflict somewhere that is blocking it.

 

I know sometimes its easy enough to look without seeing

[Guest]

None of the scripts on dynamic drive will work, the products_new.php file has no head or body tags.

 

 

 

I thought this would be a simple thing.

 

 

Anyone have any other suggestions ?

 

 

 

Chris

[spooks]

Have you tried firefoxes tools to check examine test changes?

 

Remember css results are dependent on the doc-type, but its usually only conflicts that cause failure.

 

Does your code validate (css/html)

 

The method mine uses, thats the same for most image swapping code, is to use a empty image for the 'real image' (the transparent gif is used) then set a background image, on mouseover a 2nd backgound image is shown in place.

 

Javascript code that does the same is generally doing the same, but just changes the css dynamically.

[multimixer]

If you want you can just not use any image but do like this

<?php echo '<a href="' . tep_href_link(FILENAME_DEFAULT, tep_get_all_get_params(array('action')) . 'action=buy_now&products_id=' . $new_products['products_id']) . '"' . 'class="but2"' . '">' . 'add to cart' . '</a>' ?>

 

Then you need to say what but2 is in your css like this maybe

a.but2, a.but2:link, a.but2:visited {
display:block;
border:0px solid #000;
text-align:center;
text-decoration:none;
color:#CCCCCC;
line-height:20px;
overflow:visible;
background-position: center;
font-size: 20px;
padding: 20px 0px 20px 0px;
background-image: url(images/template/button2.png);
background-repeat: no-repeat;
font-weight: normal;
}

a.but2:hover {
color:#666666;
background-image: url(images/template/button2hov.png);
}

a.but2:active {
color:#CCCCCC;
background-image: url(images/template/button2hov.png);
}

 

Next thing is you take a plain (no text) button and use it as an background image, you can do 2 versions of it, one for normal one for hover

[spooks]

George's post made realise a possible cause of your failure, are u using sts or similar, sts can change the button image path, if so that needs to be reflected in the code, I don't use sts so have never tested with it.

[multimixer]

George's post made realise a possible cause of your failure, are u using sts or similar, sts can change the button image path, if so that needs to be reflected in the code, I don't use sts so have never tested with it.

 

Sam, you are right, I'm sorry, I just copied from my css and that one is used with sts, so I have a different stylesheet and images folder in each design

 

The path to the image needs to be set correctly of course like

 background-image: url(images/whatever/button2.png);

or

 background-image: url(images/button2.png);

Edited March 18, 2010 by multimixer

[Guest]

hi George,

 

Tried your code, but received this:

 

Parse error: syntax error, unexpected T_STRING, expecting ')' in /home/content/31/5815531/html/includes/modules/new_products.php on line 56

 

this is how I implemented the code into the new_products.php

 

 

<tr>

<td><div align="center"><?php echo '<a href="' . tep_href_link(FILENAME_DEFAULT, tep_get_all_get_params(array('action')) . 'action=buy_now&products_id=' . $new_products['products_id']) . '"' . 'class="but2"' . '">' . 'add to cart' . '</a>' ?></div></td>

</tr>

 

Chris

[multimixer]

I will see what i did wrong, was writing directly on the screen :(

 

In the main time you can checkout this that I just found ultimate buttons

[Guest]

Hi George,

 

I did see that, but like I was telling Sam, this is one button style that appears ONLY in the new products area on the main page so I didn't want to install a contribution for it.

 

 

Thanks again

 

 

Chris

[multimixer]

Regarding the error: ; is missing before ?>

 

I'm sorry

[Guest]

George,

 

That wasn't the cause of the error. I am still getting the same error.

 

 

Chris

[multimixer]

Can you post the complete new_products.php you have so I can see also?

 

I'm getting curious because that line works for me fine, wherever I put it

[Guest]

Hi George,

 

Here is new_products.php

 

 

<!-- new_products //-->

<?php

//$info_box_contents = array();

//$info_box_contents[] = array('text' => sprintf(TABLE_HEADING_NEW_PRODUCTS, strftime('%B')));

 

//new contentBoxHeading($info_box_contents);

 

if ( (!isset($new_products_category_id)) || ($new_products_category_id == '0') ) {

$new_products_query = tep_db_query("select p.products_id, p.products_image, p.products_tax_class_id, if(s.status, s.specials_new_products_price, p.products_price) as products_price from " . TABLE_PRODUCTS . " p left join " . TABLE_SPECIALS . " s on p.products_id = s.products_id where products_status = '1' order by p.products_date_added desc limit " . MAX_DISPLAY_NEW_PRODUCTS);

} else {

$new_products_query = tep_db_query("select distinct p.products_id, p.products_image, p.products_tax_class_id, if(s.status, s.specials_new_products_price, p.products_price) as products_price from " . TABLE_PRODUCTS . " p left join " . TABLE_SPECIALS . " s on p.products_id = s.products_id, " . TABLE_PRODUCTS_TO_CATEGORIES . " p2c, " . TABLE_CATEGORIES . " c where p.products_id = p2c.products_id and p2c.categories_id = c.categories_id and c.parent_id = '" . (int)$new_products_category_id . "' and p.products_status = '1' order by p.products_date_added desc limit " . MAX_DISPLAY_NEW_PRODUCTS);

}

 

$row = 0;

$col = 0;

$info_box_contents = array();

while ($new_products = tep_db_fetch_array($new_products_query)) {

$new_products['products_name'] = tep_get_products_name($new_products['products_id']);

 

$product_query = tep_db_query("select products_description from " . TABLE_PRODUCTS_DESCRIPTION . " where products_id = '" . (int)$new_products['products_id'] . "' and language_id = '" . (int)$languages_id . "'");

$product = tep_db_fetch_array($product_query);

$new_products['products_description'] = $product['products_description'];

 

if(($row%2)<>0) {

$info_box_contents[$row][$col] = array('align' => 'center',

'params' => 'colspan="5" valign="top" height="1" ',

'text' => tep_image(DIR_WS_IMAGES . 'spacer.gif', '', '10','','style="margin-right:0px "') );

$row++;

}

 

$info_box_contents[$row][$col] = array('align' => 'center',

'params' => 'class="smallText" valign="top"',

'text' => '

<table width="180" cellpadding="3" cellspacing="3" class="border">

<tr><td height="5"> </td></tr>

<tr>

<td><div align="center"><a href="' . tep_href_link(FILENAME_PRODUCT_INFO, 'products_id=' . $new_products['products_id']) . '">' . tep_image(DIR_WS_IMAGES . $new_products['products_image'], $new_products['products_name'], SMALL_IMAGE_WIDTH, SMALL_IMAGE_HEIGHT) . '</a></div></td>

</tr>

<tr>

<td><div align="center"><span class="NameProd">' . $new_products['products_name'] . '</span></div></td>

</tr>

 

<tr><td height="10"> </td></tr>

<tr>

<td><div><div class="iinfo" style="float:left">

<div align="center">' . $currencies->display_price($new_products['products_price'], tep_get_tax_rate($new_products['products_tax_class_id'])) . '</div>

</div>

<div style="float:right"><a class="categor" href="' . tep_href_link(FILENAME_PRODUCT_INFO, 'products_id=' . $new_products['products_id']) . '">' . tep_image_button('more.jpg', IMAGE_BUTTON_IN_CART) . '</a> </div></div> </td>

</tr>

<tr><td height="10"> </td></tr>

 

<!-- <tr>

<td><div align="center"><a href="' . tep_href_link(FILENAME_DEFAULT, tep_get_all_get_params(array('action')) . 'action=buy_now&products_id=' . $new_products['products_id']) . '">' . tep_image_button('addcart.png', IMAGE_BUTTON_IN_CART) . '</a></div></td>

</tr> -->

<tr>

<td><div align="center"><?php echo '<a href="' . tep_href_link(FILENAME_DEFAULT, tep_get_all_get_params(array('action')) . 'action=buy_now&products_id=' . $new_products['products_id']) . '"' . 'class="but2"' . '">' . 'add to cart' . '</a>'; ?></div></td>

</tr>

</table>

 

 

');

 

$col ++;

 

if($col == 1) {

$info_box_contents[$row][$col] = array('align' => 'center',

'params' => 'valign="top" ',

'text' => '' );

$col ++;

}

 

 

if ($col > 3) {

$col = 0;

$row ++;

}

}

 

new contentBox($info_box_contents);

?>

<!-- new_products_eof //-->

 

 

Chris

[multimixer]

Chris, everything is clear.

 

I was doing everything in html (thats why the echo and some additional '), but you are in php. I'm sorry, I didn't realize this

 

Thats you line

<tr>
<td><div align="center"><a href="' . tep_href_link(FILENAME_DEFAULT, tep_get_all_get_params(array('action')) . 'action=buy_now&products_id=' . $new_products['products_id']) . '"' . 'class="but2"' . '">' . 'add to cart' . '</a></div></td>
</tr>

 

Hope that now it works, tell me the news

George

[Guest]

Hi George,

 

 

Ya, I was wondering why the echo. But that last change did it, I thank you very much.

 

 

 

Chris

[multimixer]

You're welcome Chris, glad that I could help, hope your client will appreciate your efforts