Peep Show - JavaScript Made Easy: Free JavaScripts Tutorials Example Code

WebSiteMadeEasy.net

|

FontsMadeEasy.com

|

RankChecker.net

Submit your Script

Google Search:

Learn Java Script Today

|

Over 5000 Free Fonts

|

|

Javascript Forum

|

Other Javascript Resources

|

JavaScript Basics

Inserting Javascript

Complete Tutorial

Advance DHTML Tutorial


Peep Show		[View Sample]

Peep show is a the new exciting way to let your visitors discover your photos and images. Just use the 4 arrows!


Insert into <HEAD>
script language=javaScript> <!-- Beginning of JavaScript - bild0 = new Image(); bild0.src = "peep1310.gif"; bild1 = new Image(); bild1.src = "behind1310.jpg"; var moveimageby var x var y var stopit=0 var speed=5 var timer function stopmov() { stopit=1 } function showonload() { if(document.all) { document.all.mainbod.style.posLeft=250 document.all.preloadinfo.style.posLeft=-1000 document.all.behind.style.posLeft=-320 document.all.peep.style.posLeft=-100 } else if(document.layers) { document.mainbod.left=250 document.preloadinfo.left=-1000 document.behind.left=-320 document.peep.left=-100 } } function choosedirection(direction) { stopit=0 moveimageby = direction if (moveimageby=='left'){x=speed; y=0} if (moveimageby=='right'){x=-speed; y=0} if (moveimageby=='up'){x=0; y=speed} if (moveimageby=='down'){x=0; y=-speed} moveimage() } function moveimage() { if(document.all && stopit==0) { document.all.behind.style.posLeft+=x document.all.behind.style.posTop+=y timer=setTimeout("moveimage()",100) } else if(document.layers && stopit==0) { document.behind.left+=x document.behind.top+=y timer=setTimeout("moveimage()",100) } else { clearTimeout(timer) } } // - End of JavaScript - --> </script>

Insert into <BODY>
<body onLoad="showonload()"> <div id="behind" style="position:absolute;visibility:visible;top:30px;left:-1000px"><img src="behind1310.jpg" border=0></div> <div id="peep" style="position:absolute;visibility:visible;top:-50px;left:-1000px"> <table cellspacing="0" cellpadding="0" border="0"> <tr> <td height=100 width=200 bgcolor="#000000">.</td> <td bgcolor="#000000">.</td> <td width=2000 bgcolor="#000000">.</td> </tr> <tr> <td height=100 bgcolor="#000000">.</td> <td><MAP Name="titelbild.map"> <AREA shape="rect" Coords="0,58 25,82" onMouseOver="choosedirection('left')" onMouseOut="stopmov()" href="#"> <AREA shape="rect" Coords="114,56 139,83" onMouseOver="choosedirection('right')" onMouseOut="stopmov()" href="#"> <AREA shape="rect" Coords="60,115 82,139" onMouseOver="choosedirection('down')" onMouseOut="stopmov()" href="#"> <AREA shape="rect" Coords="58,0 81,25" onMouseOver="choosedirection('up')" onMouseOut="stopmov()" href="#"> </MAP><img SRC="peep1310.gif" border=0 usemap="#titelbild.map"></td> <td width=2000 bgcolor="#000000">.</td> </tr> <tr> <td bgcolor="#000000">.</td> <td bgcolor="#000000">.</td> <td height=400 width=2000 bgcolor="#000000">.</td> </tr> </table></div> <div id="mainbod" style="position:absolute;visibility:visible;top:80px;left:-1000px;width:200px"> <b><font size=1 face="Verdana" color=FFFFFF>Move your mouse over the yellow arrows in order to peep through the hole.</font><br><br><br><a href="http://www.24fun.ch" target="_blank"><font size=1 face="Verdana" color=FFFFFF>Download more than 100 funscripts</font></b></A> </div> <div id="preloadinfo" style="position:absolute;visibility:visible;top:250px;left:250px"> <font size=1 face="Verdana" color=FFFFFF><b>Images are loading. Please wait ...</b></font></A> </div>

Other Options