| home / experts / dhtml / column2 |
  
|
|
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:
Clip properties are reflected into Netscape JavaScript as:
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.
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:
the property document.all.myObject.style.clip would store the string:
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.
Our second link clip would need this code in Explorer:
Try it, by placing your mouse anywhere on the menu:
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:
Declare the array:
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
Call the function, taking the clip values from the <AREA> tags:
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).
Once again, let's take all the code snippets that we have introduced, tighten them up, and see the complete code for our effect:
Produced by Peter Belesis and
Jupitermedia Corporation has two divisions: Jupiterimages and JupiterOnlineMedia
Legal Notices, Licensing, Reprints, Permissions, Privacy Policy.
Advertise | Newsletters | Tech Jobs | Shopping | E-mail Offers
All Rights Reserved. Legal Notices.
Created: 08/06/97
Revised: 10/16/97
URL: http://www.webreference.com/dhtml/column2/clipping.html
