on 2005 Sep 30 7:39 AM
Hi
I'm following the previous post and accordingly i was able to display a image on the iView.
Now I've a list of images
say image1.jpg, image2.jpg, image3.jpg and so on..
Now i want to pick any one of them and display any one of them. how do i go about this.
Following is the code which i wrote can't find the error in it.
<script type="javascript">
var images = new Array();
images[0] = "/images/birds.jpg";
images[1] = "/images/child.jpg";
images[2] = "/images/dolphin1.jpg";
images[3] = "/images/dolphin2.jpg";
images[4] = "/images/fish.jpg";
images[5] = "/images/kayak.jpg";
images[6] = "/images/man.jpg";
images[7] = "/images/pasture1.jpg";
images[8] = "/images/pasture2.jpg";
images[9] = "/images/pasture3.jpg";
images[10] = "/images/runner.jpg";
var rannum = Math.floor(Math.random()*11)
var choice = images[rannum];
</script>
<% String image2 = componentRequest.getWebResourcePath() + "/images/insidetrack3.gif"; %>
<% String image1 = componentRequest.getWebResourcePath() + "/images/pasture1.jpg";%>
<IMG SRC="<%=image1%>" WIDTH="340" HEIGHT="238" BORDER="0" ALIGN="left">
<IMG SRC="<%=image2%>" WIDTH="360" HEIGHT="238" BORDER="0">
can anyone help me out.
Thanks in advance
Srikant
Hi,
you do not use the calculated image "choice". You always refer to "/images/insidetrack3.gif"; and "/images/pasture1.jpg";%.
You must be a registered user to add a comment. If you've already registered, sign in. Otherwise, register and sign in.
Hi Martin
10X, I want to use the following code in following manner :
<script type="javascript">
var images = new Array();
images[0] = "/images/birds.jpg";
images[1] = "/images/child.jpg";
images[2] = "/images/dolphin1.jpg";
images[3] = "/images/dolphin2.jpg";
images[4] = "/images/fish.jpg";
images[5] = "/images/kayak.jpg";
images[6] = "/images/man.jpg";
images[7] = "/images/pasture1.jpg";
images[8] = "/images/pasture2.jpg";
images[9] = "/images/pasture3.jpg";
images[10] = "/images/runner.jpg";
var rannum = Math.floor(Math.random()*11)
var choice = images[rannum];
</script>
<% String image2 = componentRequest.getWebResourcePath() + "var1"; %>
<% String image1 = componentRequest.getWebResourcePath() + choice;%>
<IMG SRC="<%=image1%>" WIDTH="340" HEIGHT="238" BORDER="0" ALIGN="left">
<IMG SRC="<%=image2%>" WIDTH="360" HEIGHT="238" BORDER="0">
FYI, I have kept all those images in the dist-> images folder.
can you tell me how I can rectiify this here!!!
Thanks in advance
Srikant
I think the problem is that you mix up client side scripting with server side scripting, right? The first script part is executed on the client while the second part (which ist between <% %>) is executed on the server. The variable "choice" is not available during the time your page is rendered on the server.
Hi Srikant,
I didn't quite get what you're trying to pass for the first image? What's inside your var1 variable?
You could do the whole thing by using javascript. First you code your random image function and then you can call it from your page by adding another javascript to the place where you want your images to show up.
Take a look on this example which will show how to show one random image:
<b><i>Here's the javascript for random images which is about the same as yours:</i></b>
<script language="JavaScript">
<!--
var theImages = new Array() // do not change this
theImages[0] = '/images/1.jpg';
theImages[1] = '/images/2.jpg';
theImages[2] = '/images/3.jpg';
theImages[3] = '/images/4.jpg';
theImages[4] = '/images/5.jpg';
theImages[5] = '/images/6.jpg';
var j = 0;
var p = theImages.length;
var preBuffer = new Array()
for (i = 0; i < p; i++){
preBuffer<i> = new Image()
preBuffer<i>.src = theImages<i>
}
var whichImage = Math.round(Math.random()*(p-1));
//-->
</script>
<b><i>Put this code on the page where you want the random image to show up:</i></b>
<script language="JavaScript">
<!--
document.write('<img src="'+theImages[whichImage]+'">');
//-->
</script>
Regards,
Ville
Hi Ville
This has been useful post for me but still i'm not able to display the image.
I've written the following code:
<script type="javascript">
var images = new Array();
images[0] = '/images/birds.jpg';
images[1] = '/images/child.jpg';
images[2] = '/images/dolphin1.jpg';
images[3] = '/images/dolphin2.jpg';
images[4] = '/images/fish.jpg';
images[5] = '/images/kayak.jpg';
images[6] = '/images/man.jpg';
images[7] = '/images/pasture1.jpg';
images[8] = '/images/pasture2.jpg';
images[9] = '/images/pasture3.jpg';
images[10] = '/images/runner.jpg';
var j = 0;
var p = images.length;
var preBuffer = new Array()
for (j = 0; j < p; j++)
{
preBuffer = new Image()
preBuffer.src = images
}
var whichImage = Math.round(Math.random()*(p-1));
</script>
<% String image1 = componentRequest.getWebResourcePath() + images(whichImage)%>
<IMG SRC="<%=image1%>" WIDTH="235" HEIGHT="238" BORDER="0">
Can you please let me know where I'm going wrong??[
Thanks in advance
Srikant
P.S. 10X for your help
This might help you:
http://www.davelozinski.com/scripts/random_image/index.php?1128183384359
Regards.
Hi Srikant,
Your image should appear on the page if you use the codes I posted above. You just place the last bit of code where you want the image to appear.
But if you want to use also server side code in your your random image display you can take a look on the page Peter just posted. There's a full example how to get the random image working in .jsp:
http://www.davelozinski.com/scripts/random_image/random_image2.jsp.txt
Regards,
Ville
Hi Srikant,
You are still mixing your server and client-side scripting.
-
As Ville said, replace:
<% String image1 = componentRequest.getWebResourcePath() + images(whichImage)%>
<IMG SRC="<%=image1%>" WIDTH="235" HEIGHT="238" BORDER="0">
with
<script language="JavaScript">
<!--
document.write('<img src="'theImages[whichImage]'">');
//-->
</script>
-
Hope this helps.
Daniel
Hi,
what are you trying to achieve?
You render static images on the page and some JavaScript
that holds a collection of URL's to other images.
From this collection you basically pick 1 with the Math.random() call and store the url in a variable choice. Well... storing a URL string in a variable does usually not make any Image Object visible.
If you want to apply the image to an existing image on the page you have to do that via JavaScript,
basically like this:
<script type="javascript">
var images = new Array();
images[0] = "/images/birds.jpg";
images[1] = "/images/child.jpg";
images[2] = "/images/dolphin1.jpg";
images[3] = "/images/dolphin2.jpg";
images[4] = "/images/fish.jpg";
images[5] = "/images/kayak.jpg";
images[6] = "/images/man.jpg";
images[7] = "/images/pasture1.jpg";
images[8] = "/images/pasture2.jpg";
images[9] = "/images/pasture3.jpg";
images[10] = "/images/runner.jpg";
var rannum = Math.floor(Math.random()*11)
var choice = images[rannum];
<b>document.getElementById("myimage1").src=choice;
document.getElementById("myimage2").src=choice;</b>
</script>
<% String image2 = componentRequest.getWebResourcePath() + "/images/insidetrack3.gif"; %>
<% String image1 = componentRequest.getWebResourcePath() + "/images/pasture1.jpg";%>
<IMG <b>id=myimage1</b> SRC="<%=image1%>" WIDTH="340" HEIGHT="238" BORDER="0" ALIGN="left">
<IMG <b>id=myimage2</b> SRC="<%=image2%>" WIDTH="360" HEIGHT="238" BORDER="0">
If you like to do the random part on the server side you should also have you Array of URL's and the random call on the server side.
Best Regards
Martin
You must be a registered user to add a comment. If you've already registered, sign in. Otherwise, register and sign in.
User | Count |
---|---|
66 | |
10 | |
10 | |
10 | |
10 | |
8 | |
6 | |
5 | |
4 | |
4 |
You must be a registered user to add a comment. If you've already registered, sign in. Otherwise, register and sign in.