Edge.js 1.3 allows you to add individual masks (inc. inbuilt mask) to images on your webpages. It uses unobtrusive javascript to keep your code clean.

It works in all the major browsers - Mozilla Firefox 1.5+, Opera 9+, Safari and IE6+. On older browsers, it'll degrade and your visitors won't notice a thing.

Setting Up

Download "edge.js" and include it into your webpage.

// only if you want to use mask images instead of the inbuilt
<script type="text/javascript">
var mask2load = new Array();
mask2load[0] = "masks/8bit/crippleedge.png";
mask2load[1] = "masks/8bit/frizzedge.png";
mask2load[2] = "masks/8bit/softedge.png";
// if you want IE to use mask images: add GIF versions
// of the same name to the array (edge.js will find them)
mask2load[3] = "masks/2bit/crippleedge.gif";
mask2load[4] = "masks/2bit/frizzedge.gif";
mask2load[5] = "masks/2bit/softedge.gif";
</script>
// else only this line...
<script type="text/javascript" src="edge.js"></script>

Using It

To get the masked picture edges just add a class="edges" to the image.

You'll find a few provided mask images
in low (2bit GIF format) "masks/2bit/" quality (required by IE)
and high (8bit PNG format) "masks/8bit/" quality.

softedge crippleedge frizzedge splatteredge waveedge
Create your own mask images for individual edge effects.

Classes

Scripting

If you want flexibility, use "cvi_edge_lib.js" instead of "edge.js". You can make your images respond to user actions (e.g. changing one or more options when the image is hovered over).

Set defaults using Javascript
cvi_edge.defaultMask = 0; //INT 0-n (mask number)
cvi_edge.defaultInbuilt = false; //BOOLEAN (inbuilt options below)
cvi_edge.defaultType = 'frame'; //STR 'f|l|r'-'frame|linear|radial'
cvi_edge.defaultAngle = 0; //INT 0|90|180|270 (degree) [linear only]
cvi_edge.defaultSize = 20; //INT 1-200 (px) [frame only]

Add images using Javascript
cvi_edge.add(image, options);
image should be an image element: document.getElementById("myimg")
options can contain one or more values: {mask: value, inbuilt: value, type: value, angle: value, size: value}
Example:
cvi_edge.add(document.getElementById("myimg"), { mask: 2 });

Modify images using Javascript
cvi_edge.modify(image, options);
If the image has already an effect but a option value has changed, the effect will be changed accordingly.
Example:
cvi_edge.modify(document.getElementById("myimg"), { size: 50, inbuilt: true }); cvi_edge.modify(document.getElementById("myimg"), { inbuilt: true, type: 'radial' });

Remove effect from an image using Javascript
cvi_edge.remove(image);

Demonstration

Shows some of the things "edge.js" does.

First 5 images with class = "edges imaskN" the two other images with class = "edges inbuilt"...

beautiful girl

Koblenz Wiesbaden Mainz Frankfurt Mannheim Heidelberg Würzburg Bamberg Nürnberg Karlsruhe Heilbronn Stuttgart Ulm Augsburg Baden map
 

Why use Javascript Image Masks?

In older browsers, the script degrades and your visitors won't notice a thing.

Restrictions

Opera do not support printing of canvas.

History

Version 1.3 Version 1.2 Version 1.1 Version 1.0