|
|
|
|
|
|
|
| |||||
|
Graphic Effect's by Using Mouse Over Previously we looked at how to use a mouse over effect to enhance the normal hyperlink. Now we are going to look at how to use JavaScript to create a mouse over effect that changes the graphic displayed. This is best observed if you move the mouse over the images on this page. How is this done? Well, perhaps it's first best to say that I am NOT a JavaScript expert, and this is my OWN views and interpretation of what goes on! So all those out there who may want to correct me, just remember that! And another thing, this JavaScript actually came from the id Software Website. It took some time to figure out what was going on, but now I think I have the gist of it! ( Well hopefully! ) 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: < script language="JavaScript" > What comes next is very important. There are still many browsers out there that can not deal with JavaScript, so to avoid those people from seeing lines of rubbish and mess on their browsers the WHOLE of the JavsScript section HAS to inside a set of 'comment' tags. The comment tags appear like this: < !-- -- > Remember to remove the spaces before the first pair of dashes and the last pair of dashes! What this does is effectively comment out the code if the browser can not understand it. Simple yet an effective solution to a potential problem. Next comes a rather novel piece of code. What this does is effectively tell the browser to search for the internet browser version, and then to execute various things depending on the found version. In this case the decision is whether or not to execute at all! If you are using this code be sure to copy it EXACTLY as it appears in the source. JavaScript is case sensitive and also punctuation sensitive. For the purposes of keeping this page reasonably short, I am not going to show this code. You can view it by selecting the 'View Source' or 'Frame Source' options on your browser. 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!
|
