Last Updated:

Some Useful functions of JavaScript

The effect can occur in various variants, the most common of which are:

Table of Contents

Despite the outwardly different manifestation of these effects, they are all implemented in a similar way and differ only in small things. Let's take a look at each of these options in order.

Highlighting menu items

The most common implementation of the RollOver effect. Its basis is to replace the picture when you hover the mouse cursor and return to the original one after the mouse leaves it. This effect in action can be viewed here on this site.

To begin with, we will need to draw each menu button in two versions: in the "pressed" and "pressed" states. Let's assume that this has already been done, and let's move on to the mechanism that provides the functionality we need.

Let's start by writing the HTML code of the menu. It's not difficult and will look something like this:

<a href=""><img src="pic/pic-1.gif" name="pic1"></a><br>
<a href=""><img src="pic/pic-2.gif" name="pic2"></a><br>
<a href=""><img src="pic/pic-3.gif" name="pic3"></a>

This is a regular menu composed of graphic elements. I've omitted details that are not essential to understand- such as specifying the height and width of the image, alt tag, etc. Note, however, that for each picture there is a name attribute that will be needed to link to the image.

Now we'll modify the menu a bit by adding a call to the image change functions. To track how the mouse cursor hits the image, we'll use the onMouseOver event and bind the image change function call to it:

onMouseOver="change('pic1','pic/pic-1-on.gif');"

 

And to track the cursor leaving the image, the onMouseOut event will come to the rescue, which also calls the image change function, but with other parameters:

onMouseOut="change('pic1','pic/pic-1.gif');"

In the first case, we specify a link to the image of the "pressed button", and in the second, respectively, the "pressed" (or the original picture, which is the same thing).

Now let's write the whole structure on the example of one menu item:

<a href="page.htm" onMouseOver="change('pic1','pic/pic-1-on.gif');" onMouseOut="change('pic1','pic/pic-1.gif');" ><img src="pic/pic-1.gif" name="pic1"></a> 

 

Similarly, it is necessary to process each item of our menu. The only difference will be in changing the value of the name attribute, which must be unique for each item, and in correcting the parameter values in calls to the onMouseOver and onMouseOut functions accordingly.

Before we move on to writing code, let's talk about how we can manage the images on the page.

As I wrote in one of the earlier articles, the browser, before displaying the page on the screen, breaks it into its constituent blocks and enters them into its database, giving us access to information through the object model. In particular, all images are stored in the images object, which in turn is included in the document object. And, for example, in order to replace one image with another, we just need to use the following design:

document.images["pic1"].src = "pic/pic-1-on.gif";

Please note that for a link to a specific image (because there can be a lot of them on the page), we use the name of the image, which we specified in the name attribute of the tag

. In this example, we changed the image of a regular button to its "pressed" version.

<img>

In the same way, we can refer to other attributes of the picture: width, height, explanatory text (alt), etc. In our case, it will be enough to change only the link to the picture, because the images of the "normal" and "pressed" buttons have the same dimensions.

We already have all the necessary knowledge to write a function, so let's get started. Here's the JavaScript code that spoofs images. As parameters, we pass it the name of the picture and a link to the image of the "pressed" (or "pressed") button:

function change(img, ref) {
    if (browser_ok == 'true') {
        document.images[img].src = ref;
    }
}

 

The method of determining the type and version of the browser is described in detail in the first article of the series about JavaScript.

 

Running pointer

 

What is the difference between RollOver options with "highlighting menu items" and "running pointer"? Only because in the second case we have only two pictures used for all menu items - empty and with an image of the pointer. An example of using this effect can be found here.

In this version of RollOver, we'll have to slightly change the HTML that describes the menu, because before each menu item we add an image of a blank pointer:

<img src="pic/pointer.gif" name="pic1"><a href="news.htm" onmouseover="over('pic1');" onmouseout="out('pic1');" ><img src="pic/pic-1.gif"></a> 

 

Note a few features. First, instead of one image change function, we will need two, because the actions performed when the cursor hits the menu item area and leaves it are slightly different. We'll call these functions over() and out(), respectively. Second, note that the name attribute of the tag

<img>

moved from the description of the menu item to the description of the pointer - after all, now we do not highlight the menu, but the pointer!

 

The number of parameters passed to functions can be reduced - it is enough to limit ourselves to the name of the image (name attribute), because we know in advance the links to the images that form the pointer. The code that performs the necessary actions now looks like this:

function over(img) {
    if (browser_ok == 'true') {
        document.images[img].src = "pic/pointer-on.gif";
    }
}

function out(img) {
    if (browser_ok == 'true') {
        document.images[img].src = "pic/pointer.gif";
    }
}

It remains to deal with the differences that are inherent in the third version of the effect, namely...

Alternating picture

 

An example of the use of this effect can be observed directly on my own website.

Its difference from the previously considered options is that only one picture is used, which we change, but there are more than two replacement options. It should also be noted that the script can be called from one part of the page, and the picture change occurs in a completely different one.

As in the previous case, let's start by adjusting the HTML code. In this version, it will consist of two fragments: a description of the image that will change, and a description of the areas on which the script is called. This can be, for example, the same menu:

 <img src="pic/default.gif" name="pic"><br> ... <br> <a href="page_1.htm" onmouseover="over('pic/image-1.gif');" onmouseout="out();" > <img src="pic/pic-1.gif"> </a><br> <a href="page_2.htm" onmouseover="over('pic/image-2.gif');" onmouseout="out();" > <img src="pic/pic-2.gif"> </a><br> <a href="page_3.htm" onmouseover="over('pic/image-3.gif');" onmouseout="out();" > <img src="pic/pic-3.gif"> </a>

Accordingly, you will have to adjust the behavior of the functions. In the over() function, which is called as a result of the cursor hitting the hot spot, it is enough to pass only a reference to the replacement image. The out() function is called without parameters at all:

function over(ref) {
    if (browser_ok == 'true') {
        document.images[img].src = ref;
    }
}

function out() {
    if (browser_ok == 'true') {
        document.images[img].src = "pic/default.gif";
    }
}

So we figured out all the variants of scripts to implement the RollOver effect. But wait a little longer, because it remains to consider another very important question:

Preload images

I specifically singled out this point in a separate subsection, because it is very important and greatly affects the quality of the effect and the visual loading of the page.

What is image preloading for? The answer lies in the very mechanism of the Internet - as you know, any page consists of a set of files that are loaded simultaneously with the main page. But there is one feature - only pictures that are visible on the screen are loaded. Our effect is built on the substitution of images and, accordingly, some of the pictures are not visible when uploaded.

Preloading is that we pre-download invisible images to the computer's cache. If preload is not used, then when changing the picture there will be a noticeable delay - due to the fact that the picture will be downloaded directly from the server.

The mechanism for preloading images is carried out using the following code snippet:

if (browser_ok == 'true') { 
    a1=new Image; a1.src="pic/pic-1-on.gif";
    a2=new Image; a2.src="pic/pic-2-on.gif";
    a3=new Image; a3.src="pic/pic-3-on.gif";
}

We simply create an Image object for each currently invisible image and specify the address of the image. This leads to the fact that, having reached this code fragment, the browser initiates the loading of images in the same way as for ordinary visible images. By the end of the page loading, absolutely all the pictures that make it up are in the cache, and from this they will be loaded instantly.

In the above way, it is necessary to cache all the images invisible on the page. Note also that I'm checking the correctness of the browser, and in case it's an old enough version that doesn't support image changes, the extra graphics just won't load - thereby speeding up the page loading somewhat.

With proper slicing of the pages of the site, we can use part of the images of the first page in the internal ones. If you look closely at it, you will find that almost all the necessary graphics are loaded on the first page and the opening of the internal sections of the site occurs almost instantly. In particular, fragments of the logo of different colors and graphics that make up the menu items are already loaded.

I hope that the above scripts and the description of the mechanism of their work will seem useful to you and, using them, you will be able to realize your ideas.