|
|
|
|
|
|
| |||||
|
Graphic Effect's by Using Mouse Over Continued This is the continuation from the previous help page. It has been split in two due to the size of the text, and a few problems with page formatting that were causing my browser to crash repeatedly. These have been ironed out now. So here we go, more JavaScript Mouse Over effects - the conclusion! 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 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: 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: The result of all this is that the image named button1 will now react when the mouse passes over it. Examples of this can be seen all over the complex site. For example the buttons below. The text hyperlinks use stylesheets for the mouseover effects. These are very different to the JavaScript effects seen here. To find out more about using stylesheets, please goto 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!
|
