PDA

Click to See Complete Forum and Search --> : using Arrays

hutchstarsky
04-30-2003, 08:01 PM
I am in an entry level web dev class and have made this javascript program - The images will not show, not to mention change. Can someone, please help me narrow in on my program error.

<html>
<head>
<title>Clinic8</title>
<!-- Renee Gilbert,04/26/03, Assisgnment 8-1--->
<!--Generate random image file -->
<script language="JavaScript">
<!--Hide from non-JavaScript browsers
function ImageName(number)
{
var Image = new Array();
Image[0] ="image1.jpg";
Image[1] ="image2.jpg";
Image[2] ="image3.jpg";
return ImageName [number];
}
//Stop hiding -->
</script>
</head>

<body bgcolor="silver" text="navy">
<h1 align="center"><font color="darkblue" face="monospace">My Home Page</font></h1>
<hr align="center" size="2" width = "100%" color="navy" noshade>

<h2>Welcome to my Web site!</h2>
<p>

<script language="JavaScript">
<!--Hide from non-JavaScript browsers
var ImageName=Image;
number = Math.round()*2;
var name = ImageName();
document.write('<img scr=() "+name+" width=200 height=200 align="left">');
//Stop hiding -->
</script>


</p>

<p> To display different images on my Home web page I used JavaScript language.
You can use all of the JavaScript expressions and operators to create your
own customized functions. A function is a series of commands that performs
an action or calculates a value. A function consists of the function name,
which identifies it; parameters, which are values used by the function; and
a set of commands that are run when the function is used. Function names are
case-sensitive. The function name must begin with a letter or underscore (_)
and cannot contain any spaces. A command block is a group
of commands within a function that is delimited by curly braces. There is
no limit to the number of function parameters that a function may contain.
The parameters must be placed within parentheses, following the function name
and the parameters must be separated by commas.
</p>

</body>
</html>
beebob
04-30-2003, 09:04 PM
you initialize a new image object normally like that


var img = new Image();
img.src = "yourimage.jpg";
...


you maybe want to do this?


<script>
function myImage(number)
{
var Image = new Array();
Image[0] = new Image();
Image[0].src ="image1.jpg";
Image[1] = new Image();
Image[1].src ="image2.jpg";
Image[2] = new Image();
Image[2].src ="image3.jpg";

return Image[number];
}

img1 = myImage(0);
img2 = myImage(1);
img3 = myImage(2);

document.writeln('<img scr= "+img1.src+" width=200 height=200 align="left">');

document.writeln('<img scr= "+img2.src+" width=200 height=200 align="left">');

document.writeln('<img scr= "+img3.src+" width=200 height=200 align="left">');
</script>


beebob
Nedals
04-30-2003, 09:28 PM
Looking at the code you posted, I'm not sure what you want to do.
When changing images within a document, after the document has loaded, there are two seperate things you need to do.

1. Preload your images using (posted by beebob)
var img = new Image(); img.src = "yourimage.jpg";
(not in a function OR in a function activated onLoad)

2. Create your image change function.
function chgImage(img) {
document.imagename.src = img; // img = "yourimage.jpg"
}

Hope that helps!
beebob
04-30-2003, 09:30 PM
yeah, I even was wondering a bit.
maybe there were problems while pasting?