Reflection.js

JavaScriptSource Staff Oct 29, 2008

General

Add reflections to selected images on your Web pages. Vary the reflection height and opacity. Very easy to use and completely unobtrusive. Works well with logos, icons and dynamic image content such as forum avatars. Degrades nicely in older browsers.

Notes

Created by: 'Cow'
Web Site: http://cow.neondragon.net/

Documentation available online.

Source Code

Paste this source code into the designated areas.

External file

Paste this code into an external JavaScript file named: reflection.js

/* This script and many more are available free online at
The JavaScript Source!! http://www.javascriptsource.com
Created by: 'Cow' | http://cow.neondragon.net/Licensed under: MIT License
 */

/* From prototype.js */
if (!document.myGetElementsByClassName) {
	document.myGetElementsByClassName = function(className) {
		var children = document.getElementsByTagName('*') || document.all;
		var elements = new Array();

		for (var i = 0; i < children.length; i++) {
			var child = children[i];
			var classNames = child.className.split(' ');
			for (var j = 0; j < classNames.length; j++) {
				if (classNames[j] == className) {
					elements.push(child);
					break;
				}
			}
		}
		return elements;
	}
}

var Reflection = {
	defaultHeight : 0.5,
	defaultOpacity: 0.5,

	add: function(image, options) {
		Reflection.remove(image);

		doptions = { "height" : Reflection.defaultHeight, "opacity" : Reflection.defaultOpacity }
		if (options) {
			for (var i in doptions) {
				if (!options[i]) {
					options[i] = doptions[i];
				}
			}
		} else {
			options = doptions;
		}

		try {
			var d = document.createElement('div');
			var p = image;

			var classes = p.className.split(' ');
			var newClasses = '';
			for (j=0;j<classes.length;j++) {
				if (classes[j] != "reflect") {
					if (newClasses) {
						newClasses += ' '
					}

					newClasses += classes[j];
				}
			}

			var reflectionHeight = Math.floor(p.height*options['height']);
			var divHeight = Math.floor(p.height*(1+options['height']));

			var reflectionWidth = p.width;

			if (document.all && !window.opera) {
				/* Fix hyperlinks */
                if(p.parentElement.tagName == 'A') {
	                var d = document.createElement('a');
	                d.href = p.parentElement.href;
                }

				/* Copy original image's classes & styles to div */
				d.className = newClasses;
				p.className = 'reflected';

				d.style.cssText = p.style.cssText;
				p.style.cssText = 'vertical-align: bottom';

				var reflection = document.createElement('img');
				reflection.src = p.src;
				reflection.style.width = reflectionWidth+'px';
				reflection.style.display = 'block';
				reflection.style.height = p.height+"px";

				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.style.width = reflectionWidth+'px';
				d.style.height = divHeight+'px';
				p.parentNode.replaceChild(d, p);

				d.appendChild(p);
				d.appendChild(reflection);
			} else {
				var canvas = document.createElement('canvas');
				if (canvas.getContext) {
					/* Copy original image's classes & styles to div */
					d.className = newClasses;
					p.className = 'reflected';

					d.style.cssText = p.style.cssText;
					p.style.cssText = 'vertical-align: bottom';

					var context = canvas.getContext("2d");

					canvas.style.height = reflectionHeight+'px';
					canvas.style.width = reflectionWidth+'px';
					canvas.height = reflectionHeight;
					canvas.width = reflectionWidth;

					d.style.width = reflectionWidth+'px';
					d.style.height = divHeight+'px';
					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);
		}
	}
}

function addReflections() {
	var rimages = document.myGetElementsByClassName('reflect');
	for (i=0;i<rimages.length;i++) {
		var rheight = null;
		var ropacity = null;

		var classes = rimages[i].className.split(' ');
		for (j=0;j<classes.length;j++) {
			if (classes[j].indexOf("rheight") == 0) {
				var rheight = classes[j].substring(7)/100;
			} else if (classes[j].indexOf("ropacity") == 0) {
				var ropacity = classes[j].substring(8)/100;
			}
		}

		Reflection.add(rimages[i], { height: rheight, opacity : ropacity});
	}
}

// Multiple onload function created by: Simon Willison
// http://simonwillison.net/2004/May/26/addLoadEvent/
function addLoadEvent(func) {
  var oldonload = window.onload;
  if (typeof window.onload != 'function') {
    window.onload = func;
  } else {
    window.onload = function() {
      if (oldonload) {
        oldonload();
      }
      func();
    }
  }
}

addLoadEvent(function() {
  addReflections();
  // add other functions here
});

Head

Paste this code into the HEAD section of your HTML document.


<script type="text/javascript" src="reflection.js"></script>

Body

Paste this code into the BODY section of your HTML document


<p>
<img src="pix2-sm.gif" width="200" height="150" class="reflect"></p>

Leave a Response

(6 comments)

Your question is beyond the scope of these comments. You will need to post it over on [a href="http://www.webdeveloper.com/forum/forumdisplay.php?f=3"]the JavaScript forum[/a]. Thanks!

Lee Dec 2, 2008

I use GF-W168,when browsing most website do not adapt & when i download games it says no javascript found,wat can i do?

saeed Nov 9, 2008

hai it is very usefull code thanks to the author.

balu Nov 8, 2008

Thanks for the comments, Jonathan. It is generally used for logos and such.

Lee Nov 6, 2008

An image with a reflection already in it is probably not exactly the best example of how this could be "useful." You end up with a reflection of a reflection.[br /][br /]While this is a neat trick, I don't see much practical use. But thanks for trying. That's how we all learn new things.[br /][br /]I appreciate your efforts.

Jonathan Nov 1, 2008

Alphabetical Listing

Tutorials

Ajax Tutorials

Ajax

Buttons

Cookies

CSS

Forms

Games

Generators

Image Effects

Math Related

Miscellaneous

Multimedia

Navigation

Page Details

Password

Snippets

Text Effects

Time & Date

User Details