One of the most popular 'wow' items that’s popping up all over the World Wide Web is the mouseover. In its simplest form, the mouseover is some part of a Web page that causes a change in the page display when the user’s mouse passes over it. More and more creative uses for mouseovers show up all the time, from providing visual cues to the meanings of links on a page, to adding full, fly-out, cascading menu systems in DHTML (see for a good example of this). Mouseovers first became technically possible with the release of Netscape Navigator 2.0, which included a new scripting language called JavaScript. The idea was to allow the Web to transcend for the first time the basic functionality of HTML. With JavaScript, Web developers were able to do more than just jump to a new location when a user clicked on a hypertext link — they could actually modify the contents of the currently-loaded page. When Microsoft released their own Web browser, Microsoft Internet Explorer 3.0, they included their own variation on the theme — JScript. Recently Microsoft and Netscape have agreed to settle on a vendor-neutral standard, which is being developed by the European Computer Manufacturers Association under the name ECMAscript. As standards in this area converge, the use of scripting on the Web is becoming more feasible. The swell in popularity of the script-powered mouseover (as opposed to the comparatively slow and clunky Java implementations that were popular for a brief time) is a testament to the usefulness of JavaScript and its kin. The Image Object. How to create buttons with Adobe Animate. You can create invisible buttons, buttons with animated states, and buttons with rollover effects. I'd like to activate the buttons rollover state when i rollover the image. -gifs-videos -aww. Activate a buttons rollover state when i rollover an image that. Oct 16, 2013. Animated GIF images are popular on the Internet because they can be easily shared and consumed rather quickly. Using basic HTML you can embed images into a page which feature animation, without relying on any other technologies. Granted – there are plugins for animating sprites or backgrounds. JavaScript - Animated Gif On Rollover - Free JavaScript Tutorials, Help, Tips, Tricks, and More. How to Code a Hover-to-Animate GIF Image Gallery. Animated GIF images are popular on the Internet because they can be easily shared and consumed rather quickly. Strictly speaking, you don’t need to know any JavaScript to understand this article, as everything is explained from the ground up. However, if you haven’t had much programming experience and don’t know any JavaScript at all, you might want to read SitePoint’s if it really starts to look to you like I’m writing in Greek. In most respects, JavaScript is an object-oriented language, which means that in the world of JavaScript, everything is an object. A browser window is an object (referred to as the window), a Web page is an object (the document) and the images in the Web page are objects in their own right. The nice thing about objects is that they have properties that you can change. If you are familiar with the basics of HTML (check out our if you’re not), you’ll be used to the concept that you can create an image object on a Web page using the tag: Now, without knowing it, when you type this, you automatically create a JavaScript image object, which will allow you to change its properties later on if you like. This is exactly what we want to do to create a mouseover. When the mouse moves over the image we want to change what the image looks like, and what the image looks like is a property of the image object. To simplify referring to this particular image object later on, we can assign it a name. This is pretty easy to do, and just requires us adding the NAME attribute to our tag. Now our image object is named ' myimage', and can be referred to as such. At this point, it’s worth pointing out that JavaScript is largely case sensitive. In other words, our image named ' myimage' cannot be referred to as ' MYIMAGE' or ' MyImage'. I’ve said that objects in JavaScript have properties that we can change. We can set a property of our ' myimage' object with the following general JavaScript statement: document.images['myimage'].property = newvalue. Where property is the name of the property you want to change, and newvalue is the new value you are assigning it. This line can be read: 'In the current document, in the image called ' myimage', set property to newvalue.' By now I’m sure you’re itching to know how to apply this to the humble mouseover. Well in a mouseover, we change the image displayed by the image object. Just as in HTML, where we use the SRC attribute of the tag to indicate the URL of the image file we want to display, in JavaScript we set the src property of the image object to the URL of the image file we want it to display. Using the general JavaScript statement I showed you above, this is written simply: document.images['myimage'].src = 'newimage.gif'. How Mouseovers Work Now that you know how to change an image’s appearance using JavaScript, we need to figure out how to do this when the user places the cursor over the image. Also, we need to know how to switch it back again when the user’s mouse isn’t over the image anymore. The feature of JavaScript that allows us to do this is called event handlers. Event handlers can be thought of as 'triggers' that cause things to happen when a certain condition is met. The two event handlers that interest us when it comes to Mouseovers are onMouseOver and onMouseOut. These allow you to define certain pieces of JavaScript to be run whenever the user’s mouse hovers over or passes out of a given HTML element. Preloading Images Most Web browsers these days are pretty smart. When they load something, they put it into a cache on your system where it will remain for a little while for quick and easy access in case it’s needed again. Most browsers aren’t smart enough to load things ahead of time, though. In most cases, this isn’t a big problem, but when it comes to mouseovers it can be an unsightly weakness. When a user places the cursor over one of your mouseovers, the Web browser will realize it needs to display the 'on' image. If this is the first time this user accesses your site, chances are that image isn’t in the cache, and must be loaded from your site. This causes a delay that can often be longer that it takes for the user to have moved the mouse back off the mouseover, having never seen that pretty light-up button you’d planned to display. Worse, if the 'on' image is only partially loaded, the user may see a horrible, blurry mess in the place of the slick image you’d planned.
0 Comments
Leave a Reply. |
AuthorWrite something about yourself. No need to be fancy, just an overview. Archives
March 2018
Categories |