Standard Mouse-Overs

Is it time for some fun now? Then let's try some multiple mouseovers! They aren't really any harder than regular mouseovers, there are just a few more things needed to accomplish the effect. Follow along and you'll be mousing in no time!

Would you like an example of a multiple mouseover? Place your mouse over the text links to change the color of the white truck, and watch the same color truck appear to the right of the links. That one is accomplished by using a transparent gif for the "off" image.

Truck     Green    Blue    Red    Truck

First of all, open a new site to play with this. If you haven't tried the single mouseover tutorial yet, do that now before you go on here.

To make remote mouseover images, in addition to the requirements of the single mouseover, you'll need two images (each) for each remote mouseover. Create those (or use any image pairs with identical width and height), and note their names and sizes. When you have your primary mouseover images, your first remote images (and second remote images if going that far) all together, visit the Multiple Mouse-Over Code Generator page, put in your data and get the code. When you have that, come back here and follow the instructions below to place them on your page. The code generated for the main mouseover is different, so using code generated by the single mouseover generator will not do anything with the remote images. You must use the main mouseover code generated by the Multiple Mouse-Over Code Generator for them to function properly.

How to apply a multiple-mouseover to your page

NOTE: These instructions are somewhat abbreviated.
These instructions assume you've learned something
from the single mouseover procedures.
  1. Drag an HTML Object on your page from the "Cool Stuff" gallery for each mouseover.
  2. Right-click to Properties, then the "Attached Files" tab of the HTML Object for the main mouseover.
  3. Click "Add Files To List", browse to all of your images and attach them as you have before. Attach all of your images in the main mouseover HTML Object - the two main images, the two first remote images, and the two second remote images (if you're using those). You'll see the images now shown in the list with a check mark next to them.
  4. Insert Place Holder Graphics for each mouseover ("off" images, as before - the main "off" image in the main HTML Object, "off" first remote image in its Object, etc.).
  5. Click the "HTML Content" tab of the main HTML Object. Insert the main mouseover code generated into that Object's Content window.
  6. Insert the first remote generated code into the first remote HTML Object, and the second remote code into the second remote's Object.
  7. Preview your site.

There are basically only four steps - dropping the Objects, attaching the images, setting the Place Holders, and inserting the generated code. Doesn't sound that hard, does it? It really isn't! If the information you entered in the code generator was correct, your mouseovers should function correctly. As mentioned before, if it doesn't work the likely reason is coding errors, which would be a result of errors made while entering data into the generator.

Still, if you have problems, just let me know. I'll likely want you to send me the ows (Web Studio) file and images you're using so I can take a look at what you've done first-hand.

Well, that's it - I hope your mouseover journey was a successful one!

Thanks for checking out the tutorial!

~ swipesy ~