yustis_83 Posted October 24, 2008 Posted October 24, 2008 hello i would like to know if someone knows how can i add a mouse effect to my oscommerce site. i have this code and i want to be able to use it on the site any ideas CODE: <script type="text/javascript"> var colour="#ffffff"; var sparkles=200; var x=ox=400; var y=oy=300; var swide=800; var shigh=600; var sleft=sdown=0; var tiny=new Array(); var star=new Array(); var starv=new Array(); var starx=new Array(); var stary=new Array(); var tinyx=new Array(); var tinyy=new Array(); var tinyv=new Array(); window.onload=function() { if (document.getElementById) { var i, rats, rlef, rdow; for (var i=0; i<sparkles; i++) { var rats=createDiv(3, 3); rats.style.visibility="hidden"; document.body.appendChild(tiny=rats); starv=0; tinyv=0; var rats=createDiv(5, 5); rats.style.backgroundColor="transparent"; rats.style.visibility="hidden"; var rlef=createDiv(1, 5); var rdow=createDiv(5, 1); rats.appendChild(rlef); rats.appendChild(rdow); rlef.style.top="2px"; rlef.style.left="0px"; rdow.style.top="0px"; rdow.style.left="2px"; document.body.appendChild(star=rats); } set_width(); sparkle(); }} function sparkle() { var c; if (x!=ox || y!=oy) { ox=x; oy=y; for (c=0; c<sparkles; c++) if (!starv[c]) { star[c].style.left=(starx[c]=x)+"px"; star[c].style.top=(stary[c]=y)+"px"; star[c].style.clip="rect(0px, 5px, 5px, 0px)"; star[c].style.visibility="visible"; starv[c]=50; break; } } for (c=0; c<sparkles; c++) { if (starv[c]) update_star©; if (tinyv[c]) update_tiny©; } setTimeout("sparkle()", 40); } function update_star(i) { if (--starv==25) star.style.clip="rect(1px, 4px, 4px, 1px)"; if (starv) { stary+=1+Math.random()*3; if (stary<shigh+sdown) { star.style.top=stary+"px"; starx+=(i%5-2)/5; star.style.left=starx+"px"; } else { star.style.visibility="hidden"; starv=0; return; } } else { tinyv=50; tiny.style.top=(tinyy=stary)+"px"; tiny.style.left=(tinyx=starx)+"px"; tiny.style.width="2px"; tiny.style.height="2px"; star.style.visibility="hidden"; tiny.style.visibility="visible" } } function update_tiny(i) { if (--tinyv==25) { tiny.style.width="1px"; tiny.style.height="1px"; } if (tinyv) { tinyy+=1+Math.random()*3; if (tinyy<shigh+sdown) { tiny.style.top=tinyy+"px"; tinyx+=(i%5-2)/5; tiny.style.left=tinyx+"px"; } else { tiny.style.visibility="hidden"; tinyv=0; return; } } else tiny.style.visibility="hidden"; } document.onmousemove=mouse; function mouse(e) { set_scroll(); y=(e)?e.pageY:event.y+sdown; x=(e)?e.pageX:event.x+sleft; } function set_scroll() { if (typeof(self.pageYOffset)=="number") { sdown=self.pageYOffset; sleft=self.pageXOffset; } else if (document.body.scrollTop || document.body.scrollLeft) { sdown=document.body.scrollTop; sleft=document.body.scrollLeft; } else if (document.documentElement && (document.documentElement.scrollTop || document.documentElement.scrollLeft)) { sleft=document.documentElement.scrollLeft; sdown=document.documentElement.scrollTop; } else { sdown=0; sleft=0; } } window.onresize=set_width; function set_width() { if (typeof(self.innerWidth)=="number") { swide=self.innerWidth; shigh=self.innerHeight; } else if (document.documentElement && document.documentElement.clientWidth) { swide=document.documentElement.clientWidth; shigh=document.documentElement.clientHeight; } else if (document.body.clientWidth) { swide=document.body.clientWidth; shigh=document.body.clientHeight; } } function createDiv(height, width) { var div=document.createElement("div"); div.style.position="absolute"; div.style.height=height+"px"; div.style.width=width+"px"; div.style.overflow="hidden"; div.style.backgroundColor=colour; return (div); } // ]]> </script>
germ Posted October 25, 2008 Posted October 25, 2008 Save the text in the code box below in a file named star.js and upload it into your catalog folder. var colour="#ffffff"; var sparkles=200; var x=ox=400; var y=oy=300; var swide=800; var shigh=600; var sleft=sdown=0; var tiny=new Array(); var star=new Array(); var starv=new Array(); var starx=new Array(); var stary=new Array(); var tinyx=new Array(); var tinyy=new Array(); var tinyv=new Array(); window.onload=function() { if (document.getElementById) { var i, rats, rlef, rdow; for (var i=0; i<sparkles; i++) { var rats=createDiv(3, 3); rats.style.visibility="hidden"; document.body.appendChild(tiny[i]=rats); starv[i]=0; tinyv[i]=0; var rats=createDiv(5, 5); rats.style.backgroundColor="transparent"; rats.style.visibility="hidden"; var rlef=createDiv(1, 5); var rdow=createDiv(5, 1); rats.appendChild(rlef); rats.appendChild(rdow); rlef.style.top="2px"; rlef.style.left="0px"; rdow.style.top="0px"; rdow.style.left="2px"; document.body.appendChild(star[i]=rats); } set_width(); sparkle(); }} function sparkle() { var c; if (x!=ox || y!=oy) { ox=x; oy=y; for (c=0; c<sparkles; c++) if (!starv[c]) { star[c].style.left=(starx[c]=x)+"px"; star[c].style.top=(stary[c]=y)+"px"; star[c].style.clip="rect(0px, 5px, 5px, 0px)"; star[c].style.visibility="visible"; starv[c]=50; break; } } for (c=0; c<sparkles; c++) { if (starv[c]) update_star(c); if (tinyv[c]) update_tiny(c); } setTimeout("sparkle()", 40); } function update_star(i) { if (--starv[i]==25) star[i].style.clip="rect(1px, 4px, 4px, 1px)"; if (starv[i]) { stary[i]+=1+Math.random()*3; if (stary[i]<shigh+sdown) { star[i].style.top=stary[i]+"px"; starx[i]+=(i%5-2)/5; star[i].style.left=starx[i]+"px"; } else { star[i].style.visibility="hidden"; starv[i]=0; return; } } else { tinyv[i]=50; tiny[i].style.top=(tinyy[i]=stary[i])+"px"; tiny[i].style.left=(tinyx[i]=starx[i])+"px"; tiny[i].style.width="2px"; tiny[i].style.height="2px"; star[i].style.visibility="hidden"; tiny[i].style.visibility="visible" } } function update_tiny(i) { if (--tinyv[i]==25) { tiny[i].style.width="1px"; tiny[i].style.height="1px"; } if (tinyv[i]) { tinyy[i]+=1+Math.random()*3; if (tinyy[i]<shigh+sdown) { tiny[i].style.top=tinyy[i]+"px"; tinyx[i]+=(i%5-2)/5; tiny[i].style.left=tinyx[i]+"px"; } else { tiny[i].style.visibility="hidden"; tinyv[i]=0; return; } } else tiny[i].style.visibility="hidden"; } document.onmousemove=mouse; function mouse(e) { set_scroll(); y=(e)?e.pageY:event.y+sdown; x=(e)?e.pageX:event.x+sleft; } function set_scroll() { if (typeof(self.pageYOffset)=="number") { sdown=self.pageYOffset; sleft=self.pageXOffset; } else if (document.body.scrollTop || document.body.scrollLeft) { sdown=document.body.scrollTop; sleft=document.body.scrollLeft; } else if (document.documentElement && (document.documentElement.scrollTop || document.documentElement.scrollLeft)) { sleft=document.documentElement.scrollLeft; sdown=document.documentElement.scrollTop; } else { sdown=0; sleft=0; } } window.onresize=set_width; function set_width() { if (typeof(self.innerWidth)=="number") { swide=self.innerWidth; shigh=self.innerHeight; } else if (document.documentElement && document.documentElement.clientWidth) { swide=document.documentElement.clientWidth; shigh=document.documentElement.clientHeight; } else if (document.body.clientWidth) { swide=document.body.clientWidth; shigh=document.body.clientHeight; } } function createDiv(height, width) { var div=document.createElement("div"); div.style.position="absolute"; div.style.height=height+"px"; div.style.width=width+"px"; div.style.overflow="hidden"; div.style.backgroundColor=colour; return (div); } // ]]> Then in each page you want it on, right after the <body> tag add this line: <script language="JavaScript" src="star.js" type="text/javascript"></script> If I suggest you edit any file(s) make a backup first - I'm not perfect and neither are you. "Given enough impetus a parallelogramatically shaped projectile can egress a circular orifice." - Me - "Headers already sent" - The definitive help "Cannot redeclare ..." - How to find/fix it SSL Implementation Help Like this post? "Like" it again over there >
yustis_83 Posted October 27, 2008 Author Posted October 27, 2008 you know i tried like you told me but still not working let me show you the code of the page i want to include this effect. i saved the text in a file named star.js in the catalog mine called shop so i am changing this: <script language="JavaScript" src="star.js"[/color] type="text/javascript"></script> to this : <script language="JavaScript" src="/shop/star.js"[/color] type="text/javascript"></script> and adding this to the code righ before : <table width="565" etc...> Let me know what iam doing wrong please thank you in advance. CODE: <?php define('NAVBAR_TITLE', 'New File Used for Brade Crumb'); define('HEADING_TITLE', 'RESOURCES2'); define('TEXT_INFORMATION', ' <table width="565" border="0" cellpadding="0" cellspacing="0" bgcolor="#000000" background="/shop/templates/theme055/images/allcrystalstovideo.png"> <!--DWLayoutTable--> <tr> <td width="38" height="191"></td> <td width="152"></td> <td width="19"></td> <td width="152"></td> <td width="19"></td> <td width="152"></td> <td width="24"></td> </tr> <tr> <td height="80"> </td> <td valign="top"><a href="java script:void(0);" NAME="My Window Name" title=" My title here " onClick=window.open("/shop/videos/pages/1080clr.html","Ratting","width=370,height=300,0,status=0,");><img src="http://crystalplace.com/shop/images/videoplay-button.png" alt="" border="0" width="152" height="42" align="middle" /></a> </td> <td> </td> <td valign="top"><a href="java script:void(0);" NAME="My Window Name" title=" My title here " onClick=window.open("/shop/videos/pages/1502clr.html","Ratting","width=370,height=300,0,status=0,");><img src="http://crystalplace.com/shop/images/videoplay-button.png" alt="" border="0" width="152" height="42" align="middle" /></a> </td> <td> </td> <td valign="top"><a href="java script:void(0);" NAME="My Window Name" title=" My title here " onClick=window.open("/shop/videos/pages/870red.html","Ratting","width=370,height=300,0,status=0,");><img src="http://crystalplace.com/shop/images/videoplay-button.png" alt="" border="0" width="152" height="42" align="middle" /></a> </td> <td> </td> </tr> <tr> <td height="140"></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> </tr> <tr> <td height="81"> </td> <td valign="top"><a href="java script:void(0);"NAME="My Window Name" title=" My title here " onClick=window.open("/shop/videos/pages/701clr.html","Ratting","width=370,height=300,0,status=0,");><img src="http://crystalplace.com/shop/images/videoplay-button.png" alt="" border="0" width="152" height="42" align="middle" /></a> </td> <td> </td> <td valign="top"> <a href="java script:void(0);"NAME="My Window Name" title=" My title here " onClick=window.open("/shop/videos/pages/401clr.html","Ratting","width=370,height=300,0,status=0,");><img src="http://crystalplace.com/shop/images/videoplay-button.png" alt="" border="0" width="152" height="42" align="middle" /></a> <td> <td valign="top"> <a href="java script:void(0);"NAME="My Window Name" title=" My title here " onClick=window.open("/shop/videos/pages/873clr.html","Ratting","width=370,height=300,0,status=0,");><img src="http://crystalplace.com/shop/images/videoplay-button.png" alt="" border="0" width="152" height="42" align="middle" /></a> <td> </tr> <tr> <td height="139"></td> <td> </td> <td> </td> <td> </td> <td> </td> <td> </td> <td> </td> </tr> <tr> <td height="80"></td> <td valign="top"><a href="java script:void(0);"NAME="My Window Name" title=" My title here " onClick=window.open("/shop/videos/pages/2020clr.html","Ratting","width=370,height=300,0,status=0,");><img src="http://crystalplace.com/shop/images/videoplay-button.png" alt="" border="0" width="152" height="42" align="middle" /></a> <td> </td> <td valign="top"> <a href="java script:void(0);"NAME="My Window Name" title=" My title here " onClick=window.open("/shop/videos/pages/1875amb.html","Ratting","width=370,height=300,0,status=0,");><img src="http://crystalplace.com/shop/images/videoplay-button.png" alt="" border="0" width="152" height="42" align="middle" /></a> <td> <td valign="top"> <a href="java script:void(0);"NAME="My Window Name" title=" My title here " onClick=window.open("/shop/videos/pages/911clr.html","Ratting","width=370,height=300,0,status=0,");><img src="http://crystalplace.com/shop/images/videoplay-button.png" alt="" border="0" width="152" height="42" align="middle" /></a> <td> </tr> <tr> <td height="133"></td> <td> <td> <td> <td> <td> <td> </tr> <tr> <td height="80"></td> <td valign="top"> <a href="java script:void(0);"NAME="My Window Name" title=" My title here " onClick=window.open("/shop/videos/pages/872clr.html","Ratting","width=370,height=300,0,status=0,");><img src="http://crystalplace.com/shop/images/videoplay-button.png" alt="" border="0" width="152" height="42" align="middle" /></a> <td> <td valign="top"> <a href="java script:void(0);"NAME="My Window Name" title=" My title here " onClick=window.open("/shop/videos/pages/874clr.html","Ratting","width=370,height=300,0,status=0,");><img src="http://crystalplace.com/shop/images/videoplay-button.png" alt="" border="0" width="152" height="42" align="middle" /></a> <td> <td valign="top"> <a href="java script:void(0);"NAME="My Window Name" title=" My title here " onClick=window.open("/shop/videos/pages/775clr.html","Ratting","width=370,height=300,0,status=0,");><img src="http://crystalplace.com/shop/images/videoplay-button.png" alt="" border="0" width="152" height="42" align="middle" /></a> <td> </tr> <tr> <td height="141"></td> <td> <td> <td> <td> <td> <td> </tr> <tr> <td height="80"></td> <td valign="top"><a href="java script:void(0);"NAME="My Window Name" title=" My title here " onClick=window.open("/shop/videos/pages/610clr.html","Ratting","width=370,height=300,0,status=0,");><img src="http://crystalplace.com/shop/images/videoplay-button.png" alt="" border="0" width="152" height="42" align="middle" /></a> <td></td> <td valign="top"> <a href="java script:void(0);"NAME="My Window Name" title=" My title here " onClick=window.open("/shop/videos/pages/1877clr.html","Ratting","width=370,height=300,0,status=0,");><img src="http://crystalplace.com/shop/images/videoplay-button.png" alt="" border="0" width="152" height="42" align="middle" /></a> <td> <td valign="top"> <a href="java script:void(0);"NAME="My Window Name" title=" My title here " onClick=window.open("/shop/videos/pages/904clr.html","Ratting","width=370,height=300,0,status=0,");><img src="http://crystalplace.com/shop/images/videoplay-button.png" alt="" border="0" width="152" height="42" align="middle" /></a> <td> </tr> <tr> <td height="140"></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> </tr> <tr> <td height="80"></td> <td valign="top"><a href="java script:void(0);"NAME="My Window Name" title=" My title here " onClick=window.open("/shop/videos/pages/505clr.html","Ratting","width=370,height=300,0,status=0,");><img src="http://crystalplace.com/shop/images/videoplay-button.png" alt="" border="0" width="152" height="42" align="middle" /></a> <td> </td> <td valign="top"> <a href="java script:void(0);"NAME="My Window Name" title=" My title here " onClick=window.open("/shop/videos/pages/1050clrchn.html","Ratting","width=370,height=300,0,status=0,");><img src="http://crystalplace.com/shop/images/videoplay-button.png" alt="" border="0" width="152" height="42" align="middle" /></a> <td> </td> <td> </td> <td> </td> </tr> <tr> <td height="2"></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> </tr> </table> '); ?>
germ Posted October 27, 2008 Posted October 27, 2008 I haven't a freakin' clue what it is you're trying to do. :huh: You asked a question. I gave an answer. If I suggest you edit any file(s) make a backup first - I'm not perfect and neither are you. "Given enough impetus a parallelogramatically shaped projectile can egress a circular orifice." - Me - "Headers already sent" - The definitive help "Cannot redeclare ..." - How to find/fix it SSL Implementation Help Like this post? "Like" it again over there >
yustis_83 Posted October 27, 2008 Author Posted October 27, 2008 I haven't a freakin' clue what it is you're trying to do. :huh: You asked a question. I gave an answer. i guess to simplify my question. i should put the code like <?php <script language="JavaScript" src="star.js" type="text/javascript"></script> ?> SOMETHING LIKE THIS ? on the page i want to include the effect of javasript?
thesixthhouse Posted October 27, 2008 Posted October 27, 2008 No yustis_83, it's not PHP that you're adding. You COULD do it like you want - PHP-style that is - but then it should be something like this: <? echo '<script language="JavaScript" src="star.js" type="text/javascript"></script>'; ?> But I think the question is not HOW you put it in your code, but WHERE. My guess would be to put it in the file header.php, which resides in the includes-directory. FIND: <table border="0" width="100%" cellspacing="0" cellpadding="0"> <tr class="header"> REPLACE WITH: <script language="JavaScript" src="star.js" type="text/javascript"></script> <table border="0" width="100%" cellspacing="0" cellpadding="0"> <tr class="header"> Thing is you have to include the reference to your Javascript-file as high up on the pages as possible for it to have an effect. Hope this helps.
Recommended Posts
Archived
This topic is now archived and is closed to further replies.