HTML / Dreamweaver Question Regarding Images...

2009-05-05 14:16:14

#1

Mr.Dooomed: Find your center.; +752|6591

Right, so I took a course on HTML two years ago and don't remember jack. I'm using Dreamweaver CS3 and have a question. I have a webpage on my site with a lot of photos on it, and on the homepage I want the main photo to change periodically to one of the other pictures on the other page.

So, is there some HTML code that does it? Java script? Or, might Dreamweaver have a feature that will do it for you? Any help would be great, even if you just link me to tutorials or something.

Thanks

Nature is a powerful force. Those who seek to subdue nature, never do so permanently.

2009-05-05 14:49:10

#2

Kimmmmmmmmmmmm: ©; +1,811|6260

maybe you should make a .gif out of the images - software: adobe imageready for older than cs3 and photoshop for the newer version
here's a tut - http://creativetechs.com/tipsblog/build … photoshop/

Last edited by Kimmmmmmmmmmmm (2009-05-05 14:55:21)

2009-05-05 14:56:22

#3

liquidat0r: wtf.; +2,223|6890|UK

Do you want it to update, say, every minute or so without reloading the page? Or to change each time the page is reloaded? Or to display an image for a set amount of time, for any number of page loads, and then change to another image upon a page load outside of that given time? Or a mixture of the aforementioned? etc.

Whatever the case, it's a JS/PHP job.

2009-05-05 15:06:53

#4

Mr.Dooomed: Find your center.; +752|6591

liquidat0r wrote:
Do you want it to update, say, every minute or so without reloading the page? Or to change each time the page is reloaded? Or to display an image for a set amount of time, for any number of page loads, and then change to another image upon a page load outside of that given time? Or a mixture of the aforementioned? etc.

Whatever the case, it's a JS/PHP job.

Having it change on a page reload is what I had in mind.

Nature is a powerful force. Those who seek to subdue nature, never do so permanently.

2009-05-05 15:12:21

#5

CrazeD: Member; +368|6936|Maine

If you want it to change say, every 10 seconds, here is the Javascript code to do it:

Code:

<html>
<head>
<script type="text/javascript">
function changeImg()
{
    var img = new Array(); // create new array for storing the images
    img[0] = 'image1.jpg';
    img[1] = 'image2.jpg';
    img[2] = 'image3.jpg';    

    // store only the path to the image in the array    

    var speed = 10000; // speed in milliseconds (1000ms = 1second)

    var rand = Math.floor(Math.random()*img.length); // make a random number

    document.getElementById("imgContainer").innerHTML = "<img src=\"" + img[rand] + "\" />"; // change the image

    setTimeout("changeImg()",speed);
}

window.onload=changeImg;
</script>
</head>
<body>
<div id="imgContainer"> </div>
</body>
</html>

If you want it to only change on a page refresh, use PHP... here is the code for that:

Code:

<?php

$img = array(
    'image1.jpg',
    'image2.jpg',
    'image3.jpg',
    );

// store only the path to the image in the array    

$rand = rand(0,sizeof($img)-1); // make a random number

echo '<img src="'.$img[$rand].'" />'; // display the random image

?>

Last edited by CrazeD (2009-05-05 15:13:27)

2009-05-05 15:15:09

#6

Kimmmmmmmmmmmm: ©; +1,811|6260

awsum crazed

2009-05-05 15:25:10

#7

Mr.Dooomed: Find your center.; +752|6591

CrazeD wrote:

If you want it to only change on a page refresh, use PHP... here is the code for that:

Code:

<?php

$img = array(
    'image1.jpg',
    'image2.jpg',
    'image3.jpg',
    );

// store only the path to the image in the array    

$rand = rand(0,sizeof($img)-1); // make a random number

echo '<img src="'.$img[$rand].'" />'; // display the random image

?>

k, I might need an explanation. I understand the // parts are notes intended for the person using this, right? So the 'image1.jpg', 'image2.jpg' are replaced with the file names of my images. I add them all to that array. The path would be like, 'assets/images/image1.jpg'

Whats with the // make a random number, bit though? I replace 'rand' with say, '1' so it would be $1 = 1(0,sizeof($img)-1); ? I think I'm incorrect on this.

Clarification please! Also, thanks!

Nature is a powerful force. Those who seek to subdue nature, never do so permanently.

2009-05-05 16:23:14

#8

CrazeD: Member; +368|6936|Maine

The // are comments showing you what the code is doing. If you don't understand what is going on, then ignore them. The only thing you need to change are the images in the array. You can add more, or remove them, but they must follow the same pattern I have put ... that is, each name in single quotes, with a comma after it.

For the record, the random number bit just makes a random number between 0 and the number of images in the array. Then, it just pulls up the image with that array index. Each array element is given an index starting at 0. So, if the random number is 3, it pulls up the 4th image in the array.

Last edited by CrazeD (2009-05-05 16:23:40)

2009-05-05 17:15:56

#9

Mr.Dooomed: Find your center.; +752|6591

You just know this shit off the top of your head? Nice.

Nature is a powerful force. Those who seek to subdue nature, never do so permanently.

2009-05-06 02:27:45

#10

CrazeD: Member; +368|6936|Maine

Well yeah, I just wrote it... lol.

BF2S Forums HTML / Dreamweaver Question Regarding Images...

liquidat0r wrote:

Code:

Code:

CrazeD wrote:

Code:

Board footer