Mouse over tutorial

The tools you will need to complete this project:

Inkscape (download it here) when you click your download should start automatically ignore the form. You can use any image editing software you want I just prefer to use inkscape

On create there is a widget that allows you to place an image on a page and when your mouse rolls over it that image will change. This is a little gem to give your website that feeling an interaction and motion, you can use this widget to create buttons, item images in your shop, back and front of items and many more.

We will demonstrate just how easy this is to do with our tutorial. We will be showing you how to create a simple button with some text, and when you are finished you will be able to create your own buttons that look like they are being pressed when a person rolls their mouse over it.

Have a look below at a working example:

Step 1

Ok once you have downloaded and installed inkscape open it up and begin creating 2 rectangles and some text, for now just copy the image above.

Step 2

Once you have created your rectangles and text put them all together to look like the image above. What you will need to do is to resize the image to what ever size you need, what you can do is lasso all the layers and press ctrl-G this will group them and make it easier for you to manipulate it to the right size you want.

Once you are happy save this image as something you can recognise, I tend to name these kinds of images with text like button1, button 2 and so on and so on, it becomes easy to find and put in the right order when picking the image for the widget. So go ahead and name this button 2 as this will be the second image in your widget that gives the effect of being pressed flat.

Step 3

Ok once you have saved that image, what you need to do is a add a shadow to the button this a simple shadow effect and it will be the first image in the widget. It gives the feeling the button is hovering.

NOTE:

If you grouped the items in the last step to resize then you will need to undo that so you can apply the shadow effect to the first dark red rectangle and the text individually.

Once that is done and your happy save that as button 1.

Step 4

Once you have completed all the steps above, upload the images to your create images file and then create your mouse over widget.

Save it and then test it out on one of your pages to get the full effect.

If you have any problems you can contact me in the forum or you can drop me an email I will be happy to answer any questions.