Rollover Buttons with Java. Script. Tutorial by Matt Doyle . If you're not sure what I'm talking about, move your mouse over this baby: Get the idea? Where to use 'em. Rollover images are great whenever you want to make it obvious that the user should click on them (for example, buttons and menus). Where not to use 'em. In the bath. OK wise guy - how's it done? Well it all hangs around Java. Script's Image class. Let's look at how we did the rollover button above, to help us understand this class.
The first thing we need to do is create two images - one for the . We do this with the new Image() constructor, which creates the two Image objects. To make this easy to do, we've created a couple of functions to handle the actual image changing. That way, you can just call the same functions for each of your buttons, without having to duplicate lots of code. Here are those functions, called button. That's just our convention; change it to something else if you like, but remember to change the Image object names in all parts of the script! The two functions are nearly identical. Both take the Image object specified by img. Id, which is the ID we will give the button in the img tag (in this case ! What are all these different images? There are three Image objects at work here: eg. The actual image in the HTML page (see below); initially it points to . Easy! Does the browser support rollovers? Nearly all modern browsers support rollover images, but it's wise to check this before trying to manipulate images. Interactive Rollovers in Adobe ImageReady. ImageReady is an awfully underutilized program for developing. VantageCare Employer Investment Program; Consultant Resources. Information for Consultants; Center for Excellence; Why ICMA-RC is the Right. BREAKING DOWN 'Rollover' Rollovers often occur as a way of making money for a specific purpose, such as immediate income from day trading, or for saving on taxes. If we don't do a check, then browsers that can't do rollovers will throw an error. We make this check in the code above using the line. This checks for the existence of an images array in the browser's document object. If it's there, we know the browser supports image manipulation. The HTML bit. The last piece of the puzzle is to make the call to our Java. Script functions from within the HTML itself. To do this, we need to have an active link (an < a> tag) around our rollover button. As our button doesn't need to link anywhere, we link it to # (an empty anchor). Within the quotes, we make a call to the appropriate image- changing function - button. Notice that we include the ID of the image object that we want to change ('eg') in the function calls. Last - but by no means least - the button image is given an ID using the attribute id=. This ID is very important, as it is used by the button. When using many rollovers in one page, make sure you use a different image ID for each button! Go for it! Now you should be able to take the above code and use it to make your own rollover images. You can make as many rollovers as you like in one page - just remember to give each one a unique id, and to call the functions button? Post a response. To post responses you need to be a member. Signing up is free, easy and only takes a minute. Sign up now. Top of Page.
0 Comments
Leave a Reply. |
Details
AuthorWrite something about yourself. No need to be fancy, just an overview. Archives
December 2016
Categories |