Graphic Effect's by Using Mouse Over Continued
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:
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:
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
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:
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!
Now you should have on your HTML page all the basic code that is needed to produce a changing, effects button for a hyperlink. The code that should appear on the finished page will look something like the following, of course you need to remove the spaces between the tags. They are only there so that the HTML can be seen. Here is a start to the basic completed code:
N.B. This 'Next' page is different to the one below, which scrolls to the Info section! Sorry if this causes confusion!