mouse effect javascript how to ?

yustis_83 · 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:

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 · 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>

yustis_83 · 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', '

<tr>

</tr>

<tr>

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

</tr>

<tr>

</tr>

<tr>

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

<tr>

</tr>

<tr>

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

<tr>

<td>

</tr>

<tr>

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

<tr>

<td>

</tr>

<tr>

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

<tr>

</tr>

<tr>

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

</tr>

<tr>

</tr>

</table>

');

?>

germ · 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.

yustis_83 · 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

?>

SOMETHING LIKE THIS ? on the page i want to include the effect of javasript?

thesixthhouse · 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:

REPLACE WITH:

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.

mouse effect javascript how to ?

Recommended Posts

yustis_83

Link to comment

Share on other sites

germ

Link to comment

Share on other sites

yustis_83

Link to comment

Share on other sites

germ

Link to comment

Share on other sites

yustis_83

Link to comment

Share on other sites

thesixthhouse

Link to comment

Share on other sites

Archived

Browse

Activity