Rollover Menu Solution?

[ilcsportdirect]

Hi,

Just wondered whether there is any quick fix for creating rollover images for the standard section list which in my case appears on the left hand side of the page.

The idea is that we will create an image based menu with a rollover which changes as the mouse hovers over it...?

Thanks,

Dan

[cdicken]

Check out p37 in the Advanced User Guide - Creating a Rollover for your Section Links - you can use this code in the layouts that you are using currently for your top level section list.

[ilcsportdirect]

I'm going insane!!

Can anyone provide a bit more info on how to do this in version 8!? I'm only able to get to step 2 or 3 of the user guide, and I'm going to go insane if I dont figure this out soon...

The advanced user guide states:

1. irst of all, go to 'Design | Library | Variables', right-click on the 'Section' variable group and create a new user definable variable called and 'SectionImageAlt'.

2.Give it a prompt of 'Alternative Section Image', set the 'Place of Setting' to be 'Section' and make sure 'Type' is set to 'Filename'. Also, select 'Allow Empty Value' and de-select 'Allow <Use Parent> as an Option'.

Which I have done...

Then the gude states

You can now edit the section link layout you are using to include your new variable.
3. go to the 'Design' tab and click on a section link.
You should have selected a layout called something like 'Image on Left Section Link' or 'CSS Section Link Layout'.

Which I have done...

4. locate the following line:

This is the current image code. You are going to put a condition around this line so it only appears if there is no alternative section image.

Which I have not done!! Can someone please explain where this code is, as I cant find it! However, I have found the code in the following section:
Design > Library > Layouts > Section Links (expandable menu) - I've then tried doing the above instructions in the applicable section (i.e. CSS Section Link Layout) but I doubt that this is the correct place to do this as it is not mentioned in the User Guide, and besides that, it seems to have no effect!

I'm getting pretty desperate with this and running out of options, so any advice would be very much appreciated!!

Thanks,

Dan

[ilcsportdirect]

Suicidal!

Can anyone help with this? Is the User guide talking rubbish, or am I missing something??

Cheers,

Dan

[cdicken]

You need to replace all the code for your section links (in your top level section list) with the following:

<actinic:block if="%3cactinic%3avariable%20name%3d%22SectionImageAlt%22%20%2f%3e%20%3d%3d%20%22%22">
	<img alt="<actinic:variable name="SectionName"/>" src="<actinic:variable Name="SectionImageFileName"/>" border="0" />
</actinic:block>
<actinic:block if="%3cactinic%3avariable%20name%3d%22SectionImageAlt%22%20%2f%3e%20%21%3d%20%22%22">
	<img src="<actinic:variable name="SectionImageFileName" />" alt="<actinic:variable name="SectionName" />" onMouseOver="src='<actinic:variable name="SectionImageAlt" />' " onMouseOut="src='<actinic:variable name="SectionImageFileName" />' " border="0"> 
</actinic:block>

[ilcsportdirect]

!

Chris, you are a genius! Managed to get the rollover images to display now, but unfortunately they do not link to anything - have I deleted something I shouldnt?? How can I re-insert the links?

Also, How can I change the spaging between the buttons - they are currently separated, with a dotted line and a gap, and I would like them all to appear as though they are joined.

Finally, they are aligned to the right and have a square bullet point in front of each - how do I remove...

Thanks guys,

Dan

[ilcsportdirect]

right - got a bit ahead of myself earlier asking about removing lines and bullets - realised that this was editable in the code section of the Top Level Section List.

Previously the code befor each line read <ul> </ul> so I replaced these with <br> and removed any code from the 'After column' but I still have a slight gap in between the images... How can I remove this gap?

Also, I asume that I can add in html links to the before and after columns to reinstate the navigation...

[ilcsportdirect]

Chris,

Thanks for the tip with the code. As described above, using that code I was able to create the images but this caused the link to disappear. Due to my lack of actinic experience, and hours of a fruitless trawl through the board it has taken me ages to rectify this, but thought that the following addition to the code you provided might be useful to anyone else with the same problem

basically, I just inserted an 'href' line that I found on some other code...

Apologies if this doesnt load up properly...

<actinic:block if="%3cactinic%3avariable%20name%3d%22SectionImageAlt%22%20%2f%3e%20%3d%3d%20%22%22">
	<img alt="<actinic:variable name="SectionName"/>" src="<actinic:variable Name="SectionImageFileName"/>" border="0" />
</actinic:block>
<actinic:block if="%3cactinic%3avariable%20name%3d%22SectionImageAlt%22%20%2f%3e%20%21%3d%20%22%22">
	<a href="<actinic:block if="%3cactinic%3avariable%20name%3d%22IsLoginPageSuppressed%22%20%2f%3e%20AND%0d%3cactinic%3avariable%20name%3d%22UnregCustomersAreNotAllowed%22%20%2f%3e" ><actinic:variable name="SectionPageName" /></actinic:block><actinic:block if="%28%3cactinic%3avariable%20name%3d%22IsLoginPageSuppressed%22%20%2f%3e%20%3d%3d%20false%29%20OR%0d%28%3cactinic%3avariable%20name%3d%22UnregCustomersAreNotAllowed%22%20%2f%3e%20%3d%3d%20false%29" ><actinic:variable name="SectionURL" /></actinic:block>" target="_self"><img src="<actinic:variable name="SectionImageFileName" />" alt="<actinic:variable name="SectionName" />" onMouseOver="src='<actinic:variable name="SectionImageAlt" />' " onMouseOut="src='<actinic:variable name="SectionImageFileName" />' " border="0"> 
</actinic:block>

However, I still have the problem with gaps between the images as mentioned above - any ideas?

Thanks,

Dan