...

View Full Version : Random Image with matching background color



AlterLeo
08-23-2002, 07:07 PM
I have seen code for loading a random image that's a link every time you visit, and I have also seen code which randomizes the background color for every visit.

What I want to do is have a random linked image load with a background that matches that of the image.

You can check out my band's website(www.headspinrock.com), which is where I want to use it. Right now, I have a logo with a black background, but I have other logos with different background colors, and I want to have them randomly appear, but to have the page's background color match that of the image's.

I hope I explained this well enough.

Does anyone know if a code like that exists, and where I can find it?

beetle
08-23-2002, 07:16 PM
Here's a simple way...
<html>
<head>
<title>Whatever</title>

<script>
function setSkin() {
var imgPath = '/images/';
var skins = [['logo1.gif','black'],['logo2.gif','#FFF'],['logo3.gif','red']];
var rand = Math.floor(Math.random() * skins.length);

document.getElementById('logo').src = imgPath + skins[rand][0];
document.body.style.backgroundColor = skins[rand][1];
}
</script>
</head>

<body onLoad="setSkin()">
<img src="" id="logo">
</body>

</html>Where the 'skins' array holds image/color pairs for each, well, skin :D

AlterLeo
08-23-2002, 07:43 PM
Cool. 2 questions.

1. They don't have to be gif images, do they?
2. How do I make the images into links? It's the gateway to the main site.

beetle
08-23-2002, 08:00 PM
No, they don't have to be gifs....just make them anything.

And about the link...they all go to the same place, right?

<a href="index2.html"><img src="" id="logo" border="0"></a>

AlterLeo
08-23-2002, 08:12 PM
And where do I put that code?

beetle
08-23-2002, 08:16 PM
<html>
<head>
<title>Whatever</title>

<script>
function setSkin() {
var imgPath = '/images/';
var skins = [['logo1.gif','black'],['logo2.gif','#FFF'],['logo3.gif','red']];
var rand = Math.floor(Math.random() * skins.length);

document.getElementById('logo').src = imgPath + skins[rand][0];
document.body.style.backgroundColor = skins[rand][1];
}
</script>
</head>

<body onLoad="setSkin()">
<a href="index2.html"><img src="" id="logo" border="0"></a>
</body>

</html>

AlterLeo
08-23-2002, 08:51 PM
OK. Great.

Now, does anything go between the quotation marks in the <img src=""
field?

<img src="" id="logo" border="0">

beetle
08-23-2002, 08:54 PM
Well, you don't need to. You can if you want to specify a default image there, but the function will almost immediately replace it.

AlterLeo
08-23-2002, 09:18 PM
Well, i tried what you had written, and ultimately it loads the pics, but until it loads, the little red "x" is there.

Is that a normal part of the process? Or did I do something wrong?

beetle
08-23-2002, 09:21 PM
I see. Better go ahead an put in a default image. Put in a transparent gif as the initial source.

AlterLeo
08-23-2002, 09:40 PM
OK. I tried that and it just made the images fit the dimensions of that image, is there anything else that can be done?

If not, I'll just leave that out, and maybe folks won't notice.

Now, I'll be able to add more pairings if I want, right? So that there will be more than three pairings?

beetle
08-23-2002, 09:42 PM
Just don't hardcode the height and width attributes onto the image tag, or if you do, use the height and width of your logos images...

AlterLeo
08-23-2002, 09:56 PM
I'm using Frontpage 2000. Everytime I delete the height and width attributes, it just puts them back. I could use the height and width of the images, but they're of varying heights and widths.

And this is even if I'm interpreting the word "hardcode" correctly.

Aren't I just a pain in the butt?

beetle
08-23-2002, 10:02 PM
Originally posted by AlterLeo
Aren't I just a pain in the butt? No, but FrontPage sure can be :D. Uh...don't know what to tell you there. Just open that sucker in Notepad and change them, or save your transparent gif to the size of your logo images...

AlterLeo
08-23-2002, 10:42 PM
thanks for your help!

Suddaan
08-24-2002, 05:02 AM
I have looked at this code and tried some other variations, but cannot get it to work. How would I write this so that it wold change images only.


Thanks



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum