Graphic Effect's by Using Mouse Over
Stage 1: Introduction and the beginning
Where do we start though? Good question! The easiest place to begin is with the first part of the puzzle. Just how do we get one image to 'change' into another? Well it's not actually a change as such, it's more an exchange. The mouse over graphic effect is actually the replacement of one image with another. If the two images are identical apart from the colour, then it appears that the image has changed colour! So the first part of this little project, before looking at the script and implementing it, is the creation of the images to swap. I am not going to deal very heavily with this aspect, so it is worthwhile if you go out now and familiarise yourself with a decent graphics editing package. A good one is DrawPlus 4.0 which has loads of templates and other features for creating images. Then again, you could always use ready made clipart web images, such as the ones I have used. For these there are several good places. The Serif Webspice collection, Xoom.com a HUGE online resource of images as well as providing free webspace and email facilities and Corel are well worth looking at for ready made images. If you want to create your own, you can do far worse than Paint Shop Pro in one of it's many guises. This is an excellent graphics editing package that I use religiously for spruching up images and for resize or editing images. It has everything you'll need and more! The last thing is that the images should be transparent GIF's for the best effects!
Stage 1a: Ordering the Images
Presuming that you have all the images you wish to use for the effect, and also presuming ( I know this is a lot! ) that you labelled them something like 'button1on' or 'button3off' then we can begin. If you have not called the image files names like these, it may be wise to. It makes the whole thing a lot easier to deal with. To rename the files and are using a form of Windows first open 'Windows Explorer' and then simply 'Right-Click' on the file name, and select 'Rename' from the options. Give the file an easily identifiable name and add the extension of 'on' or 'off' to it. This distinguishes the files. The 'on' button is what is displayed when the mouse is hovering over the image, the 'off' button is the standard appearance.
You may want to sub-divide these images into an 'images' directory separate to the HTML pages, or separate to other images. I tend to prefer placing all my photo's, banner's, graphic's etc. into a folder called 'images' and then to put the files into further order by adding other folders such as 'buttons', 'photos' and other's. Use which ever method works for you. Just remember that once you have decided on your path it is usually VERY tedious to alter it!
Stage 2: The first section of Code
Now that we are sitting comfortably and have our images all nicely arrange in whatever method we want, ( I hope it's sensible! ) we can start to look at the code that is going to perform wondrous things to our website. The code can be placed anywhere in the HTML code, it does not necessarily have to be placed inside the "HEAD" tag. I have placed it there because it is the easiest place to group together all the essential parts. The first section of the code is the actual line telling the browser what the next section of the page is. This is achived by using the following:
< !-- -- >
The next piece of code immediately under the detection piece is one of the main parts. This section allows you to tel the code later on what to do with the images. This part labels the images within the HTML so that they can be switched over when necessary. Now before going any further it must be noted that EVERY images requires it's OWN section of code! You can not reuse this code for many images. Great! That's over, let's begin!
The following lines of code tell the script where the images are located, and what the images dimensions are. This covers both the highlighting images and the normal images. The code is:
OK, so what does it all mean? Well, the best way to tackle it is by looking at each bit separately. The first line to start with tells us that, the object 'button1on' is going to be a new image. The name, 'button1on', can be interchanged for anything you like. I personally find it easier to label the buttons in the order you intend to use them. So I label from 1 to whatever. You can use names if you like, just remember to continue to use the same name for each section of code. The next line 'button1on.src="...' specifies the location of the image file. In this case the image is located in the subfolder 'images' with the file name 'image name on.gif'. The next 2 lines simply define the parameters for the 'button1off' variable in exactly the same way as the last.
For each image that is to be used as a part of the mouse over effects, a separate parameter section is needed. Because of this you can end up with a lot of code just in identifing the images to be used. For an example of this see my source code for some of my pages! This help page continues on the next page...
N.B. This 'Next' page is different to the one below, which scrolls to the Info section! Sorry if this causes confusion!