?? index.html
字號:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/strict.dtd"><html>
<head>
<title>Edge.js (with full IE 6/7 support)</title> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <meta http-equiv="Content-language" content="en"> <link rel="bookmark" type="text/html" title="Edge.js" href="http://www.netzgesta.de/edge/"> <meta name="Author" lang="en" content="edge.netzgesta.de - Christian Effenberger">
<meta name="Publisher" lang="en" content="www.netzgesta.de">
<meta name="Copyright" lang="en" content="www.netzgesta.de - Christian Effenberger">
<meta name="Generator" lang="en" content="Christian Effenberger"> <meta name="Description" lang="en" content="Edge.js 1.3 allows you to add individual masks (inc. inbuilt mask) to images on your webpages through unobtrusive javascript">
<meta name="Keywords" lang="en" content="edge.js,images,effect,alpha,mask,edges,unobtrusive javascript,Mozilla,Firefox,Opera,Safari">
<meta http-equiv="imagetoolbar" content="no"> <meta http-equiv="Content-Script-Type" content="text/javascript"> <script type="text/javascript"><!--// mask images referenced by numbervar mask2load = new Array();mask2load[0] = "masks/8bit/crippleedge.png";mask2load[1] = "masks/8bit/frizzedge.png";mask2load[2] = "masks/8bit/softedge.png";mask2load[3] = "masks/8bit/splatteredge.png";mask2load[4] = "masks/8bit/waveedge.png";mask2load[5] = "images/textedge.png";mask2load[6] = "images/glowedge.png";mask2load[7] = "images/textedge.gif";mask2load[8] = "images/glowedge.gif";mask2load[9] = "masks/2bit/crippleedge.gif";mask2load[10] = "masks/2bit/frizzedge.gif";mask2load[11] = "masks/2bit/softedge.gif";mask2load[12] = "masks/2bit/splatteredge.gif";mask2load[13] = "masks/2bit/waveedge.gif";--> </script> <script type="text/javascript" src="edge.js"></script> <meta http-equiv="Content-Style-Type" content="text/css"><style type="text/css">
a { color: blue; font-style:italic; text-decoration:none; }tt {color: green;}b {color: #993333;}
body { background: url(images/backgrnd.jpg) silver; color: black; font-family: Georgia,serif; line-height: 1.5; margin: 2em 2em;}
h2 { line-height: 1; }.demo { float: left; padding: 10px; }.logo { position: relative; width: 400px; height: 120px; white-space: nowrap;}#guru { padding: 4px; width: 99%; height: auto; text-align: center; background-color: black; }#guru div { border: solid 3px red; padding: 4px; font-family: monospace; font-size: 1.25em; width: auto; height: auto; color: red; text-align: center; text-decoration: blink; }#header { margin-bottom: 0; font-weight: normal; font-style: italic; color: gray; }.bookmarks { white-space: nowrap; width: 98%; margin: 0; padding-top: 10px; border-top: 1px dotted gray;}</style>
</head>
<body><noscript><div id="guru" title="By this you can recognize the Amiga fan!"><div><strong>Guru Meditation</strong> - With deactivated JavaScript: Images stay unmodified!</div></div></noscript><table><tr><td valign="top" style="padding-top: 0.5em"><div class="logo"><a class="nop" href="edge.zip" title="download edge.js"><img style="position: absolute; left: 0; top: 0; z-index: 0;" src="images/glow.gif" class="edges imask6" width="400" height="120" border="0" alt="edge"><img style="position: absolute; left: 0; top: 0; z-index: 1;" src="images/edge.jpg" class="edges imask5" width="400" height="120" border="0" alt="edge"></a></div></td><td style="padding: 0 0 0 15px; margin: 0; line-height: 1.5; font-style: italic;"><p><strong>Edge.js 1.3</strong> allows you to add individual masks (inc. inbuilt mask) to images on your webpages. It uses unobtrusive javascript to keep your code clean.</p><p>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.</p></td></tr></table><h2>Setting Up</h2><p>Download "edge.js" and include it into your webpage.</p><code>// only if you want to use mask images instead of the inbuilt<br><script type="text/javascript"><br>var mask2load = new Array();<br>mask2load[0] = "<tt>masks/8bit/crippleedge.png</tt>";<br>mask2load[1] = "<tt>masks/8bit/frizzedge.png</tt>";<br>mask2load[2] = "<tt>masks/8bit/softedge.png</tt>";<br>// if you want IE to use mask images: add GIF versions<br>// of the same name to the array (edge.js will find them)<br>mask2load[3] = "<tt>masks/2bit/crippleedge.gif</tt>";<br>mask2load[4] = "<tt>masks/2bit/frizzedge.gif</tt>";<br>mask2load[5] = "<tt>masks/2bit/softedge.gif</tt>";<br></script><br>// else only this line... <br><script type="text/javascript" src="<tt>edge.js</tt>"></script></code><h2>Using It</h2><p style="clear: left;">To get the masked picture edges just add a class="<tt>edges</tt>" to the image.</p><div class="demo"><small>You'll find a few provided mask images<br>in low (2bit GIF format) "<tt>masks/2bit/</tt>" quality (required by IE)<br>and high (8bit PNG format) "<tt>masks/8bit/</tt>" quality.</small><br><img src="images/softedge.jpg" width="80" height="80" border="0" title="mask: softedge" alt="softedge"><img src="images/crippleedge.jpg" width="80" height="80" border="0" title="mask: crippleedge" alt="crippleedge"><img src="images/frizzedge.jpg" width="80" height="80" border="0" title="mask: frizzedge" alt="frizzedge"><img src="images/splatteredge.jpg" width="80" height="80" border="0" title="mask: splatteredge" alt="splatteredge"><img src="images/waveedge.jpg" width="80" height="80" border="0" title="mask: waveedge" alt="waveedge"><br><small>Create your own mask images for individual edge effects.</small></div><p style="clear: left;"></p><h2>Classes</h2><ul><li>Initialisation class "<tt>edges</tt>"</li><li><small><em>vary the mask by adding imask followed by the maskimage <b>number</b>:</em></small><br>Mask image class "<tt>imask</tt>" - min=0 max=NumberOfLoadedMasks default=0</li><li><small><em>fallback mask creates soft edges without any external resource image:</em></small><br>Fallback class "<tt>inbuilt</tt>"</li><li><small><em>vary the size of the fallback mask by adding isize followed by the desired <b>size</b> in pixel:</em></small><br>Edge size class "<tt>isize</tt>" - min=0 max=HalfOfImageDimension default=10% of the picture dimension.</li></ul><h2>Scripting</h2><p>If you want flexibility, use "<b>cvi_edge_lib.js</b>" instead of "<b>edge.js</b>". You can make your images respond to user actions (e.g. changing one or more options when the image is hovered over).</p><dl> <dt><strong>Set</strong> defaults using Javascript</dt> <dd> <code> cvi_edge.defaultMask = 0; <tt>//INT 0-n (mask number)</tt><br> cvi_edge.defaultInbuilt = false; <tt>//BOOLEAN</tt> (inbuilt options below)<br> cvi_edge.defaultType = 'frame'; <tt>//STR 'f|l|r'-'frame|linear|radial'</tt><br> cvi_edge.defaultAngle = 0; <tt>//INT 0|90|180|270 (degree) [linear only]</tt><br> cvi_edge.defaultSize = 20; <tt>//INT 1-200 (px) [frame only]</tt> </code> <p></p> </dd> <dt><strong>Add</strong> images using Javascript</dt> <dd> <code>cvi_edge.add(<tt>image</tt>, <tt>options</tt>);</code><br><small> <tt>image</tt> should be an image element: document.getElementById(<b>"myimg"</b>)<br> <tt>options</tt> can contain one or more values: {<tt>mask</tt>: <b>value</b>, <tt>inbuilt</tt>: <b>value</b>, <tt>type</tt>: <b>value</b>, <tt>angle</tt>: <b>value</b>, <tt>size</tt>: <b>value</b>}</small>
<dl><dt>Example:</dt> <dd> <code>cvi_edge.add(document.getElementById(<b>"myimg"</b>), { <tt>mask</tt>: <b>2</b> });</code>
</dd></dl> <p></p> </dd> <dt><strong>Modify</strong> images using Javascript</dt> <dd> <code>cvi_edge.modify(<tt>image</tt>, <tt>options</tt>);</code><br> <small>If the image has already an effect but a <tt>option</tt> value has changed, the effect will be changed accordingly.</small><br> <dl><dt>Example:</dt> <dd> <code>cvi_edge.modify(document.getElementById(<b>"myimg"</b>), { <tt>size</tt>: <b>50</b>, <tt>inbuilt</tt>: <b>true</b> });</code>
<code>cvi_edge.modify(document.getElementById(<b>"myimg"</b>), { <tt>inbuilt</tt>: <b>true</b>, <tt>type</tt>: <b>'radial'</b> });</code>
</dd></dl> <p></p> </dd> <dt><strong>Remove</strong> effect from an image using Javascript</dt> <dd> <code>cvi_edge.remove(<tt>image</tt>);</code> <p></p> </dd></dl>
</div><h2>Demonstration</h2><p style="clear: left">Shows some of the things "edge.js" does.<small><br><br>First 5 images with class = "<tt>edges imaskN</tt>" the two other images with class = "<tt>edges inbuilt</tt>"...</small></p><div class="demo"><img class="edges imask1" src="images/girl.jpg" width="400" height="400" border="0" title="onClick event - mask: frizzedge" onClick="alert('Image dimension '+this.width+'x'+this.height);" alt=""></div><div class="demo"><img class="edges imask2" src="images/girl.jpg" width="160" height="160" border="0" title="onClick event - mask: softedge" onClick="alert('ALT=\''+this.alt+'\'');" alt="beautiful girl"><br><img class="edges imask3" src="images/girl.jpg" width="120" height="120" border="0" title="onClick event - mask: splatteredge" onClick="alert('ID='+this.id);" alt="" id="girl_image"><br><img class="edges imask4" src="images/girl.jpg" width="80" height="80" border="0" title="tooltip support - mask: waveedge" alt=""></div><p style="clear: left;"></p><div class="demo"><map name="gmap">
<area shape="rect" coords="11,10,59,29" href="http://www.koblenz.de/" alt="Koblenz">
<area shape="rect" coords="42,36,96,57" href="http://www.wiesbaden.de/" alt="Wiesbaden">
<area shape="rect" coords="42,59,78,80" href="http://www.mainz.de/" alt="Mainz">
<area shape="rect" coords="100,26,152,58" href="http://www.frankfurt.de/" alt="Frankfurt">
<area shape="rect" coords="27,113,93,134" href="http://www.mannheim.de/" alt="Mannheim">
<area shape="rect" coords="100,138,163,159" href="http://www.heidelberg.de/" alt="Heidelberg">
<area shape="rect" coords="207,77,266,101" href="http://www.wuerzburg.de/" alt="Würzburg">
<area shape="rect" coords="282,62,344,85" href="http://www.bamberg.de/" alt="Bamberg">
<area shape="rect" coords="255,132,316,150" href="http://www.nuernberg.de/" alt="Nürnberg">
<area shape="rect" coords="78,182,132,200" href="http://www.karlsruhe.de/" alt="Karlsruhe">
<area shape="rect" coords="142,169,200,193" href="http://www.heilbronn.de/" alt="Heilbronn">
<area shape="rect" coords="140,209,198,230" href="http://www.stuttgart.de/" alt="Stuttgart">
<area shape="rect" coords="187,263,222,281" href="http://www.ulm.de/" alt="Ulm">
<area shape="rect" coords="249,278,304,297" href="http://www.augsburg.de/" alt="Augsburg">
<area shape="poly" coords="48,311,105,248,96,210,75,205,38,234,8,310" href="http://www.baden-aktuell.de/" alt="Baden">
</map><img class="edges" src="images/karte.png" width="345" height="312" title="mask: crippleedge" alt="map" border="0" usemap="#gmap"></div><div class="demo"><img class="edges inbuilt" src="images/example.jpg" width="225" height="150" border="0" title="inbuilt masking" alt=""> <br><img class="edges inbuilt isize8" src="images/example.jpg" width="225" height="150" border="0" title="inbuilt masking with size 8px" alt=""></div><p style="clear: left;"></p><h2>Why use Javascript Image Masks?</h2><ul><li>Fast and easy to implement. Just add class="edges" to the image and your good to go.</li><li>Don't need to spend time in an image editor creating an image effect.</li><li>Works really well with forum avatars. Doesn't require additional server work.</li><li>It's dead easy to change the attributes of the images.</li><li>Free of charge use on non-commercial and private web sites.</li></ul><p>In older browsers, the script degrades and your visitors won't notice a thing.</p><h2>Restrictions</h2><p>Opera do not support printing of canvas.</p><h2>History</h2>Version 1.3<ul><li>Added masking support for Internet Explorer 6 (<em>GIF only</em>)</li><li>Added two more inbuilt masks (linear/radial) for <b>cvi_edge_lib.js</b></li></ul>Version 1.2<ul><li>Added scriptable lib version <b>cvi_edge_lib.js</b></li></ul>Version 1.1<ul><li>Advanced IE6/7 support</li></ul>Version 1.0<ul><li>Initial Release</li><li>Added support for Internet Explorer 6/7<br>(<tt>imask</tt> and <tt>isize</tt> is still missing)</li></ul><h2>License</h2><p>Edge.js is distributed under this <a href="LICENSE.txt">LICENSE</a>. License permits free of charge use on non-commercial and private web sites only. There are also <a href="mailto:cvi@netzgesta.de">Commercial Software Licenses</a> available.</p><p><strong>Images used are copyrighted and are used for demonstration only.</strong></p><p><a href="http://cvi.netzgesta.de/">cvi.netzgesta.de</a> also visit <a href="http://lab.netzgesta.de/">CVI-lab</a>, <a href="http://s5.netzgesta.de/">S5 Reloaded</a> and <a href="http://ajaxfilmdb.sourceforge.net/">AJAX-FilmDB</a></p>
</body>
</html>?? 快捷鍵說明
復制代碼
Ctrl + C
搜索代碼
Ctrl + F
全屏模式
F11
切換主題
Ctrl + Shift + D
顯示快捷鍵
?
增大字號
Ctrl + =
減小字號
Ctrl + -