Low Bandwidth Rollovers: CSS Element Clipping

The only shape presently supported is a rectangle. If we wanted to only show a 100x120 pixel portion of our element 20 pixels in from the left and 40 from the top, our declaration would be:

Dynamic Clipping

In Navigator 4

To clip our image to show only the part corresponding to the second link, for example, we need only:

We do not need to reference or change clip.top or clip.bottom because they remain constant.

In Explorer 4

Explorer stores an object's clip property value in a single string, retaining the CSS format. For example, if our object's CSS clip declaration was:

Explorer adds the pixel identifier internally. We do not need to include it if we change the clip value. But, unlike Navigator, Explorer expects all four clip values.

Build the Clipping Script

To make life easier, we need to store the clipping values for the 7 links in a two-dimensional array so that our mapOver function can reference them:

Write a function that creates a second array off each array element and populates it as necessary. In this way, our code becomes modular and can be used in other cases with more or fewer elements.
The function accepts three arguments:
which: the link in our image map (an integer from 1 to 7);
from: the left clip value, and
to: the right clip value

To make our Explorer scripting more readable later, we store the constant top and bottom clip values in two variables:

In redefining our mapOver function, we must add an additional argument identifying which link should be highlighted (clipped). We will use this argument to reference our array. To minimize the nested ifs in the function, we now check immediately for a mouseout, hide the element and return. If it is a mouseover, we proceed by initializing variables for the left and right clip values, and then check for browser and execute the appropriate script.

And modify your map for the last time, adding values for the new first argument. eg. mapOver(1,true).