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.

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.

Create your own mask images for individual edge effects.

Classes

• Initialisation class "edges"
• vary the mask by adding imask followed by the maskimage number:
  Mask image class "imask" - min=0 max=NumberOfLoadedMasks default=0
• fallback mask creates soft edges without any external resource image:
  Fallback class "inbuilt"
• vary the size of the fallback mask by adding isize followed by the desired size in pixel:
  Edge size class "isize" - min=0 max=HalfOfImageDimension default=10% of the picture dimension.

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"...

 

Why use Javascript Image Masks?

• Fast and easy to implement. Just add class="edges" to the image and your good to go.
• Don't need to spend time in an image editor creating an image effect.
• Works really well with forum avatars. Doesn't require additional server work.
• It's dead easy to change the attributes of the images.
• Free of charge use on non-commercial and private web sites.

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

Restrictions

Opera do not support printing of canvas.

History

• Added masking support for Internet Explorer 6 (GIF only)
• Added two more inbuilt masks (linear/radial) for cvi_edge_lib.js

• Added scriptable lib version cvi_edge_lib.js

• Advanced IE6/7 support

• Initial Release
• Added support for Internet Explorer 6/7
  (imask and isize is still missing)

License

Edge.js is distributed under this LICENSE. License permits free of charge use on non-commercial and private web sites only. There are also Commercial Software Licenses available.

Images used are copyrighted and are used for demonstration only.

cvi.netzgesta.de  also visit  CVI-lab, S5 Reloaded and AJAX-FilmDB