Shows some of the things edge.js does.

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

 

Images used are copyrighted and are used for demonstration only.

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>

To get the masked picture edges just add a class="edge" 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.

• Initialisation class "edge"
• 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.

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"), { mask: 0, inbuilt: false }); cvi_edge.modify(document.getElementById("myimg"), { inbuilt: true, type: 'radial' });

Remove effect from an image using Javascript

cvi_edge.remove(image);

• Fast and easy to implement. Just add class="edge" 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.

Please read the License before you download edge.js 1.3

Please read the Frequently Asked Questions before you contact the author.

Version 1.3

• 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)

Please leave any comments at this contact formular.

edge.js and cvi_edge_lib.js are distributed under the Netzgestade Non-commercial Software License Agreement.
License permits free of charge use on non-commercial and private web sites only under special conditions (as described in the license). This license equals neither "open source" nor "public domain". There are also Commercial Software Licenses available.

YOU AGREE TO ALL CONDITIONS OF THIS LICENCE AGREEMENT CONCERNING THE USE OF THE SOFTWARE BY ACCEPTING THIS LICENCE.
IF YOU DO NOT AGREE TO ALL CONDITIONS OF THIS AGREEMENT, YOU SHALL NOT INSTALL THE SOFTWARE, OR USE IT IN OTHER WAYS.