hm - I think this doesn;t work - I've just made simple test case
On Jul 25, 1:43 pm, Thierry bela nanga <[email protected]> wrote: > Hi all, > > I've slightly modified this to use mootools, > > homepage:http://cow.neondragon.net/stuff/reflection/ > > /** > * reflection.js v2.0 > *http://cow.neondragon.net/stuff/reflection/ > * Freely distributable under MIT-style license. > */ > > var Reflection = { > options: { > opacity : .5, > height : .5, > width: .5}, > > add: function(image, options) { > this.remove($(image)); > options = options || {}; > for(v in this.options) if(!options[v]) options[v] = this.options[v]; > try { > var d = new Element('div'), p = image, > newClasses = p.removeClass('reflected').className, > reflectionHeight = Math.floor(p.height*options['height']), > divHeight = Math.floor(p.height*(1+options['height'])), > reflectionWidth = p.width; > if (Browser.Engine.trident) { > /* Fix hyperlinks */ > if(p.getParent().get('tag') == 'a') d = new Element('a', > {href: p.getParent().get('tag').href}); > > /* Copy original image's classes & styles to div */ > if(newClasses) d.className = newClasses; > p.className = 'reflected'; > d.style.cssText = p.style.cssText; > p.style.cssText = 'vertical-align: bottom'; > var reflection = new Element('img', {src: p.src, > width: reflectionWidth, > height: p.height}); > > reflection.style.display = 'block'; > reflection.style.marginBottom = -(p.height-reflectionHeight)+'px'; > reflection.style.filter = 'flipv > progid:DXImageTransform.Microsoft.Alpha(opacity='+(options['opacity']*100)+ ', > style=1, finishOpacity=0, startx=0, starty=0, finishx=0, > finishy='+(options['height']*100)+')'; > d.setStyles({height: divHeight, width: reflectionWidth}); > p.parentNode.replaceChild(d, p); > d.appendChild(p); > d.appendChild(reflection);} else { > > var canvas = new Element('canvas'); > if (canvas.getContext) { > /* Copy original image's classes & styles to div */ > if(newClasses) d.className = newClasses; > p.className = 'reflected'; > d.style.cssText = p.style.cssText; > p.style.cssText = 'vertical-align: bottom'; > var context = canvas.getContext("2d"); > canvas.setProperties({height: reflectionHeight, width: reflectionWidth}); > d.setStyles({height: divHeight,width: reflectionWidth}); > p.parentNode.replaceChild(d, p); > d.appendChild(p); > d.appendChild(canvas); > context.save(); > context.translate(0,image.height-1); > context.scale(1,-1); > context.drawImage(image, 0, 0, reflectionWidth, image.height); > context.restore(); > context.globalCompositeOperation = "destination-out"; > var gradient = context.createLinearGradient(0, 0, 0, reflectionHeight); > gradient.addColorStop(1, "rgba(255, 255, 255, 1.0)"); > gradient.addColorStop(0, "rgba(255, 255, 255, "+(1-options['opacity'])+")"); > context.fillStyle = gradient; > context.rect(0, 0, reflectionWidth, reflectionHeight*2); > context.fill();} > } > } > catch (e) { } > }, > > remove : function(image) { > if (image.className == "reflected") { > image.className = image.parentNode.className; > image.parentNode.parentNode.replaceChild(image, image.parentNode); > > } > } > } > > -- > fax : (+33) 08 26 51 94 51
