« »

With this JavaScript code in your website, when visitors click anywhere, the images will display out.

Label: Printing Image OnClick

Demo
Enlarge
Reload
New window

Code
Files
JavaScript
Print

heart.gif

Copy All x2

<script>
<!--
var num=6
var x=-50,y=-50
var count
for (i=0;i<num;i++){
   	with (document)
	{
		if(document.all)
		{
			write( "<div id='note"+i+"' style='position:absolute;left:"+x+"; top: "+y +";'>")
      			write("<img src='../image/heart.gif' border=0>")
     			document.write("</div>")
		}
		else if(document.layers)
		{		
      			write( "<layer id='"+"note"+i+"' left="+x+" top="+y +">")
      			write("<img src='../image/heart.gif' border=0>")
     			document.write("</layer>")
		}
   	}
}


window.document.onclick=playSound;

if(document.all)
{
	window.document.onmousedown= updatePos;
}
else if(document.layers)
{
	window.captureEvents(Event.MOUSEDOWN)
	onMouseDown=updatePos
}


function updatePos(e)
{
	if(document.all)
	{
		x =event.clientX+document.body.scrollLeft;
		y =event.clientY+document.body.scrollTop;
	}
	else if(document.layers)
	{
		x =e.pageX
		y =e.pageY
	}
}


function playSound()
{
    count=0
    animation() 
}
function animation(){

	if(document.all)
	{
   		if(count<5)
		{
        		for(i=0;i<num;i++)
			{
    	    			document.all["note"+i].style.left=x+Math.sin(i*Math.PI*2/num)*20*count 
            			document.all["note"+i].style.top=y+Math.cos(i*Math.PI*2/num)*20*count 
        		}
        		setTimeout('animation()',50)
    		}
		else 
		{
        		for(i=0;i<num;i++)
			{
             			document.all["note"+i].style.left=-50
    	     			document.all["note"+i].style.top=-50
			}
         	}
	}
	else if(document.layers)
	{
   		if(count<5)
		{
        		for(i=0;i<num;i++)
			{
    	    			document.layers[i].left=x+Math.sin(i*Math.PI*2/num)*20*count
            			document.layers[i].top=y+Math.cos(i*Math.PI*2/num)*20*count
        		}
        		setTimeout('animation()',50)
    		}
		else 
		{
        		for(i=0;i<num;i++){
             		document.layers[i].left=-50
    	     		document.layers[i].top=-50
         	}
	}
    }

    count++;
}


//-->

</script>
	<!--
    	This script downloaded from www.JavaScriptBank.com
    	Come to view and download over 2000+ free javascript at www.JavaScriptBank.com
	-->