Jump to content
  • Checkout
  • Login
  • Get in touch

osCommerce

The e-commerce.

mouse effect javascript how to ?


yustis_83

Recommended Posts

Posted

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>

Posted

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 >

Posted

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>

');

 

?>

Posted

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 >

Posted
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?

Posted

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.

Archived

This topic is now archived and is closed to further replies.

×
×
  • Create New...