Библиотека Javascript. SE@RCHER

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html> <head> <title>Фото с оригинальным обрамлением (нижний угол загнут) От клика цвет загиба меняется</title> <META http-equiv=Content-Type content="text/html; charset=windows-1251"> <meta http-equiv="imagetoolbar" content="no"> <style type="text/css"> a { color: blue; font-style:italic; text-decoration:none; } tt {color: green;} b {color: #993333;} body { background: url(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; } #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> <script type="text/javascript"> function clipCurl(ctx,x,y,w,h,r,i) { ctx.beginPath(); ctx.moveTo(x,h); ctx.quadraticCurveTo(x+r,h,x+r,h-r); ctx.quadraticCurveTo(x+r,y+(2*r),x,y); ctx.quadraticCurveTo(x+(2*r),y+r,w-r,y+r); ctx.quadraticCurveTo(w,y+r,w,y); ctx.quadraticCurveTo(w,y+(r/2),w-(r-i),y+i); ctx.lineTo(x+i,h-(r-i)); ctx.quadraticCurveTo(x+(r/2),h,x,h); ctx.closePath(); } function clipReversCurl(ctx,x,y,w,h,r,i) { ctx.beginPath(); ctx.moveTo(0,0); ctx.lineTo(0,h); ctx.lineTo(x,h); ctx.quadraticCurveTo(x+r,h,x+r,h-r); ctx.quadraticCurveTo(x+r,y+(2*r),x,y); ctx.quadraticCurveTo(x+(2*r),y+r,w-r,y+r); ctx.quadraticCurveTo(w,y+r,w,y); ctx.lineTo(w,0); ctx.closePath(); } function clipInversCurl(ctx,x,y,w,h,r,i) { ctx.beginPath(); ctx.moveTo(w,y); ctx.quadraticCurveTo(w,y+(r/2),w-(r-i),y+i); ctx.lineTo(x+i,h-(r-i)); ctx.quadraticCurveTo(x+(r/2),h,x,h); ctx.lineTo(w,h); ctx.closePath(); } function clipCurlShadow(ctx,x,y,w,h,r,i) { ctx.beginPath(); ctx.moveTo(w,y); ctx.quadraticCurveTo(w,y+(r/2),w-(r-i),y+i); ctx.lineTo(x+i,h-(r-i)); ctx.quadraticCurveTo(x+(r/2),h,x,h); ctx.lineTo(w,h); ctx.closePath(); } function curlShadow(ctx,s,r,i,o) { var style; var f = 1.27; style = ctx.createRadialGradient(i,r,0,i,r,i); style.addColorStop(0,'rgba(0,0,0,'+o+')'); style.addColorStop(1,'rgba(0,0,0,0)'); ctx.fillStyle = style; ctx.beginPath(); ctx.rect(0,i,r,i); ctx.closePath(); ctx.fill(); style = ctx.createLinearGradient(0,0,r,0); style.addColorStop(0,'rgba(0,0,0,0)'); style.addColorStop(0.5,'rgba(0,0,0,'+o+')'); style.addColorStop(1,'rgba(0,0,0,0)'); ctx.fillStyle = style; ctx.beginPath(); ctx.rect(0,i+i,r,(s*f)-i-i); ctx.closePath(); ctx.fill(); style = ctx.createRadialGradient(i,(s*f),0,i,(s*f),i); style.addColorStop(0,'rgba(0,0,0,'+o+')'); style.addColorStop(1,'rgba(0,0,0,0)'); ctx.fillStyle = style; ctx.beginPath(); ctx.rect(0,(s*f),r,i); ctx.closePath(); ctx.fill(); } function hextorgb(val) { function hex2dec(hex){return(Math.max(0,Math.min(parseInt(hex,16),255)));} var cr=hex2dec(val.substr(1,2)),cg=hex2dec(val.substr(3,2)),cb=hex2dec(val.substr(5,2)); return 'rgb('+cr+','+cg+','+cb+')'; } var cvi_curl = { defaultSize : 20, defaultShadow : 66, defaultColor : 0, defaultInvert : false, defaultFilter : null, defaultCallback : null, add: function(image, options) { if(image.tagName.toUpperCase() == "IMG") { var defopts = { "size" : cvi_curl.defaultSize, "shadow" : cvi_curl.defaultShadow, "color" : cvi_curl.defaultColor, "invert" : cvi_curl.defaultInvert, "filter" : cvi_curl.defaultFilter, "callback" : cvi_curl.defaultCallback } if(options) { for(var i in defopts) { if(!options[i]) { options[i] = defopts[i]; }} }else { options = defopts; } var imageWidth = ('iwidth' in options) ? parseInt(options.iwidth) : image.width; var imageHeight = ('iheight' in options) ? parseInt(options.iheight) : image.height; try { var object = image.parentNode; if(document.all && document.namespaces && !window.opera) { if(document.namespaces['v']==null) { var e=["shape","shapetype","group","background","path","formulas","handles","fill","stroke","shadow","textbox","textpath","imagedata","line","polyline","curve","roundrect","oval","rect","arc","image"],s=document.createStyleSheet(); for(var i=0; i<e.length; i++) {s.addRule("v\\:"+e[i],"behavior: url(#default#VML);");} document.namespaces.add("v","urn:schemas-microsoft-com:vml"); } var display = (image.currentStyle.display.toLowerCase()=='block')?'block':'inline-block'; var canvas = document.createElement(['<var style="zoom:1;overflow:hidden;display:' + display + ';width:' + imageWidth + 'px;height:' + imageHeight + 'px;padding:0;">'].join('')); var flt = image.currentStyle.styleFloat.toLowerCase(); display = (flt=='left'||flt=='right')?'inline':display; canvas.options = options; canvas.dpl = display; canvas.id = image.id; canvas.alt = image.alt; canvas.name = image.name; canvas.title = image.title; canvas.source = image.src; canvas.className = image.className; canvas.style.cssText = image.style.cssText; canvas.height = imageHeight; canvas.width = imageWidth; object.replaceChild(canvas,image); cvi_curl.modify(canvas, options); }else { var canvas = document.createElement('canvas'); if(canvas.getContext("2d")) { canvas.options = options; canvas.id = image.id; canvas.alt = image.alt; canvas.name = image.name; canvas.title = image.title; canvas.source = image.src; canvas.className = image.className; canvas.style.cssText = image.style.cssText; canvas.style.height = imageHeight+'px'; canvas.style.width = imageWidth+'px'; canvas.height = imageHeight; canvas.width = imageWidth; object.replaceChild(canvas,image); cvi_curl.modify(canvas, options); }} } catch (e) { }} }, modify: function(canvas, options) { try { var size = (typeof options['size']=='number'?options['size']:canvas.options['size']); canvas.options['size']=size; var shadow = (typeof options['shadow']=='number'?options['shadow']:canvas.options['shadow']); canvas.options['shadow']=shadow; var color = (typeof options['color']=='string'?options['color']:canvas.options['color']); canvas.options['color']=color; var invert = (typeof options['invert']=='boolean'?options['invert']:canvas.options['invert']); canvas.options['invert']=invert; var filter = (typeof options['filter']=='object'?options['filter']:canvas.options['filter']); canvas.options['filter']=filter; var callback = (typeof options['callback']=='string'?options['callback']:canvas.options['callback']); canvas.options['callback']=callback; var isize = size==0?0.33:size/100; var ishadow = shadow==0?0.66:shadow/100; var icolor = 0; if(isNaN(color)) {icolor = hextorgb(color);} var ih = canvas.height; var iw = canvas.width; var cs = Math.floor(Math.min(iw,ih)*isize); var or = Math.floor(cs*0.15); var hr = Math.floor(or*0.5); var ir = Math.floor(or*0.8); var vr = Math.floor(or*0.25); var qr = Math.round(vr*0.25); var st = ''; var t; var ss = Math.floor(or*0.3); var xr = Math.floor(or*0.75); var yr = Math.floor(or*0.4); var hs = Math.floor(cs*0.5); var vs = Math.floor(cs*0.25); var dg = (Math.PI*90/180); var head, foot, shadow='', shade='', shine='', back='', fill='', strok=''; if(document.all && document.namespaces && !window.opera) { if(canvas.tagName.toUpperCase() == "VAR") { head = '<v:group style="zoom:1;display:'+canvas.dpl+';margin:0;padding:0;position:relative;width:'+iw+'px;height:'+ih+'px;" coordsize="'+iw+','+ih+'"><v:rect strokeweight="0" filled="t" stroked="f" fillcolor="#ffffff" style="zoom:1;padding:0;position:absolute;top:0px;left:0px;width:'+iw+'px;height:'+ih+'px;"><v:fill color="#ffffff" opacity="0.0" /></v:rect>'; if(invert) { shadow = '<v:shape strokeweight="0" filled="t" stroked="f" fillcolor="#808080" coordorigin="0,0" coordsize="'+iw+','+ih+'" path="m 0,'+ih+' l '+(iw-cs+yr)+','+ih+' c '+(iw-cs+yr)+','+ih+','+(iw-cs+yr)+','+ih+','+(iw-cs+xr)+','+(ih-vr)+' l '+(iw-vr)+','+(ih-cs+xr)+' c '+iw+','+(ih-cs+yr)+','+iw+','+(ih-cs+yr)+','+iw+','+(ih-cs)+' l '+iw+',0,'+iw+','+ih+' x e" style="position:absolute;top:0px;left:0px;width:'+iw+'px;height:'+ih+'px;"><v:fill src="'+canvas.source+'" type="frame" /></v:shape>'; back = '<v:shape strokeweight="0" filled="t" stroked="f" fillcolor="#000000" coordorigin="0,0" coordsize="'+cs+','+cs+'" path="m '+hr+','+(cs-hr)+' l '+hr+','+(cs-hr-hr)+','+(cs-hr-hr)+','+hr+','+(cs-hr)+','+hr+' x e" style="position:absolute;top:'+(ih-cs+qr)+'px;left:'+(iw-cs+qr)+'px;width:'+cs+'px;height:'+cs+'px;filter:Alpha(opacity='+(ishadow*136)+'), progid:dxImageTransform.Microsoft.Blur(PixelRadius='+ss+',MakeShadow=false);"><v:fill color="#000000" /></v:shape>'; }else { back = '<v:shape strokeweight="0" filled="t" stroked="f" fillcolor="#808080" coordorigin="0,0" coordsize="'+iw+','+ih+'" path="m 0,0 l 0,'+ih+' c '+(iw-cs+yr)+','+ih+','+(iw-cs+yr)+','+ih+','+(iw-cs+xr)+','+(ih-vr)+' l '+(iw-vr)+','+(ih-cs+xr)+' c '+iw+','+(ih-cs+yr)+','+iw+','+(ih-cs+yr)+','+iw+',0 x e" style="position:absolute;top:0px;left:0px;width:'+iw+'px;height:'+ih+'px;"><v:fill src="'+canvas.source+'" type="frame" /></v:shape>'; shadow = '<v:shape strokeweight="0" filled="t" stroked="f" fillcolor="#000000" coordorigin="0,0" coordsize="'+cs+','+cs+'" path="m '+hr+','+(cs-hr)+' l '+hr+','+hr+','+(cs-hr)+','+hr+' x e" style="position:absolute;top:'+(ih-cs+qr)+'px;left:'+(iw-cs+qr)+'px;width:'+cs+'px;height:'+cs+'px;filter:Alpha(opacity='+(ishadow*136)+'), progid:dxImageTransform.Microsoft.Blur(PixelRadius='+ss+',MakeShadow=false);"><v:fill color="#000000" /></v:shape>'; } if(isNaN(icolor)||invert>0) { icolor = (!isNaN(icolor)?"#808080":icolor); fill = '<v:shape strokeweight="0" filled="t" stroked="f" fillcolor="#808080" coordorigin="0,0" coordsize="'+cs+','+cs+'" path="m 0,0 c '+ir+','+vs+','+or+','+hs+','+or+','+(cs-or)+' qy 0,'+cs+' c '+yr+','+cs+','+yr+','+cs+','+xr+','+(cs-vr)+' l '+(cs-vr)+','+xr+' c '+cs+','+yr+','+cs+','+yr+','+cs+',0 qy '+(cs-or)+','+or+' c '+hs+','+or+','+vs+','+ir+',0,0 x e" style="position:absolute;top:'+(ih-cs)+'px;left:'+(iw-cs)+'px;width:'+cs+'px;height:'+cs+'px;"><v:fill color="'+icolor+'" /></v:shape>'; shine = ''; strok = ''; }else { if(iw>ih) {f=(ih/iw); t=(1-f)+((1-isize)*f); l=1-isize;}else if(ih>iw) {t=1-isize; f=(iw/ih); l=(1-f)+((1-isize)*f); }else {t=1-isize; l=1-isize;} fill = '<v:shape strokeweight="0" filled="t" stroked="f" fillcolor="#808080" coordorigin="0,0" coordsize="'+cs+','+cs+'" path="m 2,2 c '+ir+','+vs+','+or+','+hs+','+or+','+(cs-or)+' qy 0,'+cs+' c '+yr+','+cs+','+yr+','+cs+','+(xr+1)+','+(cs-vr+1)+' l '+(cs-vr+1)+','+(xr+1)+' c '+cs+','+yr+','+cs+','+yr+','+cs+',0 qy '+(cs-or)+','+or+' c '+hs+','+or+','+vs+','+ir+',2,2 x e" style="rotation:180; filter:fliph() progid:DXImageTransform.Microsoft.BasicImage(rotation=1);position:absolute;top:'+(ih-cs)+'px;left:'+(iw-cs)+'px;width:'+cs+'px;height:'+cs+'px;"><v:fill src="'+canvas.source+'" origin="'+t+','+l+'" type="tile" /></v:shape>'; shine = '<v:shape strokeweight="0" filled="t" stroked="f" fillcolor="#808080" coordorigin="0,0" coordsize="'+cs+','+cs+'" path="m 0,0 c '+ir+','+vs+','+or+','+hs+','+or+','+(cs-or)+' qy 0,'+cs+' c '+yr+','+cs+','+yr+','+cs+','+xr+','+(cs-vr)+' l '+(cs-vr)+','+xr+' c '+cs+','+yr+','+cs+','+yr+','+cs+',0 qy '+(cs-or)+','+or+' c '+hs+','+or+','+vs+','+ir+',0,0 x e" style="position:absolute;top:'+(ih-cs)+'px;left:'+(iw-cs)+'px;width:'+cs+'px;height:'+cs+'px;"><v:fill color="#ffffff" opacity="0.75" /></v:shape>'; strok = '<v:shape strokeweight="1.5" filled="f" stroked="t" strokecolor="#808080" opacity="0" coordorigin="0,0" coordsize="'+cs+','+cs+'" path="m 0,0 c '+(ir-1)+','+vs+','+(or-1)+','+hs+','+(or-1)+','+(cs-or-1)+' qy 1,'+(cs-1)+' m '+(cs-1)+',1 qy '+(cs-or-1)+','+(or-1)+' c '+hs+','+(or-1)+','+vs+','+(ir-1)+',0,0 e" style="position:absolute;top:'+(ih-cs)+'px;left:'+(iw-cs)+'px;width:'+cs+'px;height:'+cs+'px;"></v:shape>'; } shade = '<v:shape strokeweight="0" filled="t" stroked="f" fillcolor="#000000" coordorigin="0,0" coordsize="'+cs+','+cs+'" path="m 0,0 c '+ir+','+vs+','+or+','+hs+','+or+','+(cs-or)+' qy 0,'+cs+' c '+yr+','+cs+','+yr+','+cs+','+xr+','+(cs-vr)+' l '+(cs-vr)+','+xr+' c '+cs+','+yr+','+cs+','+yr+','+cs+',0 qy '+(cs-or)+','+or+' c '+hs+','+or+','+vs+','+ir+',0,0 x e" style="position:absolute;top:'+(ih-cs)+'px;left:'+(iw-cs)+'px;width:'+cs+'px;height:'+cs+'px;"><v:fill method="linear sigma" type="gradient" focus="-0.15" angle="45" color="#000000" opacity="1" color2="#000000" o:opacity2="0" /></v:shape>'; foot = '</v:group>'; canvas.innerHTML = head+shadow+back+fill+shine+shade+strok+foot; if(typeof window[callback]==='function') {window[callback](canvas.id,'cvi_curl');} } }else { if(canvas.tagName.toUpperCase() == "CANVAS" && canvas.getContext("2d")) { var context = canvas.getContext("2d"), prepared=(context.getImageData?true:false), alternate=false; var img = new Image(); img.onload = function() { if(prepared&&(typeof cvi_filter!='undefined')&&filter!=null&&filter.length>0) {iw=Math.round(iw); ih=Math.round(ih); var source=document.createElement('canvas'); source.height=ih+4; source.width=iw+4; var src=source.getContext("2d"); var buffer=document.createElement('canvas'); buffer.height=ih; buffer.width=iw; var ctx=buffer.getContext("2d"); if(src&&ctx) {alternate=true; ctx.clearRect(0,0,iw,ih); ctx.drawImage(img,0,0,iw,ih); src.clearRect(0,0,iw+4,ih+4); src.drawImage(img,0,0,iw+4,ih+4); src.drawImage(img,2,2,iw,ih); for(var i in filter) {cvi_filter.add(source,buffer,filter[i],iw,ih);} }} context.clearRect(0,0,iw,ih); context.save(); if(!invert) { clipCurl(context,iw-cs,ih-cs,iw,ih,or,ir); context.clip(); if(!isNaN(icolor)) { context.fillStyle = 'rgba(0,0,0,0)'; context.fillRect(0,0,iw,ih); context.rotate(dg); context.scale(-1,1); context.translate(-(iw),-(ih)); if(alternate) { context.drawImage(source,2,2,iw,ih,-(ih-cs),-(iw-cs),iw,ih); }else { context.drawImage(img,-(ih-cs),-(iw-cs),iw,ih); }} }else { clipInversCurl(context,iw-cs,ih-cs,iw,ih,or,ir); context.clip(); context.clearRect(0,0,iw,ih); if(alternate) { context.drawImage(source,2,2,iw,ih,0,0,iw,ih); }else { context.drawImage(img,0,0,iw,ih); }} context.restore(); clipCurl(context,iw-cs,ih-cs,iw,ih,or,ir); context.fillStyle = 'rgba(254,254,254,0.5)'; if(isNaN(icolor)) context.fillStyle = icolor; context.fill(); clipCurl(context,iw-cs,ih-cs,iw,ih,or,ir); context.strokeStyle = 'rgba(128,128,128,0.5)'; context.stroke(); clipCurl(context,iw-cs,ih-cs,iw,ih,or,ir); st = context.createLinearGradient(iw-cs,ih-cs,iw-(cs*.455),ih-(cs*.455)); st.addColorStop(0,'rgba(254,254,254,0.5)'); st.addColorStop(0.33,'rgba(254,254,254,0)'); st.addColorStop(0.33,'rgba(0,0,0,0)'); st.addColorStop(0.4,'rgba(0,0,0,0.05)'); st.addColorStop(0.5,'rgba(0,0,0,0.1)'); st.addColorStop(0.75,'rgba(0,0,0,0.15)'); st.addColorStop(0.85,'rgba(0,0,0,0.3)'); st.addColorStop(0.99,'rgba(0,0,0,0.7)'); st.addColorStop(1,'rgba(0,0,0,0.8)'); context.fillStyle = st; context.fill(); context.save(); if(!invert) { clipReversCurl(context,iw-cs,ih-cs,iw,ih,or,ir); context.clip(); context.clearRect(0,0,iw,ih); if(alternate) { context.drawImage(source,2,2,iw,ih,0,0,iw,ih); }else { context.drawImage(img,0,0,iw,ih); } context.restore(); } context.save(); clipCurlShadow(context,iw-cs,ih-cs,iw,ih,or,ir); context.clip(); context.translate(iw,ih-cs); context.rotate((Math.PI/180)*45); context.scale(0.75,1); curlShadow(context,cs,or,hr,ishadow); context.restore(); if(typeof window[callback]==='function') {window[callback](canvas.id,'cvi_curl');} } img.src = canvas.source; }} } catch (e) { }}, replace : function(canvas) { var object = canvas.parentNode; var img = document.createElement('img'); img.id = canvas.id; img.alt = canvas.alt; img.title = canvas.title; img.src = canvas.source; img.height = canvas.height; img.width = canvas.width; img.className = canvas.className; img.style.cssText = canvas.style.cssText; img.style.height = canvas.height+'px'; img.style.width = canvas.width+'px'; object.replaceChild(img,canvas); }, remove : function(canvas) { if(document.all && document.namespaces && !window.opera) { if(canvas.tagName.toUpperCase() == "VAR") { cvi_curl.replace(canvas); } }else { if(canvas.tagName.toUpperCase() == "CANVAS") { cvi_curl.replace(canvas); }}}} function toggle(obj) { cvi_curl.defaultSize = 20; cvi_curl.defaultColor = "#ffeeaa"; if(obj.tagName.toUpperCase() != 'IMG') { cvi_curl.remove(obj); }else { cvi_curl.add(obj); }} var size = 100; var direct = true; function increase(obj) { var max = 100; if(obj.tagName.toUpperCase() != 'IMG') { if(!direct && size>5 || size>=max) { direct = false; size -= 5; }else if(direct && size<=5 || size<max) { direct = true; size += 5; } cvi_curl.modify(obj, {size: size }); }} window.onload = function () { cvi_curl.add(document.getElementById("img4"), {size: 50 }); cvi_curl.add(document.getElementById("img2"), {size: 50 }); cvi_curl.add(document.getElementById("img3"), {size: 50 }); }; var tmp = navigator.appName == 'Microsoft Internet Explorer' && navigator.userAgent.indexOf('Opera') < 1 ? 1 : 0; if(tmp) var isIE = document.namespaces ? 1 : 0; if(isIE) { if(document.namespaces['v']==null) { var e=["shape","shapetype","group","background","path","formulas","handles","fill","stroke","shadow","textbox","textpath","imagedata","line","polyline","curve","roundrect","oval","rect","arc","image"],s=document.createStyleSheet(); for(var i=0; i<e.length; i++) {s.addRule("v\\:"+e[i],"behavior: url(#default#VML);");} document.namespaces.add("v","urn:schemas-microsoft-com:vml"); } } function getImages(className){ var children = document.getElementsByTagName('img'); var elements = new Array(); var i = 0; var child; var classNames; var j = 0; for (i=0;i<children.length;i++) { child = children[i]; classNames = child.className.split(' '); for (var j = 0; j < classNames.length; j++) { if (classNames[j] == className) { elements.push(child); break; }}} return elements; } function getClasses(classes,string){ var temp = ''; for (var j=0;j<classes.length;j++) { if (classes[j] != string) { if (temp) { temp += ' '; } temp += classes[j]; }} return temp; } function getClassValue(classes,string){ var temp = 0; var pos = string.length; for (var j=0;j<classes.length;j++) { if (classes[j].indexOf(string) == 0) { temp = Math.min(classes[j].substring(pos),100); break; }} return Math.max(0,temp); } function getClassColor(classes,string){ var temp = 0; var str = ''; var pos = string.length; for (var j=0;j<classes.length;j++) { if (classes[j].indexOf(string) == 0) { temp = classes[j].substring(pos); str = '#' + temp.toLowerCase(); break; }} if(str.match(/^#[0-9a-f][0-9a-f][0-9a-f][0-9a-f][0-9a-f][0-9a-f]$/i)) {return str; }else {return 0;} } function getClassAttribute(classes,string){ var temp = 0; var pos = string.length; for (var j=0;j<classes.length;j++) { if (classes[j].indexOf(string) == 0) { temp = 1; break; }} return temp; } function clipCurl(ctx,x,y,w,h,r,i) { ctx.beginPath(); ctx.moveTo(x,h); ctx.quadraticCurveTo(x+r,h,x+r,h-r); ctx.quadraticCurveTo(x+r,y+(2*r),x,y); ctx.quadraticCurveTo(x+(2*r),y+r,w-r,y+r); ctx.quadraticCurveTo(w,y+r,w,y); ctx.quadraticCurveTo(w,y+(r/2),w-(r-i),y+i); ctx.lineTo(x+i,h-(r-i)); ctx.quadraticCurveTo(x+(r/2),h,x,h); ctx.closePath(); } function clipReversCurl(ctx,x,y,w,h,r,i) { ctx.beginPath(); ctx.moveTo(0,0); ctx.lineTo(0,h); ctx.lineTo(x,h); ctx.quadraticCurveTo(x+r,h,x+r,h-r); ctx.quadraticCurveTo(x+r,y+(2*r),x,y); ctx.quadraticCurveTo(x+(2*r),y+r,w-r,y+r); ctx.quadraticCurveTo(w,y+r,w,y); ctx.lineTo(w,0); ctx.closePath(); } function clipInversCurl(ctx,x,y,w,h,r,i) { ctx.beginPath(); ctx.moveTo(w,y); ctx.quadraticCurveTo(w,y+(r/2),w-(r-i),y+i); ctx.lineTo(x+i,h-(r-i)); ctx.quadraticCurveTo(x+(r/2),h,x,h); ctx.lineTo(w,h); ctx.closePath(); } function clipCurlShadow(ctx,x,y,w,h,r,i) { ctx.beginPath(); ctx.moveTo(w,y); ctx.quadraticCurveTo(w,y+(r/2),w-(r-i),y+i); ctx.lineTo(x+i,h-(r-i)); ctx.quadraticCurveTo(x+(r/2),h,x,h); ctx.lineTo(w,h); ctx.closePath(); } function curlShadow(ctx,s,r,i,o) { var style; var f = 1.27; style = ctx.createRadialGradient(i,r,0,i,r,i); style.addColorStop(0,'rgba(0,0,0,'+o+')'); style.addColorStop(1,'rgba(0,0,0,0)'); ctx.fillStyle = style; ctx.beginPath(); ctx.rect(0,i,r,i); ctx.closePath(); ctx.fill(); style = ctx.createLinearGradient(0,0,r,0); style.addColorStop(0,'rgba(0,0,0,0)'); style.addColorStop(0.5,'rgba(0,0,0,'+o+')'); style.addColorStop(1,'rgba(0,0,0,0)'); ctx.fillStyle = style; ctx.beginPath(); ctx.rect(0,i+i,r,(s*f)-i-i); ctx.closePath(); ctx.fill(); style = ctx.createRadialGradient(i,(s*f),0,i,(s*f),i); style.addColorStop(0,'rgba(0,0,0,'+o+')'); style.addColorStop(1,'rgba(0,0,0,0)'); ctx.fillStyle = style; ctx.beginPath(); ctx.rect(0,(s*f),r,i); ctx.closePath(); ctx.fill(); } function addIECurl() { var theimages = getImages('curl'); var image, object, vml, display, flt, classes, newClasses; var i, f, t, l, ih, iw, cs, or, hs, vs, ss, hr, ir, vr, qr, xr, yr, st; var isize, ishadow, icolor, invert, head, foot; var shadow='', shade='', shine='', back='', fill='', strok=''; var children = document.getElementsByTagName('img'); for(i=0;i<theimages.length;i++) { image = theimages[i]; object = image.parentNode; if(image.width>=64 && image.height>=64) { classes = image.className.split(' '); isize = 0; ishadow = 0; icolor = 0; invert = 0; isize = getClassValue(classes,"isize"); ishadow = getClassValue(classes,"ishadow"); icolor = getClassColor(classes,"icolor"); invert = getClassAttribute(classes,"invert"); isize = isize==0?0.33:isize/100; ishadow = ishadow==0?0.66:ishadow/100; ih = image.height; iw = image.width; cs = Math.floor(Math.min(iw,ih)*isize); or = Math.floor(cs*0.15); hs = Math.floor(cs*0.5); vs = Math.floor(cs*0.25); ss = Math.floor(or*0.3); hr = Math.floor(or*0.5); ir = Math.floor(or*0.8); vr = Math.floor(or*0.25); qr = Math.round(vr*0.25); xr = Math.floor(or*0.75); yr = Math.floor(or*0.4); display = (image.currentStyle.display.toLowerCase()=='block')?'block':'inline-block'; vml = document.createElement(['<var style="overflow:hidden;display:'+display+';clip:rect(0px '+iw+'px '+ih+'px 0px);width:'+iw+'px;height:'+ih+'px;padding:0;margin:0;">'].join('')); flt = image.currentStyle.styleFloat.toLowerCase(); display = (flt=='left'||flt=='right')?'inline':display; head = '<v:group style="zoom:1;display:'+display+';margin:0;padding:0;position:relative;width:'+iw+'px;height:'+ih+'px;" coordsize="'+iw+','+ih+'"><v:rect strokeweight="0" filled="t" stroked="f" fillcolor="#ffffff" style="zoom:1;padding:0;position:absolute;top:0px;left:0px;width:'+iw+'px;height:'+ih+'px;"><v:fill color="#ffffff" opacity="0.0" /></v:rect>'; if(invert>0) { shadow = '<v:shape strokeweight="0" filled="t" stroked="f" fillcolor="#808080" coordorigin="0,0" coordsize="'+iw+','+ih+'" path="m 0,'+ih+' l '+(iw-cs+yr)+','+ih+' c '+(iw-cs+yr)+','+ih+','+(iw-cs+yr)+','+ih+','+(iw-cs+xr)+','+(ih-vr)+' l '+(iw-vr)+','+(ih-cs+xr)+' c '+iw+','+(ih-cs+yr)+','+iw+','+(ih-cs+yr)+','+iw+','+(ih-cs)+' l '+iw+',0,'+iw+','+ih+' x e" style="position:absolute;top:0px;left:0px;width:'+iw+'px;height:'+ih+'px;"><v:fill src="'+image.src+'" type="frame" /></v:shape>'; back = '<v:shape strokeweight="0" filled="t" stroked="f" fillcolor="#000000" coordorigin="0,0" coordsize="'+cs+','+cs+'" path="m '+hr+','+(cs-hr)+' l '+hr+','+(cs-hr-hr)+','+(cs-hr-hr)+','+hr+','+(cs-hr)+','+hr+' x e" style="position:absolute;top:'+(ih-cs+qr)+'px;left:'+(iw-cs+qr)+'px;width:'+cs+'px;height:'+cs+'px;filter:Alpha(opacity='+(ishadow*136)+'), progid:dxImageTransform.Microsoft.Blur(PixelRadius='+ss+',MakeShadow=false);"><v:fill color="#000000" /></v:shape>'; }else { back = '<v:shape strokeweight="0" filled="t" stroked="f" fillcolor="#808080" coordorigin="0,0" coordsize="'+iw+','+ih+'" path="m 0,0 l 0,'+ih+' c '+(iw-cs+yr)+','+ih+','+(iw-cs+yr)+','+ih+','+(iw-cs+xr)+','+(ih-vr)+' l '+(iw-vr)+','+(ih-cs+xr)+' c '+iw+','+(ih-cs+yr)+','+iw+','+(ih-cs+yr)+','+iw+',0 x e" style="position:absolute;top:0px;left:0px;width:'+iw+'px;height:'+ih+'px;"><v:fill src="'+image.src+'" type="frame" /></v:shape>'; shadow = '<v:shape strokeweight="0" filled="t" stroked="f" fillcolor="#000000" coordorigin="0,0" coordsize="'+cs+','+cs+'" path="m '+hr+','+(cs-hr)+' l '+hr+','+hr+','+(cs-hr)+','+hr+' x e" style="position:absolute;top:'+(ih-cs+qr)+'px;left:'+(iw-cs+qr)+'px;width:'+cs+'px;height:'+cs+'px;filter:Alpha(opacity='+(ishadow*136)+'), progid:dxImageTransform.Microsoft.Blur(PixelRadius='+ss+',MakeShadow=false);"><v:fill color="#000000" /></v:shape>'; } if(isNaN(icolor)||invert>0) { icolor = (!isNaN(icolor)?"#808080":icolor); fill = '<v:shape strokeweight="0" filled="t" stroked="f" fillcolor="#808080" coordorigin="0,0" coordsize="'+cs+','+cs+'" path="m 0,0 c '+ir+','+vs+','+or+','+hs+','+or+','+(cs-or)+' qy 0,'+cs+' c '+yr+','+cs+','+yr+','+cs+','+xr+','+(cs-vr)+' l '+(cs-vr)+','+xr+' c '+cs+','+yr+','+cs+','+yr+','+cs+',0 qy '+(cs-or)+','+or+' c '+hs+','+or+','+vs+','+ir+',0,0 x e" style="position:absolute;top:'+(ih-cs)+'px;left:'+(iw-cs)+'px;width:'+cs+'px;height:'+cs+'px;"><v:fill color="'+icolor+'" /></v:shape>'; shine = ''; strok = ''; }else { if(iw>ih) {f=(ih/iw); t=(1-f)+((1-isize)*f); l=1-isize;}else if(ih>iw) {t=1-isize; f=(iw/ih); l=(1-f)+((1-isize)*f); }else {t=1-isize; l=1-isize;} fill = '<v:shape strokeweight="0" filled="t" stroked="f" fillcolor="#808080" coordorigin="0,0" coordsize="'+cs+','+cs+'" path="m 2,2 c '+ir+','+vs+','+or+','+hs+','+or+','+(cs-or)+' qy 0,'+cs+' c '+yr+','+cs+','+yr+','+cs+','+(xr+1)+','+(cs-vr+1)+' l '+(cs-vr+1)+','+(xr+1)+' c '+cs+','+yr+','+cs+','+yr+','+cs+',0 qy '+(cs-or)+','+or+' c '+hs+','+or+','+vs+','+ir+',2,2 x e" style="rotation:180; filter:fliph() progid:DXImageTransform.Microsoft.BasicImage(rotation=1);position:absolute;top:'+(ih-cs)+'px;left:'+(iw-cs)+'px;width:'+cs+'px;height:'+cs+'px;"><v:fill src="'+image.src+'" origin="'+t+','+l+'" type="tile" /></v:shape>'; shine = '<v:shape strokeweight="0" filled="t" stroked="f" fillcolor="#808080" coordorigin="0,0" coordsize="'+cs+','+cs+'" path="m 0,0 c '+ir+','+vs+','+or+','+hs+','+or+','+(cs-or)+' qy 0,'+cs+' c '+yr+','+cs+','+yr+','+cs+','+xr+','+(cs-vr)+' l '+(cs-vr)+','+xr+' c '+cs+','+yr+','+cs+','+yr+','+cs+',0 qy '+(cs-or)+','+or+' c '+hs+','+or+','+vs+','+ir+',0,0 x e" style="position:absolute;top:'+(ih-cs)+'px;left:'+(iw-cs)+'px;width:'+cs+'px;height:'+cs+'px;"><v:fill color="#ffffff" opacity="0.75" /></v:shape>'; strok = '<v:shape strokeweight="1.5" filled="f" stroked="t" strokecolor="#808080" opacity="0" coordorigin="0,0" coordsize="'+cs+','+cs+'" path="m 0,0 c '+(ir-1)+','+vs+','+(or-1)+','+hs+','+(or-1)+','+(cs-or-1)+' qy 1,'+(cs-1)+' m '+(cs-1)+',1 qy '+(cs-or-1)+','+(or-1)+' c '+hs+','+(or-1)+','+vs+','+(ir-1)+',0,0 e" style="position:absolute;top:'+(ih-cs)+'px;left:'+(iw-cs)+'px;width:'+cs+'px;height:'+cs+'px;"></v:shape>'; } shade = '<v:shape strokeweight="0" filled="t" stroked="f" fillcolor="#000000" coordorigin="0,0" coordsize="'+cs+','+cs+'" path="m 0,0 c '+ir+','+vs+','+or+','+hs+','+or+','+(cs-or)+' qy 0,'+cs+' c '+yr+','+cs+','+yr+','+cs+','+xr+','+(cs-vr)+' l '+(cs-vr)+','+xr+' c '+cs+','+yr+','+cs+','+yr+','+cs+',0 qy '+(cs-or)+','+or+' c '+hs+','+or+','+vs+','+ir+',0,0 x e" style="position:absolute;top:'+(ih-cs)+'px;left:'+(iw-cs)+'px;width:'+cs+'px;height:'+cs+'px;"><v:fill method="linear sigma" type="gradient" focus="-0.15" angle="25" color="#000000" opacity="1" color2="#000000" o:opacity2="0" /></v:shape>'; foot = '</v:group>'; vml.innerHTML = head+shadow+back+fill+shine+shade+strok+foot; vml.className = newClasses; vml.style.cssText = image.style.cssText; vml.style.height = ih+'px'; vml.width = iw; vml.height = ih; vml.style.width = iw+'px'; vml.src = image.src; vml.alt = image.alt; if(image.id!='') vml.id = image.id; if(image.title!='') vml.title = image.title; if(image.getAttribute('onclick')!='') vml.setAttribute('onclick',image.getAttribute('onclick')); object.replaceChild(vml,image); vml.style.visibility = 'visible'; }}} function addCurl() { var theimages = getImages('curl'); var image, object, canvas, context, classes, newClasses; var i, f, ih, iw, cs, or, ir, hr, st; var isize, ishadow, icolor, invert; var dg = (Math.PI*90/180); var children = document.getElementsByTagName('img'); for(i=0;i<theimages.length;i++) { image = theimages[i]; object = image.parentNode; canvas = document.createElement('canvas'); if(canvas.getContext && image.width>=64 && image.height>=64) { classes = image.className.split(' '); isize = 0; ishadow = 0; icolor = 0; invert = 0; isize = getClassValue(classes,"isize"); ishadow = getClassValue(classes,"ishadow"); icolor = getClassColor(classes,"icolor"); invert = getClassAttribute(classes,"invert"); newClasses = getClasses(classes,"curl"); isize = isize==0?0.33:isize/100; ishadow = ishadow==0?0.66:ishadow/100; ih = image.height; iw = image.width; cs = Math.floor(Math.min(iw,ih)*isize); or = Math.floor(cs*0.15); hr = Math.floor(or*0.5); ir = Math.floor(or*0.8); canvas.className = newClasses; canvas.style.cssText = image.style.cssText; canvas.style.height = ih+'px'; canvas.width = iw; canvas.style.width = iw+'px'; canvas.height = ih; canvas.src = image.src; canvas.alt = image.alt; if(image.id!='') canvas.id = image.id; if(image.title!='') canvas.title = image.title; if(image.getAttribute('onclick')!='') canvas.setAttribute('onclick',image.getAttribute('onclick')); context = canvas.getContext("2d"); object.replaceChild(canvas,image); context.clearRect(0,0,iw,ih); context.save(); if(invert<1) { clipCurl(context,iw-cs,ih-cs,iw,ih,or,ir); context.clip(); if(!isNaN(icolor)) { context.fillStyle = 'rgba(0,0,0,0)'; context.fillRect(0,0,iw,ih); context.rotate(dg); context.scale(-1,1); context.translate(-(iw),-(ih)); context.drawImage(image,-(ih-cs),-(iw-cs),iw,ih); } }else { clipInversCurl(context,iw-cs,ih-cs,iw,ih,or,ir); context.clip(); context.clearRect(0,0,iw,ih); context.drawImage(image,0,0,iw,ih); } context.restore(); clipCurl(context,iw-cs,ih-cs,iw,ih,or,ir); context.fillStyle = 'rgba(254,254,254,0.5)'; if(isNaN(icolor)) context.fillStyle = icolor; context.fill(); clipCurl(context,iw-cs,ih-cs,iw,ih,or,ir); context.strokeStyle = 'rgba(128,128,128,0.5)'; context.stroke(); clipCurl(context,iw-cs,ih-cs,iw,ih,or,ir); st = context.createLinearGradient(iw-cs,ih-cs,iw-(cs*.455),ih-(cs*.455)); st.addColorStop(0,'rgba(254,254,254,0.5)'); st.addColorStop(0.33,'rgba(254,254,254,0)'); st.addColorStop(0.33,'rgba(0,0,0,0)'); st.addColorStop(0.4,'rgba(0,0,0,0.05)'); st.addColorStop(0.5,'rgba(0,0,0,0.1)'); st.addColorStop(0.75,'rgba(0,0,0,0.15)'); st.addColorStop(0.85,'rgba(0,0,0,0.3)'); st.addColorStop(0.99,'rgba(0,0,0,0.7)'); st.addColorStop(1,'rgba(0,0,0,0.8)'); context.fillStyle = st; context.fill(); context.save(); if(invert<1) { clipReversCurl(context,iw-cs,ih-cs,iw,ih,or,ir); context.clip(); context.clearRect(0,0,iw,ih); context.drawImage(image,0,0,iw,ih); } context.restore(); clipCurlShadow(context,iw-cs,ih-cs,iw,ih,or,ir); context.clip(); context.save(); context.translate(iw,ih-cs); context.rotate((Math.PI/180)*45); context.scale(0.75,1); curlShadow(context,cs,or,hr,ishadow); context.restore(); canvas.style.visibility = 'visible'; }}} var curlOnload = window.onload; window.onload = function () { if(curlOnload) curlOnload(); if(isIE){addIECurl(); }else {addCurl(); }} </script> </head> <body> <div class="demo" onmouseover="cvi_curl.modify(document.getElementById('img2'), {size: 50 });" onmouseout="cvi_curl.modify(document.getElementById('img2'), {size: 20 });"> <a href="javascript:window.open('001.jpg','win','width=500,height=600,top=10,left=200,toolbar=no,directories=no,status=no,menubar=no,scrollbars=no,resizable=no');document.close()"><img src="001.jpg" id="img2" title="Move over to change curl" alt="1" width="200px"></a> </div> <div class="demo" onmouseover="cvi_curl.modify(document.getElementById('img3'), {size: 50 });" onmouseout="cvi_curl.modify(document.getElementById('img3'), {size: 20 });"> <a href="javascript:window.open('002.jpg','win','width=500,height=600,top=10,left=200,toolbar=no,directories=no,status=no,menubar=no,scrollbars=no,resizable=no');document.close()"><img src="002.jpg" id="img3" title="Move over to change curl" alt="2" width="200px"></a> </div> <div class="demo" onmouseover="cvi_curl.modify(document.getElementById('img4'), {size: 50 });" onmouseout="cvi_curl.modify(document.getElementById('img4'), {size: 20 });"> <a href="javascript:window.open('002.jpg','win','width=500,height=600,top=10,left=200,toolbar=no,directories=no,status=no,menubar=no,scrollbars=no,resizable=no');document.close()"><img src="003.jpg" id="img4" title="Move over to change curl" alt="3" width="200px"></a> </div> <div class="bottom"><style>.bottom {position:absolute;bottom:0px; left:40%}</style> <font style="font-size:12px;color:#CC6600;font-family:Arial;" onclick="location.href='http://www.03www.su/5.php'" title="для писем" target=_blank> Библиотека JAVASCRIPT 1997- <script src="god.js"></script> Дизайн и сопровождение © SE@RCHER</font> </div> </strong></div></body> </html>