Would Like to Make the Link Buttons Rollover Images

**prs444** · 07-24-2005, 09:11 PM

I Have remade the buttons included with the new version to match my site but I would like them to be rollover images. I can create the second set of images for the rollover buttons but I don't know the code or where to put it to get the rollovers to work. Is there an easy way to find where all the buttons are referenced to change the code?
I would have no problem posting all the buttons for the rollovers as a contribution so anyone can use them if I can get them to work.
Any help would be great!

**jpf** · 07-25-2005, 05:20 AM

Easy Rollovers
http://www.oscommerce.com/community/contributions,2054

Which sounds like it might be easy to add into oscMax. But I have not tried.

Good Luck

**prs444** · 07-25-2005, 09:48 PM

I tried to follow the instructions with the Easy Rollover contribution but I cant seem to get it going.
Maybe someone can help walk me through.
I tried following the instructions exactly as printed.

Step 1: Place the included javascript file (rollovers.js) into your site wherever you'd you like.
I installed it in the catalog folder.

Step 2: Then add the link to the javascript in each page on your site. For those running any contributions that give your site some templating abilities this will be pretty quick but those who aren't you need to go in every page on your site to add this link. Please add the link inside the <head></head> area, an example is below:
Before:
</head>
Add
<script type="text/javascript" language="javascript" src="rollovers.js"></script>
</head>

I added the above link as written above into my mainpage.tpl.php file since I though that page controlled the template.

QUESTION- If the javascript file is in the catalog folder do I need to change the src="rollovers.js"> part of the link to src="catalog/rollovers.js">
Or better yet, can I put the javascript file (rollovers.js) into the catalog/includes/javascript folder with the rest of the javascript files.
If I do that, how does that change the link?

ALSO: Where should I add the link? I tried it on the mainpage.tpl.php file and it didn't work. The contribution talks about adding the link to each page but I'm not sure how the template system pulls up the pages so I'm kinda lost where to add the link.

Step 3: Modify html_output.php located in includes/functions/ so that each image button and image form submit will have class="rollover"

I did a file compare between the html_output.php included with the contribution and the on in the osMax RC1 and replaced line271:

$image_submit = '<input type="image" src="' . tep_output_string(DIR_WS_LANGUAGES . $language . '/images/buttons/' . $image) . '" border="0" alt="' . tep_output_string($alt) . '"';

with:

$image_submit = '<input type="image" class="rollover" src="' . tep_output_string(DIR_WS_LANGUAGES . $language . '/images/buttons/' . $image) . '" border="0" alt="' . tep_output_string($alt) . '"';

Then I added:

if (tep_not_null($parameters)) {
$parameters .= ' class="rollover"';
} else {
$parameters .= 'class="rollover"';
}
on line 286

I then added a rollover image to my sign in button to test if it worked and it did not.
The site is up at:
http://www.fukkenwax.com/catalog

If anyone needs more info to help just post what you need to know and I'll do my best.
Thanks from a total newbie!

**prs444** · 07-25-2005, 11:42 PM

OK now we are getting somewhere! I added the javascript link:

<script type="text/javascript" language="javascript" src="rollovers.js"></script>

into the catalog/templates/aabox/popup.tpl.php file and now the rollover buttons have started to work.
BUT.... there is a glitch, sometimes the rollovers work and sometimes they don't. Just reloading the page will sometimes get the ones that don't work to all of the sudden work.
And here is what bugs me... if there are several buttons on a page some might rollover and some might not. I can't use the rollover contribution if I can't get it to work correctly. I'll keep plugging away.