Mouseover Images

**rberg** · 25 July 2009, 05:46 AM

Hi all - my name is Richard and I recently downloaded the trial version of XWD and am 9 days into my evaluation.

I have a website with digital editing tutorials and I would like to add a mouseover (before and after) effect at the top of the page so a visitor will have an idea of where the tutorial is going. I have it on a couple of pages now but the java (I think it is java) is making me nuts.

Is this do-able with XWD?

Also - I have been messing with the mouseover video and my efforts work but how the heck does one get that really cool effect onto a webpage?

I tried the Export to HTML and now have a confusing little folder with lots of stuff in it but I have no idea what to do with all that 'stuff'.

Thanks for any assistance ...!

Richard

**steve.ledger** · 25 July 2009, 06:12 AM

Welcome to the Forums Richard,

Richard remember one thing, Xara Web Designer is NOT a .html editor.
Once this is understood, many common problems with understanding the program can disappear.

MouseOvers (rollovers) are one of the simplest things to acheive in Web Designer - too easy really, but they don't require you to enter any javascript anywhere, they are applied directly via Web Designers layers.

My advice at this early stage of your journey is to read the manual, well... the Help File.
Look under the section: Layers, Mouseover (Rollover) & Pop-ups (go to the index tab in the help file and type 'Mouseover')

You will also find plenty of help already posted here (often repeated) regarding MouseOver buttons and effects which can be found using the Forum Search.

I tried the Export to HTML and now have a confusing little folder with lots of stuff in it but I have no idea what to do with all that 'stuff'.

If you are new to web site creation then I agree, this will not make a lot of sense right now, but stick with us and try not to take on too much on one session.
The learning curve is not that steep once you 'zone in'

**rberg** · 26 July 2009, 04:11 AM

Thanks for the reply Sledger.

Hopefully I will find what I want there ...

R+

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

I have a website with digital editing tutorials and I would like to add a mouseover (before and after) effect at the top of the page so a visitor will have an idea of where the tutorial is going. I have it on a couple of pages now but the java (I think it is java) is making me nuts.

Is this do-able with XWD?

Sure thing. Why not attach the .web file that you're currently working with to provide some idea of what you're trying to accomplish.

Also - I have been messing with the mouseover video and my efforts work but how the heck does one get that really cool effect onto a webpage?

Can you describe more specifically what the "cool effect" is that you're referring to?

I tried the Export to HTML and now have a confusing little folder with lots of stuff in it but I have no idea what to do with all that 'stuff'.

That (to me) is one of the very nice things about Web Designer -- you really don't have to know a lot about the exported files. Basically, what you'll get is a series of .htm files (one for each page in your project), and a single folder that neatly packages all of the necessary elements that are required to make those pages work properly in a browser.

**gwpriester** · 26 July 2009, 03:47 PM

R+

That confusing little folder is where your images, and style sheet and other items are put by Web Designer. The index.htm file, also created by Web Designer when you export your site, has references to the items in that folder.

For example if you have a photo of a horse on your site and the photo is named horse.jpg then the index.htm file has instructions for the visitor's browser that points to the index_htm_files folder.

**rberg** · 31 July 2009, 03:01 PM

Thanks for the reply - the fog is kind of lifting!

R

**rberg** · 31 July 2009, 03:11 PM

Hi Cursor - thanks for the reply.

At this point I am just trying to get the before/after mouseover to work so I am not working any particular page.

The "cool effect" is simply the before image on the page that changes to the after image on mouseover.

That means there will be two images involved - the original that will be replaced by the modified image. XWD seems to work well with the same image replacing itself as a popup but I have yet to figure out how to use two different images.

I shall keep plugging away - I still have two weeks on the trial and that is a good thing!

Your input is appreciated ...

Rich

**Ron Duke** · 31 July 2009, 04:42 PM

Hi Richard,
Welcome to TG.
I'm not sure if this is what you mean, but I've attached a very simplistic example of one drawing becoming another drawing on mouseover.

Hope I'm on the right track based on what you've described.

**rberg** · 31 July 2009, 09:34 PM

Wow - that is what I want!

Cool - now can I figure that out with my own images?

I will toil with it later ...

Thanks so much!

Richard

**cursor** · 31 July 2009, 10:52 PM

Alternatively, you might consider this (a different approach).

Instead of using the MouseOver layer (which works just fine, by the way), create a pop-up layer for each 'after' image that you want to display (on mouseover of a 'before' image). Make the appropriate assignment at the 'before' image's [b]Web Properties > Link (tab) > Popup layer [ layer name ].