| SitePoint Sponsor |
Hey all...i am looking for some sort of Javascript that will allow me to select a random image AND it's associated HTML color. I have a header that I want to randomize every time a user enters the site. The final version will be done in ASP, but I need this quick javascript for showing to the client.
I have checked everywhere, but most of them only allow an image change. I need both.
Can anyone help a brutha out?
Adobe Certified Coldfusion MX 7 Developer
Adobe Certified Advanced Coldfusion MX Developer
My Blog (new) | My Family | My Freelance | My Recipes
I might be able to whip something up. What are you looking to do with the hex color? If you've already got the script to randomize the image (there are tons of them out there, as you probably know), it would likely just be a matter of adding an array of hex values to the function and matching the hex value with the random image.
I don't know Javascript well enough to add lines to the code. I can make minor mods to an existing one, but that would be beyond me. I tried looking for one that had a "image and URL" association as I probably could have modified that one, but could not find one that worked well.
This is the code that I want randomized:
<table cellpadding="0" cellspacing="0" border="0" width="100%" align="center" bgcolor="#83C463">
<tr>
<td width="50%"> </td>
<td align="center" width="642"><img src="images/hdr_green.jpg" width="642" height="224" border=0 alt=""></td>
<td width="50%"> </td>
</tr>
</table>
Adobe Certified Coldfusion MX 7 Developer
Adobe Certified Advanced Coldfusion MX Developer
My Blog (new) | My Family | My Freelance | My Recipes
Here's a script that picks the random image and a random color (choosing from colors you define in an array) for the table background. It doesn't work in Netscape 4.x, and I'm not sure about a Netscape solution off the top of my head. Notice that you'll need to assign an id="myTable" to your table tag, and a name="myImage" to your img tag. I added a link to change the image and color. If you want it to automatically pick a random image and hex at load, add this line right above the function:
randomImage();
Hope this helps.
<html>
<head>
<title>Untitled</title>
<script language="JavaScript">
<!--
function randomImage() {
pic = new Array();
hexColor = new Array();
pic[0] = 'some_image.gif';
pic[1] = 'another_image.gif';
pic[2] = 'blah.gif';
hexColor[0] = '#000000';
hexColor[1] = '#FFFFFF';
hexColor[2] = '#83C463';
randomNum = Math.floor(Math.random()*pic.length);
newImage = pic[randomNum];
newHex = hexColor[randomNum];
document.myImage.src = newImage;
myTable.style.backgroundColor = newHex;
}
// -->
</script>
</head>
<body>
<table id="myTable" cellpadding="0" cellspacing="0" border="0" width="100%" align="center" bgcolor="#83C463">
<tr>
<td width="50%"> </td>
<td align="center" width="642"><img name="myImage" src="images/hdr_green.jpg" width="642" height="224" border=0 alt=""></td>
<td width="50%"> </td>
</tr>
</table>
<a href="#" onClick="randomImage();">Change image and hex</a>
</body>
</html>
first off, thanks scrubz...but I have a question...
would it be possible to just adjust t he HTML code I have, and have it print out just that chunk each time the page loads? Then you wouldn't have to reference an element using Javscript, you could just print out the entire piece of code.
What do you think?
Adobe Certified Coldfusion MX 7 Developer
Adobe Certified Advanced Coldfusion MX Developer
My Blog (new) | My Family | My Freelance | My Recipes
Certainly possible, and it works in Netscape.Just remove the last two lines of code from the function (document.myImage.src = newImage;
myTable.style.backgroundColor = newHex, and insert this after your <body> tag...
<body>
<script language="JavaScript">
randomImage();
document.write('<table cellpadding="0" cellspacing="0" border="0" width="100%" align="center" bgcolor="' + newHex + '">')
document.write('<tr>');
document.write('<td width="50%"> </td>');
document.write('<td align="center" width="642">');
document.write('<img src="' + newImage + 'width="642" height="224" border=0 alt=""></td>');
</script>
scrubz!1 That works beautifully!
Thanks a lot!
Adobe Certified Coldfusion MX 7 Developer
Adobe Certified Advanced Coldfusion MX Developer
My Blog (new) | My Family | My Freelance | My Recipes
ok...this is tres' weird...
Below is the entire page that I will be running. The random script works great by itself. The rest of the page works great by itself. However, when I combine the two pages, I get a javscrfipt error on line 28 (bolded). Can someone help me puzzle this out please?
<html>
<head>
<title>navigation</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<script language="JavaScript">
<!--
function newImage(arg) {
if (document.images) {
rslt = new Image();
rslt.src = arg;
return rslt;
}
}
function changeImages() {
if (document.images && (preloadFlag == true)) {
for (var i=0; i<changeImages.arguments.length; i+=2) {
document[changeImages.arguments[i]].src = changeImages.arguments[i+1];
}
}
}
var preloadFlag = false;
function preloadImages() {
if (document.images) {
visitors_over = newImage("images/visitors_over.gif");
meeting_p_over = newImage("images/meeting_p_over.gif");
travel_p_over = newImage("images/travel_p_over.gif");
journalists_over = newImage("images/journalists_over.gif");
preloadFlag = true;
}
}
function randomImage() {
pic = new Array();
hexColor = new Array();
pic[0] = 'images/hdr_green.jpg';
pic[1] = 'images/hdr_red.jpg';
pic[2] = 'images/hdr_yellow.jpg';
hexColor[0] = '#83C463';
hexColor[1] = '#CE4848';
hexColor[2] = '#FFE167';
randomNum = Math.floor(Math.random()*pic.length);
newImage = pic[randomNum];
newHex = hexColor[randomNum];
}
// -->
</script>
<style type="text/css">
<!--
body, table, tr, td {font-family: verdana; font-size: 8pt; }
p {text-align: justify; line-height: 1.2em; }
a:link {font-weight: bold; color: #cc0000; }
a:hover {font-weight: bold; color: #000000; }
a.sidebar:link {font-weight: bold; color: #000000; }
a.sidebar:hover {font-weight: bold; color: #CC0000; }
a:link {font-weight: bold; color: #cc0000; }
a:hover {font-weight: bold; color: #000000; }
a.sidebar:link {font-weight: bold; color: #000000; }
a.sidebar:hover {font-weight: bold; color: #CC0000; }
a.footer:link {font-weight: bold; color: #000000; }
a.footer:visited:hover {font-weight: bold; color: #CC0000; }
.header {font-size: 10pt; font-weight: bold; color: #ffffff; background-color:#857878; text-align: left; padding-right: 5px; padding-left: 5px; }
-->
</style>
</head>
<body bgcolor="#E0DBDB" onload="preloadImages();" marginwidth="0" marginheight="0" leftmargin="0" topmargin="0">
<script language="javascript">
randomImage();
document.write('<table cellpadding="0" cellspacing="0" border="0" width="100%" align="center" bgcolor="' + newHex + '">')
document.write('<tr><td width="50%"> </td><td align="center" width="642">');
document.write('<img src="' + newImage + '" width="642" height="224" border=0 alt=""></td>');
document.write('</td><td width="50%"> </td></tr></table>');
</script>
<!-- header element
<table cellpadding="0" cellspacing="0" border="0" width="100%" align="center" bgcolor="#83C463">
<tr>
<td width="50%"> </td>
<td align="center" width="642"><img src="images/hdr_green.jpg" width="642" height="224" border=0 alt=""></td>
<td width="50%"> </td>
</tr>
</table>
header element -->
<!-- navigation -->
<table cellpadding="0" cellspacing="0" border="0" width="100%" align="center">
<tr bgcolor="#B8ADAD" valign="top" align="center">
<td width="50%"><img src="images/clear.gif" width="10" height="17" alt="" /></td>
<td rowspan="2" width="642">
<!-- nav elements -->
<table width="558" border="0" cellpadding="0" cellspacing="0">
<tr bgcolor="#B8ADAD">
<td width="38"><img src="images/left-end.gif" width="38" height="20"></td>
<td width="141">
<a href="visitors"
onmouseover="changeImages('visitors', 'images/visitors_over.gif'); return true;"
onmouseout="changeImages('visitors', 'images/visitors.gif'); return true;">
<img name="visitors" src="images/visitors.gif" width="141" height="20" border="0"></a></td>
<td width="152">
<a href="meeting_p"
onmouseover="changeImages('meeting_p', 'images/meeting_p_over.gif'); return true;"
onmouseout="changeImages('meeting_p', 'images/meeting_p.gif'); return true;">
<img name="meeting_p" src="images/meeting_p.gif" width="152" height="20" border="0"></a></td>
<td width="163">
<a href="travel_p"
onmouseover="changeImages('travel_p', 'images/travel_p_over.gif'); return true;"
onmouseout="changeImages('travel_p', 'images/travel_p.gif'); return true;">
<img name="travel_p" src="images/travel_p.gif" width="163" height="20" border="0"></a></td>
<td width="102">
<a href="journalists"
onmouseover="changeImages('journalists', 'images/journalists_over.gif'); return true;"
onmouseout="changeImages('journalists', 'images/journalists.gif'); return true;">
<img name="journalists" src="images/journalists.gif" width="102" height="20" border="0"></a></td>
<td width="46">
<img src="images/right-end.gif" width="46" height="20"></td>
</tr>
</table>
<!-- nav elements -->
</td>
<td width="50%"><img src="images/clear.gif" width="10" height="17" alt="" /></td>
</tr>
<tr bgcolor="#000000" valign="top" align="center">
<td width="50%"><img src="images/clear.gif" width="10" height="3" alt="" /></td>
<td width="50%"><img src="images/clear.gif" width="10" height="3" alt="" /></td>
</tr>
<tr>
<td width="50%"><img src="images/clear.gif" width="10" height="3" alt="" /></td>
<td><img src="images/bottom.gif" width="642" height="32" border=0 alt=""></td>
<td width="50%"><img src="images/clear.gif" width="10" height="3" alt="" /></td>
</tr>
</table>
<!-- navigation -->
<br><br>
</body>
</html>
Adobe Certified Coldfusion MX 7 Developer
Adobe Certified Advanced Coldfusion MX Developer
My Blog (new) | My Family | My Freelance | My Recipes
ok...I got it...just for people to know...
I used the built-in Netscape javascript debugger and it told me that newImage was not a function, even though it is clearly a function. So, on a whim, I change newImage to newPicture and it works fine. I don't know if it was interfering with some reserved keyword for JS or something, but iot works fine now.
thanks scrubz for your help, I could'nt have done it without you.
Adobe Certified Coldfusion MX 7 Developer
Adobe Certified Advanced Coldfusion MX Developer
My Blog (new) | My Family | My Freelance | My Recipes
Cool. No problem, creole. Sorry about the naming. Strangely, it worked here. But, 'new' is a reserved JavaScript keyword, so maybe that's what it was choking on. In any case, good to hear it's working for you.
Posting Permissions
Bookmarks