SitePoint Sponsor

User Tag List

Results 1 to 10 of 10

Hybrid View

  1. #1
    SitePoint Wizard creole's Avatar
    Join Date
    Oct 2000
    Location
    Nashvegas Baby!
    Posts
    7,845
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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

  2. #2
    I believe you have my stapler. scrubz's Avatar
    Join Date
    Feb 2001
    Location
    Van down by the river
    Posts
    254
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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.

  3. #3
    SitePoint Wizard creole's Avatar
    Join Date
    Oct 2000
    Location
    Nashvegas Baby!
    Posts
    7,845
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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%">&nbsp;</td>
    <td align="center" width="642"><img src="images/hdr_green.jpg" width="642" height="224" border=0 alt=""></td>
    <td width="50%">&nbsp;</td>
    </tr>
    </table>
    Adobe Certified Coldfusion MX 7 Developer
    Adobe Certified Advanced Coldfusion MX Developer
    My Blog (new) | My Family | My Freelance | My Recipes

  4. #4
    I believe you have my stapler. scrubz's Avatar
    Join Date
    Feb 2001
    Location
    Van down by the river
    Posts
    254
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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>

  5. #5
    SitePoint Wizard creole's Avatar
    Join Date
    Oct 2000
    Location
    Nashvegas Baby!
    Posts
    7,845
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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

  6. #6
    I believe you have my stapler. scrubz's Avatar
    Join Date
    Feb 2001
    Location
    Van down by the river
    Posts
    254
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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>

  7. #7
    SitePoint Wizard creole's Avatar
    Join Date
    Oct 2000
    Location
    Nashvegas Baby!
    Posts
    7,845
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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

  8. #8
    SitePoint Wizard creole's Avatar
    Join Date
    Oct 2000
    Location
    Nashvegas Baby!
    Posts
    7,845
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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%">&nbsp;</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%">&nbsp;</td></tr></table>');

    </script>

    <!-- header element
    <table cellpadding="0" cellspacing="0" border="0" width="100%" align="center" bgcolor="#83C463">
    <tr>
    <td width="50%">&nbsp;</td>
    <td align="center" width="642"><img src="images/hdr_green.jpg" width="642" height="224" border=0 alt=""></td>
    <td width="50%">&nbsp;</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

  9. #9
    SitePoint Wizard creole's Avatar
    Join Date
    Oct 2000
    Location
    Nashvegas Baby!
    Posts
    7,845
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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

  10. #10
    I believe you have my stapler. scrubz's Avatar
    Join Date
    Feb 2001
    Location
    Van down by the river
    Posts
    254
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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.


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •