Jump to content
  • Checkout
  • Login
  • Get in touch

osCommerce

The e-commerce.

mouse effect javascript how to ?


yustis_83

Recommended Posts

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>

Link to comment
Share on other sites

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 >

Link to comment
Share on other sites

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>

');

 

?>

Link to comment
Share on other sites

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 >

Link to comment
Share on other sites

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?

Link to comment
Share on other sites

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.

Link to comment
Share on other sites

Archived

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

×
×
  • Create New...