Cannot get mouseover/pop-up layers to work with Xara 16/17

Hi - really hope someone can help - just spent a whole day getting nowhere.

Have a multi-page website designed in Xara 16/17. One page has 15 images of products on. We're trying to make is so that when a customer does a mouseover of those images - they automatically expand to show more detail of the product [fabrics].

If we add an enlarged image to the MouseOver layer and then soft group it with the image on the MouseOff layer - it works fine. But we can only get one of those 15 images to work this way. Adding more images - means that that all come up together.

Instead we've been trying to create a number of new layers, embedding the larger images in those - and then linking them to the individual pictures of products on the MouseOff layer. "Pop-up layers". But no success.

The online tutorials aren't helping - and neither is the enormous Xara User Manual.

This is what we're doing:

1. Copy the image from the MouseOff layer on the relevant page.
2. Create a new named layer in the 'page and layer gallery'. This is always above the MouseOver layer - which in turn is above the MouseOff layer.
3. The image is then pasted into the new layer. We then drag it to make it bigger.
4. We go back to the MouseOff layer and right click on the original image.
5. The select 'Web Animations'
6. On the 'mouse-over' tab we select 'Fade' for the mouse over effect, then select the 'pop-up layer' we created at 2. above.

We then preview the page - and the mouseover effect does not work.

We've tried all sorts of variations on and around the sequence above. Sometimes not clicking the mouse over effect, sometime hiding the layers, adding in fresh images, etc., etc.

Part of the problem is that we can't find any video tutorial or written help that shows examples that look exactly like our version of Xara.

Perhaps someone can spot something dumb that we're doing - or may be able to point us in the right direction for a good tutorial.

Would be really grateful.

Quote:

---

Originally Posted by Bunzena

Hi - really hope someone can help - just spent a whole day getting nowhere.

Have a multi-page website designed in Xara 16/17. One page has 15 images of products on. We're trying to make is so that when a customer does a mouseover of those images - they automatically expand to show more detail of the product [fabrics].

If we add an enlarged image to the MouseOver layer and then soft group it with the image on the MouseOff layer - it works fine. But we can only get one of those 15 images to work this way. Adding more images - means that that all come up together.

Instead we've been trying to create a number of new layers, embedding the larger images in those - and then linking them to the individual pictures of products on the MouseOff layer. "Pop-up layers". But no success.

The online tutorials aren't helping - and neither is the enormous Xara User Manual.

This is what we're doing:

1. Copy the image from the MouseOff layer on the relevant page.
2. Create a new named layer in the 'page and layer gallery'. This is always above the MouseOver layer - which in turn is above the MouseOff layer.
3. The image is then pasted into the new layer. We then drag it to make it bigger.
4. We go back to the MouseOff layer and right click on the original image.
5. The select 'Web Animations'
6. On the 'mouse-over' tab we select 'Fade' for the mouse over effect, then select the 'pop-up layer' we created at 2. above.

We then preview the page - and the mouseover effect does not work.

We've tried all sorts of variations on and around the sequence above. Sometimes not clicking the mouse over effect, sometime hiding the layers, adding in fresh images, etc., etc.

Part of the problem is that we can't find any video tutorial or written help that shows examples that look exactly like our version of Xara.

Perhaps someone can spot something dumb that we're doing - or may be able to point us in the right direction for a good tutorial.

Would be really grateful.

---

Tried a few examples, just how you describe:
:pointAttachment 127394

All works as expected.

Have you tried Run as administrator as the application might not be fully bedded in?

Acorn

Hi Acorn

First of all - thanks so much for responding. What you've produced is pretty close to what we're after - and does, of course - work.

I'll have to pick apart how you're doing this when I'm fully awake. Can you give me any pointers as to how you've achieved this?

I'll also try running XWD as an admin - as you suggest.

It looks as if you've created this example in XWD 15. Is that right?

Thanks again.

Quote:

---

Originally Posted by Bunzena

Hi Acorn
First of all - thanks so much for responding. What you've produced is pretty close to what we're after - and does, of course - work.
I'll have to pick apart how you're doing this when I'm fully awake. Can you give me any pointers as to how you've achieved this?
I'll also try running XWD as an admin - as you suggest.
It looks as if you've created this example in XWD 15. Is that right?
Thanks again.

---

Bunzena, I did little different to your description other than adding some Web Animation effects.

I made my design file a Supersite Transitions one but this would not affect the steps for the rollovers.

index page

• Dragged and sized the default image onto MouseOff.
• Clone and scaled and moved into a new layer, DefaultImage.
• Clone both and flipped and placed largeer one into its layer, DefaultImageFlipped.
• [Layers could have been named anything, just about and can be changed at any time]
• Selected each MouseOff shape and in Web animation > Mouse-over > Show pop-up layer, added respective bigger image.
• [All shapes could be anything]
• Pressed the Effect button and added a Transition effect.
• Crucially, all applied detail here needed to be OK-ed or Apply-ed to ensure they are set up.

index-a page

• Did the same but for only one shape, one layer and a different effect.
• [To prove Supersite settings did not break anything]

index-b page

• Simply put larger shapes on MouseOver layer, with no overlap.
• Smaller thumbs on MouseOff layer need to overlap with the larger shape by at least 50% area.
• Added a # Link to all elements to activate the roll-over.
• Veyy basic as no transitions and no grouping.
• [Just to show another approach, no transition other than a default simple Fade In/Out]

Presented file was made in Pro+ so will have alerted you on loading into v16/v17.
It was a Xar file. Again, XWDP handles these with no issue.

Acorn

Acorn - just wanted to follow-up on the original posting.

Firstly to say 'thank you' for your input and help.

Secondly, to say we did eventually find what we were doing wrong.

When we created the additional layers for the popups - we named them using an ampersand. For example 'Acorns & Oaks - Damson' to signify the fabric colour and name.

What we weren't aware of is that if you use an '&' symbol in the layer name - it will not work as a pop-up.

I guess it must be some sort of reserved symbol. I could not see this mentioned anywhere in the Xara manual - but I may simply have missed it.

Change the pop-up layer name to 'Acorns and Oaks - Damson' - and everything works as it should do.

Hey ho. :D

Really admire your sleuthing skills on this one. There would have been bits of keyboard spread over a 2km radius if it was my problem.

Quote:

---

Originally Posted by Chris M

Really admire your sleuthing skills on this one. There would have been bits of keyboard spread over a 2km radius if it was my problem.

---

Thanks Chris. Can't afford any more keyboards!

There was a gap of 2 months where I just gave up and sulked. Came back to the problem yesterday and just stumbled on it by accident.

But isn't that how most of the world's greatest discoveries happen? :)

Gosh, I thought everyone knew that !()£$€%^*[]{}`¬¦#;:@~\|? were all valid and &<> weren't.

Seriously, it is probably in the pocket of a long-gone developer as to why. Probably too hard to filter out with Regex unless you know what you are doing.

Anyhow, we all now know.

In passing, ! (Pling or Bang) at the beginning of a layer name ensures the assets are always published even when not set up as a Pop-up layer and the layer is hidden.

Layer with a Bang (!) prefix to the Layer Name

Even when the Layer is hidden, it gets published and the Objects are visible.

Useful in design mode to reduce screen clutter but still get the correct site published.

Acorn

Acorn. That made me laugh out loud! ;)

Just goes to show that every is a school day. As you say - somewhere in the code...

The good news is that everything is working - and once again, thanks for your help.

Quote:

---

Gosh, I thought everyone knew that !()£$€%^*[]{}`¬¦#;:@~\|? were all valid and &<> weren't.

---

on an aside - I remember spitting blood years ago because windows will not let you use the file name aux

con and nul are also out [there are a couple of dozen or so in total as I recall]

Quote:

---

Originally Posted by handrawn

on an aside - I remember spitting blood years ago because windows will not let you use the file name aux
con and nul are also out [there are a couple of dozen or so in total as I recall]

---

All of these: CON, AUX, COM1, COM2, COM3, COM4, LPT1, LPT2, LPT3, PRN, NUL.

The best site for oodles of goodies on hard-to-recall features is https://ss64.com.

Best Tip: download https://ss64.com/pass/.

1. Store locally and never publish.
2. Build up your sites array (e.g., --- ,{seed:"TG-myusername", url:"https://www.talkgraphics.com/", displayName:"Talkgraphics"}. This should go to the login page, if possible.
3. Memorise your "main password" (or phrase) and never right it down or stick to your keyboard. Let's call it The Master Password.
4. Change your passwords regularly. You decide when.
5. Keep a printout of your sites and the date you changed a password.
6. The clever bit:
   
   1. Combine your The Master Password and date of change into the 'main password' box and press Generate.
   2. If you now Ctrl+Click the Display Name, the site opens in a new Tab.
   3. You still have the page with the UserName and Password for that site.

I have changed my version's on click event to open into a new Tab but I am not offering it up as my coding may be buggy and I never want the blame should it go wrong.

For recovery:

• Write down The Master Password and keep it safe. Change some part of it if you think you can remember what you changed.
• Put The Master Password (as modified) in a random file on a USB stick.
• Just keep a paper note the year and month of a password change and use that (202009) rather than a fuller date.
• Save out your sites array to an encrypted ZIP (use The Master Password). It is security-sensitive as it list all your accounts and, possibly, your UserNames.
• Store your copy of the SS64 Password Generator file on another SB stick or add to another encrypted ZIP file you can save locally or upload to the Cloud.
• Finally, printing out the full generated list and storing that safely is actually far less of a risk than you may think.
• Use the SS64 Password Generator Custom box when you are away from everything. You go to the website, you remember your UserName, The Master Password and year-month of the website password change and you are in.

I personally use RoboForm.

Acorn