PDA

Click to See Complete Forum and Search --> : Adding a graphic to the script

babs239
12-30-2003, 12:19 AM
I am trying to add the falling snow to the front page of my website. I can get as far as the boxes for the snowflakes and they are falling but I can't seem to get the picture into the box. The instructions have two steps and the second one says to save the picture. I'm using eteamz and uploaded the picture but still cannot get it to show on the page.

It's making me nuts that I can't get it.....help!!
fredmv
12-30-2003, 12:23 AM
Welcome to the forums.

It would be hard to help you out without seeing some code, or even better, a link to the page you're having trouble with.
babs239
12-30-2003, 12:26 AM
Here's the page

http://www.eteamz.com/blackhawkgirlsbb/
babs239
12-30-2003, 12:37 AM
Here's the code:


<!-- TWO STEPS TO INSTALL SNOW:

1. Copy the coding into the BODY of your HTML document
2. Save the snow.gif image to your web site directory -->

<!-- STEP ONE: Paste this code into the BODY of your HTML document -->

<BODY>

<SCRIPT LANGUAGE="JavaScript1.2">
<!-- Original: Altan (snow@altan.hr) -->
<!-- Web Site: http://www.altan.hr/snow -->

<!-- This script and many more are available free online at -->
<!-- The JavaScript Source!! http://javascript.internet.com -->

<!-- Begin
var no = 25; // snow number
var speed = 10; // smaller number moves the snow faster
var snowflake = "http://www.your-web-site-address-here.com/snow.gif";

var ns4up = (document.layers) ? 1 : 0; // browser sniffer
var ie4up = (document.all) ? 1 : 0;
var dx, xp, yp; // coordinate and position variables
var am, stx, sty; // amplitude and step variables
var i, doc_width = 800, doc_height = 600;
if (ns4up) {
doc_width = self.innerWidth;
doc_height = self.innerHeight;
} else if (ie4up) {
doc_width = document.body.clientWidth;
doc_height = document.body.clientHeight;
}
dx = new Array();
xp = new Array();
yp = new Array();
am = new Array();
stx = new Array();
sty = new Array();
for (i = 0; i < no; ++ i) {
dx[i] = 0; // set coordinate variables
xp[i] = Math.random()*(doc_width-50); // set position variables
yp[i] = Math.random()*doc_height;
am[i] = Math.random()*20; // set amplitude variables
stx[i] = 0.02 + Math.random()/10; // set step variables
sty[i] = 0.7 + Math.random(); // set step variables
if (ns4up) { // set layers
if (i == 0) {
document.write("<layer name=\"dot"+ i +"\" left=\"15\" ");
document.write("top=\"15\" visibility=\"show\"><img src=\"");
document.write(snowflake + "\" border=\"0\"></layer>");
} else {
document.write("<layer name=\"dot"+ i +"\" left=\"15\" ");
document.write("top=\"15\" visibility=\"show\"><img src=\"");
document.write(snowflake + "\" border=\"0\"></layer>");
}
} else if (ie4up) {
if (i == 0) {
document.write("<div id=\"dot"+ i +"\" style=\"POSITION: ");
document.write("absolute; Z-INDEX: "+ i +"; VISIBILITY: ");
document.write("visible; TOP: 15px; LEFT: 15px;\"><img src=\"");
document.write(snowflake + "\" border=\"0\"></div>");
} else {
document.write("<div id=\"dot"+ i +"\" style=\"POSITION: ");
document.write("absolute; Z-INDEX: "+ i +"; VISIBILITY: ");
document.write("visible; TOP: 15px; LEFT: 15px;\"><img src=\"");
document.write(snowflake + "\" border=\"0\"></div>");
}
}
}
function snowNS() { // Netscape main animation function
for (i = 0; i < no; ++ i) { // iterate for every dot
yp[i] += sty[i];
if (yp[i] > doc_height-50) {
xp[i] = Math.random()*(doc_width-am[i]-30);
yp[i] = 0;
stx[i] = 0.02 + Math.random()/10;
sty[i] = 0.7 + Math.random();
doc_width = self.innerWidth;
doc_height = self.innerHeight;
}
dx[i] += stx[i];
document.layers["dot"+i].top = yp[i];
document.layers["dot"+i].left = xp[i] + am[i]*Math.sin(dx[i]);
}
setTimeout("snowNS()", speed);
}
function snowIE() { // IE main animation function
for (i = 0; i < no; ++ i) { // iterate for every dot
yp[i] += sty[i];
if (yp[i] > doc_height-50) {
xp[i] = Math.random()*(doc_width-am[i]-30);
yp[i] = 0;
stx[i] = 0.02 + Math.random()/10;
sty[i] = 0.7 + Math.random();
doc_width = document.body.clientWidth;
doc_height = document.body.clientHeight;
}
dx[i] += stx[i];
document.all["dot"+i].style.pixelTop = yp[i];
document.all["dot"+i].style.pixelLeft = xp[i] + am[i]*Math.sin(dx[i]);
}
setTimeout("snowIE()", speed);
}
if (ns4up) {
snowNS();
} else if (ie4up) {
snowIE();
}
// End -->
</script>

<!-- STEP TWO: Save the snow.gif image to your web site directory ->

<!-- Go to http://javascript.internet.com/img/snow/snow.gif

Right-click the image and "Save Image As..." -->

<p><center>
<font face="arial, helvetica" size="-2">Free JavaScripts provided<br>
by <a href="http://javascriptsource.com">The JavaScript Source</a></font>
</center><p>

<!-- Script Size: 3.39 KB -->
fredmv
12-30-2003, 12:56 AM
On this line:var snowflake = "http://www.your-web-site-address-here.com/snow.gif";Did you change that address to the location of the image on your server?
babs239
12-30-2003, 01:04 AM
I don't know how to do that on eteamz. Do I put the eteamz address in where the your site address here words are? I tried that and it didn't work.
fredmv
12-30-2003, 01:07 AM
It depends what the directory structure looks like, but that should be the basic idea of it. If it's on a different server, just point the script to that location. Upload the image, try accessing it, then simply use that location in your script.
stoodder
12-30-2003, 01:12 AM
isnt there like a new image funciton???


like var image = new Image("imgeurl") to load an image?
babs239
12-30-2003, 01:12 AM
Thanks so much. I had to go to the picture and open it and the right click to get the exact location, then insert that eacatly. It worked.... thanks so much.
fredmv
12-30-2003, 01:22 AM
You're very welcome. To answer you previous question, yes — there is an Image constructor but it wouldn't be used in an instance like this unless you wanted to preload the image. :D