21 photo mouseover gallery

[steve.ledger]

This small MouseOver photo gallery may be useful to others who are wanting more photos per page.

You can replace the photo's and thumbnails simply by selecting each layer one at a time and drag and drop your photo from Windows Explorer to the large image. This will replace the supplied image with your own and update the thumbnail automatically.
(See Egg's video on how to do this)

ORIGINAL PHOTOS SUPPLIED WITH XARA XTREME 4

[zaphodeist]

Thank you Steve

[steve.ledger]

Pleasure John.

Here's the same page but with a dark theme and rounded corner thumbnails.

[robobugs]

Sweet! This just might be a cool option for my site!

Could this be added to the Popup thread at:
http://www.talkgraphics.com/showthread.php?t=38625

I am amazed at the possibilities for Gallery Design in Xara!

Perhaps this isn't the place, but here it goes. I am noticing that the "special" MouseOver and MouseDown designations are really not that special. Most work involves naming and linking to layers which do not have these words in them. I think the Xara Help intends to help authors organize their layers and does not affect whether the site works or not.

Just an observation.

Nice work on the 21 gallery!

[Boy]

You can replace the photo's and thumbnails simply by selecting each layer one at a time and drag and drop your photo from Windows Explorer to the large image. This will replace the supplied image with your own and update the thumbnail automatically.
(See Egg's video on how to do this)

Thanks a bunch, Steve, this is very useful! I found that you don't have to change the pictures layer by layer. Just drag & drop your pictures from Explorer to each of the thumbnails, but make sure that the mouse pointer is roughly in the middle of the thumbnail when you 'drop' (otherwise the picture is placed in the background). This makes customizing your picture template really easy.

[steve.ledger]

Yep either, or. Both methods work

[covoxer]

I am noticing that the "special" MouseOver and MouseDown designations are really not that special. Most work involves naming and linking to layers which do not have these words in them. I think the Xara Help intends to help authors organize their layers and does not affect whether the site works or not.

Just an observation.

Your observation is wrong. There are generally 2 kinds of "effect layers". We call them "Rollover layers" and "Popup layers". The popup layers can have any name and are recognized by the links to them in the popup fields of the web properties dialog (there are 2 of them: Link tab "Popup layer", and Mouse-over tab "Show popup layer").
The rollover layers are recognized automatically by their name, you don't need (and you can not) link to them, they work automatically, you just have to create such a layer, place it on the right position among other layers, and give it the name that starts with "MouseOver" (or MouseDown).

For more details please read the help.

[Ted D]

What size image files are you using?
Thanks, Ted D.

[steve.ledger]

Hi Ted,

The placeholder size determines the size of the thumbnail and larger image on export. WD does this automatically.
So it doesn't really matter what size image you start with, though it's best if they are at least the same size as the large placeholder (680x430 in my examples)
You can change the large placeholder dimensions to whatever you require.

[BQ]

Steve,
Very nice layout. Thanks!

Personally, I prefer the mouse-click better than mouse-over so I did a quick modification to your .web file. With the mouse-click option, I like how you can move to different pictures in different rows without other pictures in between displaying.