How to Load a Fresh Sliced Graphic to Webpage?

Michael56 · Joined: 24 Jun 2008 Posts: 6

My index page is essentially one large image, sliced into a grid, with some slices having rollovers.

One sliced corner of this grid is for an image gallery. It has no rollover.

I have duplicated the slice. In a folder, I have about 25 images on these duplicate slices.

How can I have a different slice load from this folder each time the website appears (or is refreshed)?

Right now there is a "placeholder" slice where the actual images go.

They do not need to be randomized. They can be sequential if it is easier.

The page is in HTML code, and I'd prefer not to go PHP if at all possible.

Most scripts I've seen for random image loading deal in PHP, and contain lines dealing with margins and so forth. As if to place the image somewhere on the web page.

What I am doing is trying to shuffle sliced images into an already predefined spot. Not set up the spot as well.

The placeholder slice is called up normally using the img src method.

Can this be done with just javascript....?

Michael56 · Joined: 24 Jun 2008 Posts: 6

Here is the exact call line for the image, if it helps:

<td colspan="2" rowspan="3"><img src="images/IMG_1.jpg" width="396" height="306" alt=""></td>

IMG_1.jpg will be shuffled with IMG_2.jpg, IMG_3.jpg, and so forth, from the images folder.

rangana

Please follow these steps:

1.) Give your <img> tag an id. Use myid for instance.
2.) Have this script:

Michael56 · Joined: 24 Jun 2008 Posts: 6

Forgive my ignorance, but is my original line (in post #2 above) staying where it is in the body...?

If the aforementioned colspan rowspan data is removed - the sliced grid gets mutated. I did not see any of that in your code, Raymond.

Your script will be going in above the head, correct...? Up where the existing js rollover script is?

Michael56 · Joined: 24 Jun 2008 Posts: 6

Also, where you suggest ('myid') ... am I making any corresponding change to the names of my images themselves in the folder?

Or is the script itself the only place where ('myid') is used?

rangana

Apologies if my steps were not clear enough.

First, add id="myid" on your <img> tag where you want the image to randomly change.

Lastly, copy the script i've done and past it in the <head> section of your page.

See if there's light then Wink

Michael56 · Joined: 24 Jun 2008 Posts: 6

I'm still missing something, terminology-wise. Keep in mind I'm totally new to coding a webpage.

Your script is in place. That's not the problem.

It's that <img> tag part.

Here's my working image line again:

<td colspan="2" rowspan="3"><img src="images/IMG_1.jpg" width="396" height="306" alt=""></td>

So, where does id="myid" go in there exactly...?

Is anything else being edited in my line...? Like, the IMG_1.jpg, for example? That seems to be the random variable. Everything else has to stay as is, or my grid becomes distorted or fragmented.

Think of the webpage like a tic-tac-toe grid. With nine rectangles...

1 2 3

4 5 6

7 8 9

The lower left rectangle (7) is the one having the substitutions.

That sliced rectangular "puzzle piece" is itself the image.

Hypothetically, if that corner piece is white, I want to randomly load a blue, or a red, or a green, corner.

I've seen some other scripts online, and there is no allowance for retaining my image line's code in the body. That's the key to making it work as envisioned.

Michael56 · Joined: 24 Jun 2008 Posts: 6

Update!

Call off the dogs!

I've worked it out.

I went with a different script that I had a while ago. (No offense Raymond).

Turns out I needed to make the <img> line in the body have a javascript format around it. Because it contained something that was JS code - document.writeln (blah blah blah).

Anyway... I appreciate the assistance! It made me look at this stuff over and over, getting to know what makes it work. For me it's like tax time. I'd prefer not to have to do it - except once a year when I have to.

Don't know how you guys do it! My brain is melting.