Printable View
I would like to display text, either by hovering over with a mouse or with a popup over individual photos in a group. This is specifically for an obituary page where I want the persons name and their death year to display for each individual photo. This is the example of the grouping I'm using .... Attachment 127218 Is this possible?
You seem to have a very old Xara product listed. Are you up to date?Quote:
Originally Posted by trnhockey
If not, the simplest is is probably create a rectangle on MouseOff with 99% Transparency the size of an single image.
Create a shape with Text of their obit on MouseOff. Align both and Soft-Group and finally add a Link of #.
You will now get a pop-up on hover.
Clone and alter the Text for each departee.
If you have a later version, do tell as there are tidier approaches.
Acorn
Yes, I'm using version 17. I just downloaded it today!
Yes, I have the newest version Acorn. I just downloaded it today. I'm not seeing an easier way though so I must be missing it.Quote:
Originally Posted by Acorn
If the photos are individual:
Right click a photo and choose 'Web Animation'
Under the 'Mouse Over' tab type the information into the 'Show Pop Up Text (Title)
Repeat for all photos.
If the photos are in a single block:
Create a square with the Shape Tool and place over individual photo, make transparent (95%+) and repeat the above.
You could also make individual layers and choose 'Show Pop Up Layer'.
Chris, adding tens of Layers is unwieldy.Quote:
Originally Posted by Chris M
My attached shews two different approaches.
:pointAttachment 127219
The MouseOff objects will end up a 99+% Transparent.
The cloned shapes are put on the MouseOver and Soft-Grouped.
Add a # Link and you have a hover button. I did this on the left.
Add a Web Animation and you have that on the right.
You change the Transparency to suit as well as colours, edging and text.
Any additions to the MouseOver part of the "button" need to be Soft-Grouped.
There are better approaches.
Acorn
The 'Pop Up Text (Title)' is, by far, the easiest and neatest option. and yes, the amount of layers would make that option a virtual non-starter.
Whilst on the subject of Soft Groups...am I the only one where ctrl+alt+G doesn't actually make a soft group? One of the reasons I don't bother with the Mouse Over layer for this type of thing is the faffing around with scurrying up to Arrange > Apply Soft Group and bobbing between the 2 layers.
Pop-up Text is heavily dependent on the browser type. You have no control over its position and it is not much help for screen readers.Quote:
Originally Posted by Chris M
Press Alt-U-H. Select (No style) then press Ctrl+Alt+G and see if you get any Clashes.
Acorn
Browser type - I did not know this, and now I have to play around to see what's what.
Position - true, but for simple info it's a small price to pay. Not that this particular instance is 'simple info' though.
Screen readers - again, I did not know this. This piece of knowledge is valuable to me personally as I have a loose working relationship with a couple of people at Vision Australia.
I'm using WDP 17. Al+U+H opens Utilities. Alt+U - Utilities, Alt+H - Help...I fail on step one!
Chris, my bad, it is Pro(+) thing to assign keypresses.Quote:
Originally Posted by Chris M
Read https://inclusive-components.design/...ps-toggletips/, the "title" attribute.
Acorn
My best approach is a CSS fade on the image to reveal underneath.
Much more versatile and you can control most things. I added some filters for effect and you are manipulating one image and not a clutch of things.
If it were to be used in the OP's case, the photo grid would need to carve out all the images and each would have the Name, htmlclass="reveal".
I put my images in a !Images layer to make it easy to switch from image to things under, when editing.
:pointAttachment 127221
Acorn
Thanks Acorn, but I'm stumped on how I get Xara - Pop-ups.xar into each individual photo is that group of photos?
You don't, you follow the approach.Quote:
Originally Posted by trnhockey
Create a rectangle the size of one of your pictures.
Clone it.
The bottom one is made 99%transparent and sits on top of an image.Move the top Clone to the MouseOver layer and change its Transparency to 35% so you can still see the image underneath.
Select both rectangles and soft-group and add a Link of #.
This now your template Shape.
Clone this, one for every image.
For each, add your Text within the bounds of the MouseOver rectangle.
Soft-group again and check the # Link is still there.
That's one image sorted...
... that's all that is needed but it is a bit clunky so adding Web Animation does for the right-had set I made.
Acorn
As a complete aside, an off-topic post, I love your use of "shews". Shews is a completely ligitimate word in my small corner of East Anglia, but often get's comments that it's not a real word ;)
Threw it in as Americans pronounce shew as "shoe" and not "show". just like they have problems with route and buoy.Quote:
Originally Posted by Egg Bramhill
Acorn