mouse over effect

[Guest]

I am trying to do a image swap mouse over efect for my navigation buttons. I have changed the categories.tpl to use the category images as buttons...but now I want to have a mouse over effect for each of those images.

The images that I would use for swaping are in the images/upload folder and would be named the same as the category image with a "_over" at the beginning end of it.

example:

mouse out : categoryimage.gif

mouseover: over_categoryimage.gif

Here is the code for my categories.tpl file...please reply with added code to make this work.

skins/classic/styletemplates/boxes/categories.tpl

<!-- BEGIN: categories -->

<div class="boxContentRight">

<ul>

<!-- BEGIN: li -->

<a href="index.php?act=viewCat&amp;catId={DATA.cat_id}"><img src="../../store/images/uploads/{DATA.cat_image}" alt="{DATA.cat_name}" border="0" /></a>

<!-- END: li -->

</ul>

</div>

<!-- END: categories -->

How would I change the code to do the image swap on each image?

[markscarts]

While this probably would be possible, it would not be easy to accomplish, because

{DATA.cat_image} and {DATA.cat_name}

. . . are variables linked to the chosen category in the database. IOW, you will probably have to create new database fields and write some interesting PHP to make this work.

If you remember, on your first question regarding this topic, I gave you some simple javascript code to create rollover images (what you are asking for is called a rollover). This would be easy to do if you were using HTML or CSS to specify a static button image - but I would have no idea how to do what you are asking with data variables.

Also, FYI, it would be a good idea to enclose php, html, javascript, etc. coding in the CODE tags on forum posts.

Sorry I can't be of any more help.