Glossy.js 1.4 allows you to add corners and shading and shadow to images on your webpages (alternatively: corner.js). 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. CVI-lab: Get a fast impression of the effects and their illustration qualities.

Setting Up

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

Using It

To make it glossy just add a class="glossy" to the image (minimum dimension: 16x16).

Classes

• Initialisation class "glossy"
• vary the radius by adding iradius followed by the desired radius in percent of half of the smaller picture dimension:
  Corner radius class "iradius25" - min=20 max=50 default=25
• vary the shadow by adding noshadow:
  Noshadow class "noshadow" - default=false
• vary the background by adding ibgcolor followed by the desired color as hex:
  Background color class "ibgcolor" - min=000000 max=ffffff default=0
• vary the background by adding igradient followed by the desired color as hex:
  Gradient color class "igradient" - min=000000 max=ffffff default=0
• vary the color gradient direction by adding horizontal:
  Horizontal gradient class "horizontal" - default=false
• 初期化クラスは「光沢があります。」
• より小さな絵次元の半分のパーセントで希望の半径が後続するiradiusを加えることにより、半径を変えてください:
  角半径クラス「iradius25」-min=20 max=50のデフォルト=25
• noshadowを加えることにより影を変えてください:
  Noshadowクラス「noshadow」-誤りのデフォルト=
• 魔力として希望の背景色クラスが後続するibg 背景色クラスを加えることにより、背景色クラスを変えてください:
  背景色クラス「ibgcolor」-min=000000 max=ffffffデフォルト=0
• 魔力として希望の勾配色クラスが後続するigradientを加えることにより、背景を変えてください:
  勾配色クラス「igradient」-min=000000 max=ffffffデフォルト=0
• 水平を加えることにより色勾配方向を変えてください:
  水平の勾配クラスは「水平です」-誤りのデフォルト=

Scriptingスクリプトを書くこと

If you want flexibility, use "cvi_glossy_lib.js" instead of "glossy.js". You can make your images respond to user actions (e.g. changing one or more options when the image is hovered over).柔軟性を望む場合は、「glossy.js」の代わりに「cvi_glossy_lib.js」を使用してください。ユーザ・アクション(例えばイメージがとどまられる場合、1つ以上のオプションを変更して)にイメージを応答させることができます。

Set defaults using Javascript

cvi_glossy.defaultRadius = 25; //INT 20-50 (%)
cvi_glossy.defaultColor = 0; //STR '#000000'-'#ffffff' or 0
cvi_glossy.defaultColor2 = 0; //STR '#000000'-'#ffffff' or 0
cvi_glossy.defaultGradient = 'v'; //STR 'd|h|v'-'diagonally|horizontal|vertical'
cvi_glossy.defaultShade = 50; //INT 20-66 (% opacity)
cvi_glossy.defaultShadow = 40; //INT 0-100 (% opacity)
cvi_glossy.defaultNoshadow = false; //BOOLEAN
cvi_glossy.defaultNoradius = false; //BOOLEAN

セット・デフォルト、Javascriptを使用

cvi_glossy.defaultRadius=25; //INT 20-50(%)
cvi_glossy.defaultColor=0; //STR'#000000'-'#ffffff」あるいは0
cvi_glossy.defaultColor2=0; //STR'#000000'-'#ffffff」あるいは0
cvi_glossy.defaultGradient=「v;」; //STR'd|h|v'-'diagonallyに|水平|垂直の'
cvi_glossy.defaultShade=50; //INT 20-66(%不透明)
cvi_glossy.defaultShadow=40; //INT 0-100(%不透明)
cvi_glossy.defaultNoshadow=誤り; //BOOLEAN
cvi_glossy.defaultNoradius=誤り; //BOOLEAN

 

 

　　　　Add images using Javascript 　

Javascriptを使用して、イメージを加えます

cvi_glossy.add(image, options);
image should be an image element: document.getElementById("myimg")
options can contain one or more values: {radius: value, shadow: value, shade: value, color: value, color2: value, gradient: value, noshadow: value, noradius: value}

　　　　　　　　　　　　　　　　　　　 {半径:値、影:値、陰:値、色:値、color2:値、勾配:値、noshadow:値、noradius:値}

Example:

cvi_glossy.add(document.getElementById("myimg"), { shadow: 75, shade: 20 });

例:

cvi_glossy.add(document.getElementById(「myimg」)および{影: 75、陰: 20});

Modify images using Javascript

cvi_glossy.modify(image, options);
If the image has already an effect but a option value has changed, the effect will be changed accordingly.

Example:

cvi_glossy.modify(document.getElementById("myimg"), { radius: 24 });

Remove effect from an image using Javascript

cvi_glossy.remove(image);

Demonstration

Shows some of the things "glossy.js" does.
    6 images with class = "glossy iradius50"

    Empty gif with class = "glossy ibgcolor00aa00 igradient00aaaa horizontal noshadow"

    3 images with class = "glossy"

Why use Javascript Image Glossy?

• Fast and easy to implement. Just add class="glossy" to the image and your good to go.
• Don't need to spend time in an image editor creating images with effects.
• 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 scriptable lib version cvi_glossy_lib.js

• Added support for img attributes:
  id alt title src onclick

• Added soft shadows for IE

• Added support for Internet Explorer 6/7

• Initial Release

License

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

Images used are copyrighted and are used for demonstration only.

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