CSS Codes
CSS Layouts
Results 1 to 5 of 5

Thread: Random TD Background Image

  1. 01-26-2007, 03:58 PM #1
    adamwk
    adamwk is offline New Comer (less than 5 posts)
    Join Date
    Jan 2007
    Location
    DE, USA
    Posts
    1
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default Random TD Background Image

    I found the Random Content Color Script
    http://www.dynamicdrive.com/dynamici...tentcolors.htm

    I'm pretty sure that this code could be altered so that a random background image is used instead of a color. It seems like it would be a small tweak from "background-color" to "background-image", but seeing as I have no knowledge of this kind of stuff I thought I'd ask for help.

    I'd like to end up being able to asign this to a table data as a class, and to have the script be referenced as an outside file. I'm not quite sure how to reference an outside script, but I'm sure there are plenty of tutorials out there. If you could point me at one as well I'd greatly appreciate it.

    If I should have posted this in a different section you have my appologies.

    Thank you in advance,
    AK13
    Reply With Quote Reply With Quote
  2. 01-26-2007, 06:41 PM #2
    jscheuer1's Avatar
    jscheuer1
    jscheuer1 is offline Global Moderator
    Join Date
    Mar 2005
    Location
    SE PA USA
    Posts
    30,495
    Thanks
    82
    Thanked 3,449 Times in 3,410 Posts
    Blog Entries
    12

    Default

    The script (save as rand_bg.js):

    Code:
    /***********************************************
* Random Element Backgrounds - adapted from:
* Random Content Colors script- © Dynamic Drive DHTML code library (www.dynamicdrive.com)
* This notice MUST stay intact for legal use
* Visit Dynamic Drive at http://www.dynamicdrive.com/ for full source code
***********************************************/

//specify list of random background images and colors to apply to CSS class "randomimage"
//in the form - "BackgroundImage:BackgroundColor" (required)
//For each entry, you can also specify a text and link color via the syntax:
// "BackgroundImage:BackgroundColor:TextColor" (recommended)
// OR "BackgroundImage:BackgroundColor:TextColor:LinkColor" (optional)
var randombgs=["photo1.jpg:green:white:yellow", "photo2.jpg:#DDF4FF", "photo3.jpg:#FFFF97", "photo4.jpg:#CFFF9F"]

var rbcssrule=""
var randomnum=Math.floor(Math.random()*randombgs.length)
if (randombgs[randomnum].indexOf(":")!=-1&&randombgs[randomnum].split(":").length>2){
rbcssrule+="background-image: url("+randombgs[randomnum].split(":")[0]+");"
rbcssrule+="background-color: "+randombgs[randomnum].split(":")[1]+";"
rbcssrule+="color: "+randombgs[randomnum].split(":")[2]+";"
}
else{
rbcssrule+="background-image: url("+randombgs[randomnum].split(":")[0]+");"
rbcssrule+="background-color: "+randombgs[randomnum].split(":")[1]+";"
}
document.write('<style type="text/css">\n')
document.write('.randomimage{'+rbcssrule+'}\n')
if (randombgs[randomnum].split(":").length==4) //if link color specified
document.write('.randomimage a{color:'+randombgs[randomnum].split(":")[3]+';}\n')
document.write('<\/style>')
    Example page:

    HTML Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/1999/REC-html401-19991224/loose.dtd">
<html>
<head>
<title></title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<script src="rand_bg.js" type="text/javascript">

/***********************************************
* Random Element Backgrounds - adapted from:
* Random Content Colors script- © Dynamic Drive DHTML code library (www.dynamicdrive.com)
* This notice MUST stay intact for legal use
* Visit Dynamic Drive at http://www.dynamicdrive.com/ for full source code
***********************************************/

</script>
</head>
<body>
<div class="randomimage">Hi<br>&nbsp;<br>&nbsp;</div>
</body>
</html>
    Notes: The class name is now 'randomimage' and can be used with td's or whatever. If the script is not in the same folder as the page, the path to it (preferably absolute) must be specified on the page and the paths to the images used in the script must be specified (also preferably absolute).

    Example of an absolute path:

    Code:
    http://www.somedomain.com/files/images/photo1.jpg
    Last edited by jscheuer1; 01-26-2007 at 07:32 PM. Reason: Fix script errors
    - John
    ________________________

    Show Additional Thanks: International Rescue Committee - Donate or: The Ocean Conservancy - Donate or: PayPal - Donate
    Reply With Quote Reply With Quote
  3. 05-31-2008, 07:24 AM #3
    sunxfyre
    sunxfyre is offline New Comer (less than 5 posts)
    Join Date
    May 2008
    Posts
    2
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default

    Hi, this is exactly the script I was looking for, thanks a lot.

    However, though it was working fine while the page and the images were in my computer, now that I have only the images uploaded (to photobucket) the image isn't being displayed when I run the page from my computer.
    I have all the links specified in the JS file, everything should be functional.. I don't know whats wrong.
    Reply With Quote Reply With Quote
  4. 05-31-2008, 07:53 AM #4
    jscheuer1's Avatar
    jscheuer1
    jscheuer1 is offline Global Moderator
    Join Date
    Mar 2005
    Location
    SE PA USA
    Posts
    30,495
    Thanks
    82
    Thanked 3,449 Times in 3,410 Posts
    Blog Entries
    12

    Default

    That's probably because your paths to your images look something like so:

    Code:
    http://www.photobuc . . .
    And the script uses : as a separator. It probably never should have been that way for just this reason. Try this version:

    Code:
    /***********************************************
* Random Element Backgrounds - adapted from:
* Random Content Colors script- © Dynamic Drive DHTML code library (www.dynamicdrive.com)
* This notice MUST stay intact for legal use
* Visit Dynamic Drive at http://www.dynamicdrive.com/ for full source code
***********************************************/

//specify list of random background images and colors to apply to CSS class "randomimage"
//in the form - "BackgroundImage::BackgroundColor" (required)
//For each entry, you can also specify a text and link color via the syntax:
// "BackgroundImage::BackgroundColor::TextColor" (recommended)
// OR "BackgroundImage::BackgroundColor::TextColor::LinkColor" (optional)
var randombgs=["photo1.jpg::green::white::yellow", "photo2.jpg::#DDF4FF", "photo3.jpg::#FFFF97", "photo4.jpg::#CFFF9F"]

var rbcssrule=""
var randomnum=Math.floor(Math.random()*randombgs.length)
if (randombgs[randomnum].indexOf("::")!=-1&&randombgs[randomnum].split("::").length>2){
rbcssrule+="background-image: url("+randombgs[randomnum].split("::")[0]+");"
rbcssrule+="background-color: "+randombgs[randomnum].split("::")[1]+";"
rbcssrule+="color: "+randombgs[randomnum].split("::")[2]+";"
}
else{
rbcssrule+="background-image: url("+randombgs[randomnum].split("::")[0]+");"
rbcssrule+="background-color: "+randombgs[randomnum].split("::")[1]+";"
}
document.write('<style type="text/css">\n')
document.write('.randomimage{'+rbcssrule+'}\n')
if (randombgs[randomnum].split("::").length==4) //if link color specified
document.write('.randomimage a{color:'+randombgs[randomnum].split("::")[3]+';}\n')
document.write('<\/style>')
    Note: You now must use :: as the separator. There could still be other problems.
    - John
    ________________________

    Show Additional Thanks: International Rescue Committee - Donate or: The Ocean Conservancy - Donate or: PayPal - Donate
    Reply With Quote Reply With Quote
  5. 06-12-2008, 07:22 PM #5
    sunxfyre
    sunxfyre is offline New Comer (less than 5 posts)
    Join Date
    May 2008
    Posts
    2
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Talking

    Thank you very much jscheuer1
    Reply With Quote Reply With Quote
« Previous Thread | Next Thread »

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
  •  

Forum Rules