Cannot Create MouseOver on NavBar

**hardot** · 11 July 2009, 08:36 PM

I've been trying once again (after several months away from XWD) to create a new website with a simple nav bar, using my own color schema, but cannot get the mouse over effect to work The .web file of the home page is attached. What is the step-by-step process to achieve a different color scheme for the mouse over as opposed to the mouse off? I've experimented with different layer steps, but every time I attempt to change the color of a separate MouseOver layer, that changes the color of both layers and wipes out the text on it, to boot. I'd like to use the same text color (white) on both layers - just different fill colors. I guess if I can get that working, I could add the mouse down layer as well. HOW?

Any help much appreciated.

**cursor** · 11 July 2009, 10:03 PM

In order to have a functioning rollover effect, you need one button element (usually, graphic background + text) on the MouseOff layer, and another one on layer MouseOver. With both layers fully activated in the Layer Gallery, and with all button elements selected, the status line in the lower-left corner reads, "11 groups (Soft Group) on layer MouseOff". Um ... where are your MouseOver elements?

Note that if the MouseOff's layer's visibility is turned off, there are no MouseOver button elements showing.

Somehow you have deleted your MouseOver button elements.

This is how you fix it.

With both layers visible and selectable, lasso-select all of your buttons.
Arrange > Remove soft group. Your status line will change to, "11 groups on layer MouseOff".
With the set of buttons still selected, type Ctrl+K (clone, in place).
Move the cursor to the Layer Gallery and select the MouseOver layer.
Click the Move button. The status line will change to "10 groups on layer MouseOver".
Hit the Esc to deselect.
Turn off visibility and selectability for your MouseOver layer. All you can see now is what is on your MouseOff layer.
While holding down the Ctrl key, click on the first button's background rectangle. Your status line will read, "1 shape 'inside' on layer MouseOff".
Holding down the Ctrl+Shift button click on the second button's background rectangle. Your status line will read, "2 shapes 'inside' on layer MouseOff". Continue clicking the rest of the background rectangles. When done, the status line will read, "10 shapes 'inside' on layer MouseOff".
On the bottom color bar, right-mouse click on 'Theme color 3', then pick "Set fill color". All of your rectangle backgrounds will change to black.
Click on the Preview button & test the button rollover effect.
With both layers selectable and visible, lasso-select the first button. Your status line will read, "2 groups on 2 layers".
Do an 'Arrange > Apply soft group'. Your status line will read, "2 groups (soft group) on 2 layers."
Finish by applying the same soft-grouping to each button.

Don't forget to change the Arrange > Link values when you get the rest of your pages created.

**Drwyd** · 11 July 2009, 10:04 PM

Hi hardot

1. Select button

2. Clone (Ctrl+K)

3. Select MouseOver Layer from layer gallery

4. Click "move" in layer gallery

5. Ctrl+click button (to select button background without text)

6. Change colour

7. Preview

Drwyd

Quick draw Curtis beat me to it

**hardot** · 12 July 2009, 02:46 PM

Hi Curtis,
Thanks for the help, but I'm still having a problem. On your 8th bullet, while holding the Ctrl key and clicking on the first button's background, the status line does not change to "1 shape 'inside'...". That prevents me from going any further.

Gotta admit, working with these layers is a challenge.

**hardot** · 12 July 2009, 03:06 PM

Well, I've continued working with this challenge, and now I've been able to change the color scheme on the MouseOver layer to black. Next problem: When I preview it, all the buttons are no longer visible, in any color. I've tried switching layers and changing their properties on and off - no change.

I guess I could go back to using the buttons straight from the design gallery, but then I'll never learn how to make different color schemes work -- and I want to do that. So any further help much appreciated.

**cursor** · 12 July 2009, 03:26 PM

Please post your current .web file.

**Karateed** · 13 July 2009, 04:30 AM

Originally Posted by hardot

Well, I've continued working with this challenge, and now I've been able to change the color scheme on the MouseOver layer to black. Next problem: When I preview it, all the buttons are no longer visible, in any color. I've tried switching layers and changing their properties on and off - no change.

I guess I could go back to using the buttons straight from the design gallery, but then I'll never learn how to make different color schemes work -- and I want to do that. So any further help much appreciated.

Hi Hardot,

I feel your pain but the folks on this site are excellent with this product. I'm just learning for about 2 weeks now and I had these types of problems with photos, not navbars. The secret is in just understanding layers and how to get objects on the right layers.

I've attached a rework of your navbar to include a different colour (maybe not one of your choice) but it works and is easy to change if you want to.

These are the steps I took...and being a raw beginner, please if someone sees I'm giving bad info, correct me....

1/ Make sure your layer gallery is open and ensure Mouseover is checked.
2/ Clone one of the buttons.
3/ Use the colour editor to choose the colour you want to use.
4/ Fill in the cloned button.
5/ Go to text mode (left menu - big T)
6/ The text is probably invisible to you but you know where it is so you can highlight it (the fill changed the colours to all the same). Use the home button to go to the front of the text and then press the end button to highlight the whole text.
7/ Click on white on the bottom of the page (colour bar) while the text is highlighted and you'll see it change to white.
8/ Now the important part....they're all important but this makes it work. Go back to select mode (arrow on left menu) and select the new nav button.
9/ Click on the 'move' tab in the layer gallery and you'll have the new button on the correct layer.
10/ To check that it works first uncheck the Mouseover box. The new button should disappear. If it doesn't, something is not correct.

This is just how I did it, there may be a much simpler method. Hope it helps,

Ed......:-)

**hardot** · 14 July 2009, 04:24 PM

Thanks Curtis, Ed

With your help, I finally got this working properly. One strange anomaly was that the Ctrl-Shift key combo was operating correctly with my right hand keyboard Ctrl key, but not with the one on the left side of the keyboard. Yet everything else seems to work Ok on both. Strange.

Hopefully, the next release of XWD will make the rollover process easier.

**Soquili** · 14 July 2009, 04:41 PM

Hi Hardot,

When I worked as a technical support tech the left control key failed on many keyboards. That key was used very often and the metal contacts would literally wear away.