Hatrack River Forum: Need some Javascript help

This is topic Need some Javascript help in forum Books, Films, Food and Culture at Hatrack River Forum.

To visit this topic, use this URL:
http://www.hatrack.com/ubb/main/ultimatebb.php?ubb=get_topic;f=2;t=037973

Posted by Jon Boy (Member # 4284) on :

Cross-post from GalacticCactus

I'm trying to write some simple Javascript to randomly change the picture on the main page every time the page is loaded. It sounds simple enough, but it's not working. I wasn't that great at Javascript when I was still taking the web publishing class, and I've had five months to forget everything I learned. Can someone give me a hand? Thanks.

Posted by Dagonee (Member # 5818) on :

Jon, why are you doing this in JavaScript? If you have server-side scripting capabilities, this is trivial. I don't know how a specific method in JavaScript, though.

If you must use JavaScript, check out some sites with image rollovers. That will show you how to change the image being displayed by an img tag, which should get you most of the way there.

Posted by Jon Boy (Member # 4284) on :

I'm doing it in JavaScript because I don't know PHP. I really should learn, I suppose.

Posted by Dagonee (Member # 5818) on :

OK. If no one else gives you a solution here or at GC, I'll try to find something later when I get back from school.

If your server supports PHP as is, I may post a solution in PHP. If you would have to reconfigure, I'll look for a pure JS solution.

Posted by Jon Boy (Member # 4284) on :

My host supports PHP. I've done a little searching, and I think I've found some scripts that would work. I'll try them out when I get home and let you know if I need any more help. Thanks, Dag.

Posted by Mike (Member # 55) on :

It's actually not so bad to do this in javascript rather than php. Here's an example:

code:

<html>
<head>
<title></title>

<script>
<!--

window.onload = function () {
    img = document.getElementById("main_img");

    // make a list manually here
    imageList = [
        "red.png",
        "green.png",
        "blue.png"
        ];

    newImage = imageList[Math.floor(imageList.length * Math.random())];

    img.src = newImage;
};

// -->
</script>

</head>
<body>

<img id="main_img" src="blank.png" alt="The main image">

</body>
</html>

You do, of course, have to manually modify the list of images, or even generate that list using php if you want.

Posted by Dagonee (Member # 5818) on :

quote:
It's actually not so bad to do this in javascript rather than php. Here's an example:

I know. But I can do it in PHP without looking it up. Or as Jon Boy almost said, "I'd do it in PHP because I don't know JavaScript." [Razz]

Posted by Jon Boy (Member # 4284) on :

I can't get that code to work, Mike.

*sigh* Maybe web design is not my calling in life. Or maybe I just should've taken a few more classes in it while I was still in school.

Posted by Dagonee (Member # 5818) on :

This link looks promising. It's basically what I would have done, except I'd have used a hard-coded array.