How to Load a Fresh Sliced Graphic to Webpage?

by **Michael56** on Mon Jun 23, 2008 11:54 pm

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....?

by **Michael56** on Fri Jun 27, 2008 5:45 am

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.

by **rangana** on Fri Jun 27, 2008 9:13 am

Please follow these steps:

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

Code: Select all: <script type="text/javascript"> /************Script Notification******************* * Author: Raymond Angana * rangana in Devppl * Created June 27 * Title: Random Image via JS * For more customizable script, contact speechforraymond@yahoo.com * This notice must stay intact for legal use ***********End of notice**************************/ window.onload=function() { var img=document.getElementById('myid'), // Id of your image baseimg='images/', //Base folder of your images imgnum=25, //total number of your images //**************************************************// // No need to edit beyond this part // Parameters: none // Variables: img (note1), baseimg (note2), imgnum (note3), rangana (note4) // Please see notes for variable use // Note1: img var declares the id of the element of your img // Note2: baseimg var declares the base of your images. This should be identical on every images // Note 3: imgnumb var declares the total number of images // Note 4: rangana var declarase the randomly generated number which is creating onload // End of parameters description // Script by Raymond Angana //**************************************************// rangana=Math.floor(Math.random()*imgnum+1); if(rangana==0) rangana=1; else img.src=baseimg+'IMG_'+rangana+'.jpg'; } </script>

3.) And lastly, have some beer.

Note, this is done randomly since we can't deal with pictures in choronological order consider this is changing during load.

See comments, parameters are explained and variables are noted.

Hope it helps

by **Michael56** on Fri Jun 27, 2008 2:51 pm

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?

by **Michael56** on Fri Jun 27, 2008 3:03 pm

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?

by **rangana** on Fri Jun 27, 2008 10:44 pm

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

by **Michael56** on Sat Jun 28, 2008 6:33 pm

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.

by **Michael56** on Sun Jun 29, 2008 12:49 am

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.

How to Load a Fresh Sliced Graphic to Webpage?

How to Load a Fresh Sliced Graphic to Webpage?

Who is online