|
|
|
|
|
|
    |
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:
button1on=new Image(110,50); 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!
Stage 3: The second section of code
Now we have all our images identified, we can look at the code that does the business so to speak! This little bit is the rather clever bit. The code swaps the end of the file name for the next. So, you have the 'on' section switched for the 'off' section. The effect of this is to replace the image. The section of code to deal with this is:
function rollIn(imgName) What do we have here then? Well, 'rollIn' is going to be our function that puts our new image over the old! How? Well, rollIn has the attribute of 'imgName'. This relates to the name which we will give the image tag later. It is important to realise that 'imgName' is a variable and HAS to be used. The next section the 'version' is a part of the earlier statement. This is the routine that is called when the browsers version is equal to this number. Next up is the important bit. Here we say that the files name is equal to a document name which has the property of the image name. What happens next is that the ending of the 'imgName' file is changed to the 'on' bit plus whatever the file extension is.
The next section is the code to remove the graphic. This is the reverse of the above section and is called 'rollOut'. The code section is:
function rollOut(imgName) This is exactly the same as the last section and simply removes the extension and adds 'off' to the file name. In that way we can have two files with only slightly different names and exchange them when certain things happen within the webpage.
OK, so we have all this, but how does it work in the page? How is the whole thing implemented?
Stage 4: Using the code within a webpage
Now we have finished our functions to change the graphics, we can use them with any hyperlink anchor tag, ( the < A HREF=... > tag ), and have a graphic that changes colour. We build this tag up in the usual way, starting with the 'a href' and then selecting our destination, for example, the next page in the series. Once we have this, we add a few extra things inside the tag, after the last " ( quotation mark ). You remember what we did on the last page? Well, we used the JavaScript effect of 'onMouseOver' and 'onMouseOut'. This is what the hyperlink code will look like:
< A HREF="a file.html" onMouseOver="rollIn('button1on')" onMouseOut="rollOut('button1off')" > < /A > What we have here is the 'onMouseOver' command being used with our function 'rollIn' and the 'onMouseOut' with the 'rollOut' function.
As you can probably see, the name we gave to our images to be used is now used here after the function. This tells the function to operate on that particular file. This is why you can not use one name for a lot of similar files. Each occurance of the rollIn or rollOut event must have a unique named target.
The last part of the hyperlink is the link to the image that is going to be used. It is very important to make sure that the 'NAME' attribute is also set. This is the name of the button as defined in the earlier strings of code. This name should match the two names for the rollIn and rollOut functions. The code is a little like this:
< IMG SRC="images/image name.gif" BORDER="0" ALT="Put your text here" NAME="button1on" > The NAME is the important thing to add here, as well as the BORDER tag. Without these the mouse over effect will 1) Not work, and 2) Will have nasty horrible borders all around your lovely neat image! And we don't want either of those things to happen at all! OK, now it's time to try and put all this together to make a working button that changes colour!
Stage 5: Putting it all together!
N.B. This 'Next' page is different to the one below, which scrolls to the Info section! Sorry if this causes confusion!
|
 |
 |
 |
 |