Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Page 1 of 2 12 LastLast
Results 1 to 15 of 16
  1. #1
    New to the CF scene
    Join Date
    Aug 2002
    Location
    Boston
    Posts
    8
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Question Random Image with matching background color

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

  • #2
    Senior Coder
    Join Date
    Aug 2002
    Posts
    3,467
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Here's a simple way...
    Code:
    <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

  • #3
    New to the CF scene
    Join Date
    Aug 2002
    Location
    Boston
    Posts
    8
    Thanks
    0
    Thanked 0 Times in 0 Posts
    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.
    ROCK.

  • #4
    Senior Coder
    Join Date
    Aug 2002
    Posts
    3,467
    Thanks
    0
    Thanked 0 Times in 0 Posts
    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>

  • #5
    New to the CF scene
    Join Date
    Aug 2002
    Location
    Boston
    Posts
    8
    Thanks
    0
    Thanked 0 Times in 0 Posts
    And where do I put that code?
    ROCK.

  • #6
    Senior Coder
    Join Date
    Aug 2002
    Posts
    3,467
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Code:
    <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>

  • #7
    New to the CF scene
    Join Date
    Aug 2002
    Location
    Boston
    Posts
    8
    Thanks
    0
    Thanked 0 Times in 0 Posts
    OK. Great.

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

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

  • #8
    Senior Coder
    Join Date
    Aug 2002
    Posts
    3,467
    Thanks
    0
    Thanked 0 Times in 0 Posts
    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.

  • #9
    New to the CF scene
    Join Date
    Aug 2002
    Location
    Boston
    Posts
    8
    Thanks
    0
    Thanked 0 Times in 0 Posts
    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?
    ROCK.

  • #10
    Senior Coder
    Join Date
    Aug 2002
    Posts
    3,467
    Thanks
    0
    Thanked 0 Times in 0 Posts
    I see. Better go ahead an put in a default image. Put in a transparent gif as the initial source.

  • #11
    New to the CF scene
    Join Date
    Aug 2002
    Location
    Boston
    Posts
    8
    Thanks
    0
    Thanked 0 Times in 0 Posts
    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?
    ROCK.

  • #12
    Senior Coder
    Join Date
    Aug 2002
    Posts
    3,467
    Thanks
    0
    Thanked 0 Times in 0 Posts
    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...

  • #13
    New to the CF scene
    Join Date
    Aug 2002
    Location
    Boston
    Posts
    8
    Thanks
    0
    Thanked 0 Times in 0 Posts
    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?
    ROCK.

  • #14
    Senior Coder
    Join Date
    Aug 2002
    Posts
    3,467
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Originally posted by AlterLeo
    Aren't I just a pain in the butt?
    No, but FrontPage sure can be . 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...

  • #15
    New to the CF scene
    Join Date
    Aug 2002
    Location
    Boston
    Posts
    8
    Thanks
    0
    Thanked 0 Times in 0 Posts
    thanks for your help!
    ROCK.


  •  
    Page 1 of 2 12 LastLast

    Posting Permissions

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