Author Topic: Help with Javascript code! (Read 12854 times)

lancebvs · « **on:** August 10, 2008, 03:44:52 PM »

I am trying to add the random picture and link code to my website. Here is the page I want to add it to:

http://www.stringsdepotplus.com/index3.html

As you can see, the green box on the right hand side is empty when there should be the random picture there. Here is the code:

Code: [Select]

<script language="JavaScript"><!--

//Javascript Created by Computerhope http://www.computerhope.com

//store the quotations in arrays

images = new Array(2);

images[0] = "<a href = 'http://www.stringsdepotplus.com/summer.html'><img src='http://www.stringsdepotplus.com/images/free%20string%20ad.gif' alt='Free Strings'></a>";

images[1] = "<a href = 'http://www.stringsdepotplus.com/store/Other-Products-Sports-Medicine/c50_72/index.html'><img src='http://www.stringsdepotplus.com/images/test_01.gif' alt='Traumeel></a>";

index = Math.floor(Math.random() * images.length);

document.write(images[index]);

//done

// --></script>

How can I fix this? Thanks for any help.

ChrisXPPro · « **Reply #1 on:** August 10, 2008, 04:30:49 PM »

I'm no jscript guru but I am thinking (rightly or wrongly) that the call for the image may be a problem.

img src='http://www.stringsdepotplus.com/images/free%20string%20ad.gif' alt='Free Strings'

I have had problems before with filenames with spaces and so would change the filename itself and the path reference to ........

free-string-ad.gif' alt='Free Strings - I don't like spaces even if html should interpret that ---- always use underscores or hyphens.

lordvader781 · « **Reply #2 on:** August 10, 2008, 07:33:50 PM »

If I were you I would only store the paths to the images in the array to make the code easier to read. You could then just access the image directly by giving the image an ID. You may want to pick a default image and put that in the "src" of the "img" tag in case a user has javascript turned off. That way an image will still be displayed.

Code: [Select]

Javascript:
<script type="text/javascript">
function random() {
var images = new Array("img1.gif","img2.gif","img3.gif");

var index = Math.floor(Math.random() * images.length);
document.getElementById("randomImage").src = images[index];
}
</script>

HTML:
<img id="randomImage" src="" alt="test" />

kpac · « **Reply #3 on:** August 11, 2008, 02:59:33 AM »

You could try something like this.... Which is like your original one:

Code: [Select]

<html>
<head>
<title>MyPage</title>
<script language="JavaScript">
<!--

//Javascript Created by Computerhope http://www.computerhope.com

//store the quotations in arrays

var images = new Array(2);

images[0] = "<a href = 'http://www.stringsdepotplus.com/summer.html'><img src='http://www.stringsdepotplus.com/images/free%20string%20ad.gif' alt='Free Strings'></a>";

images[1] = "<a href = 'http://www.stringsdepotplus.com/store/Other-Products-Sports-Medicine/c50_72/index.html'><img src='http://www.stringsdepotplus.com/images/test_01.gif' alt='Traumeel></a>";

var index = Math.floor(Math.random() * images.length);

document.image_bg.style.backgroundImage = images[index];

// -->
</script>
</head>

<body>
<div name="image_bg" id="image_bg"><!-- Image will go here --></div>
</body>
</html>

Does this work?

lancebvs · « **Reply #4 on:** August 11, 2008, 05:55:27 PM »

kpac: I tried the suggestion it did not work. I also tried to get rid of the spaces in the image file name.

lordvader781: I didn't quite understand you. Is that the entire code I need to put into the body tags?

kpac · « **Reply #5 on:** August 12, 2008, 03:14:16 AM »

In lordvader781's script, the JavaScript would go into the <head> and the <img>, obviously enough, would be in the <body>. Does it work?

lancebvs · « **Reply #6 on:** August 12, 2008, 11:25:36 AM »

So I put that script into the head tags? And what code do I put into the body tags?

kpac · « **Reply #7 on:** August 12, 2008, 11:49:20 AM »

The script would go into the <head> and the <img> would be in the <body>.

lancebvs · « **Reply #8 on:** August 12, 2008, 12:06:39 PM »

OK, but how do I write up the code for the image tags? Do I just write the image url wherever I want in the body tag?

Thanks so much!

kpac · « **Reply #9 on:** August 12, 2008, 01:15:36 PM »

This is lordvader781's script:

Quote from: lordvader781 on August 10, 2008, 07:33:50 PM

Code: [Select]
Javascript: <script type="text/javascript"> function random() { var images = new Array("img1.gif","img2.gif","img3.gif"); var index = Math.floor(Math.random() * images.length); document.getElementById("randomImage").src = images[index]; } </script> HTML: <img id="randomImage" src="" alt="test" />

This would be the full source:

Code: [Select]

<html>
  <head>
    <script type="text/javascript">
      function random() 
      {
        var images = new Array("file_one","file_two","ifile_three");
        var index = Math.floor(Math.random() * images.length);
        document.getElementById("randomImage").src = images[index];
      }
    </script>
  </head>

  <body>
    <img id="randomImage" src="" alt="Random Image" />
  </body>
</html>

---------

I'm looking for an example script I found a while back and I'll post it, or the link, when I find it.

lancebvs · « **Reply #10 on:** August 12, 2008, 02:12:53 PM »

Thanks for the reply. So where it says source after img id, I put the url of the image? Where do I put the link?

kpac · « **Reply #11 on:** August 12, 2008, 02:35:06 PM »

You don't need to change the source of the image at all.... That's what the script is for.

In the script, you type in the links to the images in this line:

Code: [Select]

var images = new Array("file_one","file_two","ifile_three");

... And you can add as many as you like. Just use the same format as shown above.

The whole document with the link:

Code: [Select]

<html>
  <head>
    <script type="text/javascript">
      function random() 
      {
        var images = new Array("file_one","file_two","ifile_three");
        var index = Math.floor(Math.random() * images.length);
        document.getElementById("randomImage").src = images[index];
      }
    </script>
  </head>

  <body>
    <a href="http://www.sitename.com/image.jpg"><img id="randomImage" src="" alt="Random Image" /></a>
  </body>
</html>

How's that?

lancebvs · « **Reply #12 on:** August 12, 2008, 04:21:08 PM »

So in the head tag where it says file one, file two, etc., I type in the image url. ?

And after each one, do I put a comma?

If I understand correctly, no image names go into the body script? What about the linking url of the image?

Sorry but I am getting confused where I should put the image. Let's say this is one of the images I want to use:

http://www.stringsdepotplus.com/images/free_string_ad.gif

And I want it to link to:

http://www.stringsdepotplus.com/summer.html

And the alt tag: Free Strings

So can you show me please how to accomplish this?

Thanks for your time.

lordvader781 · « **Reply #13 on:** August 13, 2008, 12:13:39 AM »

Quote

So in the head tag where it says file one, file two, etc., I type in the image URL. ?

And after each one, do I put a comma?

Yes, that is correct.

Quote

If I understand correctly, no image names go into the body script?

Technically you are correct. Though, as I said in my first post, I would recommend you pick one image and put that in the 'src' attribute of the image tag. The reason for this is so that an image will still be displayed if a user has javascript disabled. If a user does have javascript enabled it will be overwritten with the image randomly selected.

Quote

What about the linking URL of the image?

You want the image to be a link? Does each image go to the same link or does each image have its own link? I assume you mean multiple links. There are several ways to go about this. You could use two arrays, one to hold the image paths and one to hold the links. You could also you one array that is two-dimensioned, or an array of arrays. The option below utilizes a two dimensioal array.

Code: [Select]

<html>
  <head>
    <script type="text/javascript">
      function random() 
      {
        //The 3 below can be changed to what ever you want 
        //depending on the number of images/links you have.
        var images = new Array(3);
        images[0] = new Array(2);
        images[0][0] = "image0.jpg";
        images[0][1] = "page0.html";
        images[1] = new Array(2);
        images[1][0] = "image1.jpg";
        images[1][1] = "page1.html";
        images[2] = new Array(2);
        images[2][0] = "image2.jpg";
        images[2][1] = "page2.html";

        var index = Math.floor(Math.random() * images.length);

        document.getElementById("randomImage").src = images[index][0];
        document.getElementById("randomLink").href = images[index][1];
      }
    </script>
  </head>

  <body onload="random()">
    <a id="randomLink" href="http://www.sitename.com/image.jpg"><img id="randomImage" src="img.jpg" alt="Random Image" /></a>
  </body>
</html>

I've tested the code above with some sample images and links. It ran perfectly for me. If you need any help understanding anything in the code above feel free to ask. I enjoy working with HTML, Javascript, and CSS. In my spare time at my internship for school I've been creating a custom message box using Javascript and CSS.

lancebvs · « **Reply #14 on:** August 13, 2008, 03:37:38 PM »

I got it to work on a test page: http://www.stringsdepotplus.com/news_01.html

However there are 2 major problems:

1. I cannot seem to get it to work on one of my pages. i have a test home page:

http://www.stringsdepotplus.com/index2.html

How can I get it to work in the green box? It seems the body tag listed above screws everything up... Maybe I am inserting it a wrong way into dreamweaver?

2. Another problem is that when clicking refresh, sometimes I get a white box with a red x and it says "Random Image". You can see what I mean by going the first link I provided.

Any help is appreciated.

Computer Hope Forum

News:

Author Topic: Help with Javascript code! (Read 12854 times)

lancebvs

Help with Javascript code!

ChrisXPPro

Re: Help with Javascript code!

lordvader781

Re: Help with Javascript code!

kpac

Re: Help with Javascript code!

lancebvs

Re: Help with Javascript code!

kpac

Re: Help with Javascript code!

lancebvs

Re: Help with Javascript code!

kpac

Re: Help with Javascript code!

lancebvs

Re: Help with Javascript code!

kpac

Re: Help with Javascript code!

lancebvs

Re: Help with Javascript code!

kpac

Re: Help with Javascript code!

lancebvs

Re: Help with Javascript code!

lordvader781

Re: Help with Javascript code!

lancebvs

Re: Help with Javascript code!