Mouse-Overs Here are some sample image mouseovers for you.
(Just your basic images for example purposes)

Sample No. 1Spacer Sample No. 2Spacer Sample No. 3Spacer Sample No. 4Spacer Sample No. 5Spacer Sample No. 6Spacer Sample No. 7Spacer Sample No. 8

Here you are - a new, improved, easier way to add mouseovers to your pages ... the new generation of generators!

In this site you'll find two code generators - one for single mouseovers and another for multiple mouseovers. While each one will generate code to use, you'll also need to know what else you'll need to apply them properly. These pages will help you do that. This page deals with single mouseovers. You can find instructions for applying multiple mouseovers to your page via the site menu. You'll also find the old code tutorial, should you wish to learn how to code these things yourself.

For a standard, two-image mouseover, you'll need two images ("on" and "off") and some code to make it all work. The two images used for the mouseover must be the same width and height. Once you have the images, you'll need the code. That's where my mouseover code generators come in!

First, go to the code generator and generate your code. You'll need some information for the generator - the "on" and "off" images names (it's always best to have your images named with all lowercase letters!), the width and height of your images (remember, those are the same for each image), the page link to be used with the mouseover, an alternate message for when the visitor's mouse is over the mouseover image, and any status bar text you would like displayed on mouseover (that part is optional). With that information in hand, go to the code generator, plug in the information, get the code and save it to notepad. Come right back here and follow the instructions below to apply it to your page.

How to apply a mouseover to your page
  1. Drag an HTML Object on your page from the "Cool Stuff" gallery.
  2. Right-click to Properties, then the "Attached Files" tab.
  3. Click "Add Files To List", browse to your two images (one at a time, if necessary) and double-click. You'll see the image now shown in the list with a check mark next to it.
  4. Click the "Place Holder Graphic" tab.
  5. Click the "Load New Place Holder Graphic" button, browse to your "off" image and double-click.
  6. Click the "HTML Content" tab.
  7. Paste or insert the code you received from the generator in that window.
  8. Click "OK".
  9. Preview your site.

That's it! Your mouseover should be working. If it's not, make absolutely sure you entered the correct information in the generator - maybe even try to generate the code again and apply the new code. Just about 100% of the time, any problem experienced with mouseovers can be directly traced back to faulty code. If your code is faulty, then it's because you have either incorrectly entered your image/link/alt info, or haven't attached your images in the attached files, or even inserted the code in the HTML Content window. But don't worry - it's all been done before - myself included! Just double-check these steps to help determine the problem.

Remember, start with lowercase letters in the image name. This is not only important for your own system, but for your server as well. Servers are very picky about letters - a capital C is not the same as a lowercase c - even though it will probably not cause a problem with your own machine. That's why I advise sticking with all lowercase letters. if you must, use a dash. I've seen a lot of people use names such as "buttonON" and "buttonOFF". You can just as easily use "button-on" and "button-off", and you won't have to worry about capital letters (your server will like you better then too). This is not mandatory, but just take it from somebody who has been there and done that - I've been there and done that, and I can tell you it's much easier that way!

That's that - thanks for visiting!

~ swipesy ~