Lesson 26- Taking rollover images one step further
generation technology
Ok, you're bored with working with JavaScript already. Well, lets change that, shaw we? With the advent of NS4.x and IE4.x, a whole new set of possibilities opened up for JavaScript developers, adding even more exciting capabilities to web documents. Web developers can now create animations that move around freely in a page, create dragable elements, validate form with great accuracy, create self updating pages, and more. This is achieved primarily through two features supported by 4th generation browsers:
JavaScript1.2
DHTML
Each of the two features are interconnected, so to fully master this new technology, both will have to be learned. If you're resistant to learn and explore new possibilities, I'm afraid I'm gonna have to sent you to section 15 again, how to make fire with sticks. We will now begin to explore some possibilities using 4th generation technologies...one important thing to realize is that since 4.x browsers has shipped, NS and IE has decided to go their separate ways as far as how this technology is implemented, so many features are not cross-browser. Don't worry, I'll clearly indicate that when the situation arises.
Rollover images are great, but they are what is considered now to be outdated technology. Using JavaScript1.2, we can make any image appear depressed when someone holds down the mouse button, and pop back up when they release it. Before, this may have to be achieved using Java.
Recall from tutorial 9 that we used what is called an event handler to create your standard rollover effect:
onMouseover=change image
onMouseout=change image back to original
Now, BOTH NS4.x and IE4.x support two additional events which make a depressible image possible:
| onMousedown | Use this to invoke JavaScript when the mouse is down |
| onMouseup | Use this to invoke JavaScript when the mouse is down-than up. |
Using these event handlers is like using any of the other ones we learned before, only this time, the effects are only visible in 4.x browsers.
The general idea of creating depressible images would be than:
onMousedown=change image
onMouseup=change image back to original
This is all we need to know to begin creating depressible images! Note that preloading images is still necessary, since we want the swapping of images to be instantaneous. Lets get on with it, shaw we?
IMPORTANT: If you are unfamiliar with creating rollover effects in general, you should read lessons 9 and 10 first!
If you're using NS 4.x or IE4.x, this image will "depress" when you click down on it.
<head>
<script>
//preload images first
img1=new Image()
img1.src="up.gif"
img2=new Image()
img2.src="down.gif"
</script>
</head>
<body>
<a href="whatever.htm" onMousedown="document.images['example'].src=img2.src"
onMouseup="document.images['example'].src=img1.src">
<img src="up.gif" name="example" border=0></a>
</body>
As you can see, there is nothing new here, except the two words "onMousedown" and "onMouseup"! Everything else is the same as what we've learned in lessons 9 and 10.
What about the filter issue, you ask? Well, in this case, we don't even need a filter! Why, you ask. This requires a little explaining.
Before NS4.x and IE4.x, no browser recognized "onMousedown" and "onMouseup". Since these two events are not recognized, and they are in general inserted directly in the <a> tag, browsers that do not recognize it will simply ignore it, as opposed to generate errors. The reason why we had to implement a filter when doing rollover effects was because IE3.x does recognize the "onMouseover" event; it just didn't support the swapping of images.
You are by no means limited to using these two new events only for creating depressible images. Use your creativity! Anytime you want something to happen upon holding down the mouse, you can use these event handlers!
Depressible
image links equal good design
While I'm not a big fan of fancy stuff, this time, its different.
Before depressible images, there were rollover effects, which, whether or not you know it,
was an attempt to lure the surfer to click on its links. However, since the effect takes
place when user's mouse moves over the links, and not upon clicking it, it usually fails
to achieve its goal, with surfers only moving their mouse over it, but not actually
clicking it. Creating depressible image links are a great enticement to get users to
explore deeper into your site, with minimal JavaScript coding. If you don't believe me,
just ask yourself how many times you have already clicked on that big juicy button...
