Vladyn, if it doesn't work, please post OS/browser so others can confirm. If I remember correctly, this was broken in Firefox 2.0.10 (I think) - but odds are you aren't using an old firefox :)
-kb On Jul 29, 11:19 am, vladyn <[email protected]> wrote: > 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
