Product list with images and rollovers

[ress]

Templates:
How do I change the standard text type Product list menu to images and rollovers,
maintaining automatic updates when new product are added?

Example:
The basic text (on the left menu) with underscore rollover:



Microphones
Mixers
Software
media
Etc

Change this list to images and rollovers



Best
Richard

[ress]

Re: Product list with images and rollovers

Any ideas on this ??

Originally posted by ress
Templates:
How do I change the standard text type Product list menu to images and rollovers,
maintaining automatic updates when new product are added?

Example:
The basic text (on the left menu) with underscore rollover:



Microphones
Mixers
Software
media
Etc

Change this list to images and rollovers



Best
Richard

[cdicken]

Hi there

Are you talking about the list of sections that appears in a design? Which theme is your design based on?

There was a discussion last week about integrating rollovers into the section link layout template. This sounds similar to what you need. You can read the discussion here if you want.

[ress]

rollovers made easy

Yes the design sections that appears in a design, Theme 4,
Have a look at http://www.prosoundtools.com/act1/acatalog/index.html
This the basic outline, I want to use rollovers for the ” product type” selection list on the left. Making it the same as www.prosundtools.com

Best
Richard

[cdicken]

There is no way to do it automatically. Sorry about that.

You are going to have to create a customised layout template for the 'Top Level Section List Layout' in 'Design | Options | Layouts'.

There are no variables available in the section link layout templates for 'rollover image' so you have to supply these values manually per section using Custom Properties.

Go to 'Advanced | Custom Properties' and create three new custom properties called 'Section Image Name', 'Section Image' and 'Section Image 2'.

Then go to 'Design | Options | Layouts' and click 'Edit' next to the 'Top Level Section List Layout' and change the template to read:

<A HREF="NETQUOTEVAR:SECTIONLINK" onMouseOver="SwapImage('CUSTOMVAR:SECTION_IMAGE_NAME','CUSTOMVAR:SECTION_IMAGE_2')" onMouseOut="RestoreImage()">
<IMG SRC="CUSTOMVAR:SECTION_IMAGE" BORDER=0 ALIGN="ABSMIDDLE" name="CUSTOMVAR:SECTION_IMAGE_NAME">
</A>

Then in the 'Properties' tab of your sections you can define values for the three custom properties and they will be used to create the links to your sections. Make sure you tick 'File Name' when you are entering the filename of an image.