|
HTML - Random Table Background Image Help
Hello everyone,
I'm new here and currently reaquainted with HTML as I'm trying to help out a friend with his website. I am trying to randomize a background image in a table and I can't seem to get anything to work. I have searched up and down this forum and others, have tried several scripts that seem to work for others, and I'm still at square one. I most recently tried a script I found here on this forum with no success. Here is my code... Code: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
...
...
<script type="text/javascript">
<!--
var pic=new Array();
pic[0]="img/home_back1.jpg";
pic[1]="img/home_back2.jpg";
pic[2]="img/home_back3.jpg";
var num=Math.floor(Math.random()*pic.length);
window.onload=function() {
document.getElementById('wrapper').style.backgroundImage='url('+pic[num]+')';
}
//-->
</script>
</head>
<table id="wrapper" width="955" height="600" align="center" border="0" cellpadding="0" cellspacing="0" >
...
...
...
</table>
</body>
</html>
If anyone has any insight as to what I may be doing wrong or how I can fix this it would be much appreciated as I'm pulling my hair out trying to get this to work. Thanks! Unclejunebug Similar TutorialsI'm new to the forum and hope i'm asking in the right place. I have modified some code to break one image into seperate images and display them at different places on a page, but i would like to use one of the images as a background to a table, below is the code (excluding javascript) to seperate one item that i've called Logo and show it on it's own; <body onload="crop('images/New_Logo.png', 'Logo', 0, 0, 960, 99); > <div id="Logo" style="width:960px; height:99px; margin-bottom:20px;"></div> I've tried different variations to show as background but it wouln't work, i was thinking along the lines of <table background="Logo"> .... </table> Hi,, in the attached file .. i was tryin to set image ->contact_13.jpg as the background image for that cell.. as <TD COLSPAN=6 background="images/contact_13.jpg"></TD> but its not setting it correctly .. the path and name of image is correct .. as far as i see it .. <td background='xyz.jpg'></td> works .. is it because of the colspan thing .. Hello Everyone. The problem I am having and always wanted to know the correct way is . When adding text within a table with a background image and if the text excedes the background image thus increasing the height of the table, the background image repeats. What I want to do is have a solid color repeat at the bottom of the image so the table does not break the image, I want the image not to Repeat but to take on that solid color and repeat that color through the bottom of the Table so I can add as much text as I need. I appreciate any help. I know this is quite common when working with table. Thank! Hey all! I would like to create a 3 row table with a background color in each row. On the right side of the table I would like to display an image that sits on top of the background color and spans all 3 rows. When I try to do this it seems that the row bg colors go OVER the image. How can I get the image to sit on top of the 3 row bg colors? I don't know any other way to do this but I'm definitely open to suggestions! Thanks for any help! This is the code I've been trying: Code: <TABLE cellpadding="0" width="200" cellspacing="0" border="0" style="
background-image:url(ask.gif);
background-position: top right;
background-repeat: no-repeat;">
<tr bgcolor="#FBE9D1">
<td> </td>
</tr>
<tr bgcolor="#F7D5A7">
<td height="20">ask a question</td>
</tr>
<tr bgcolor="#FBE9D1">
<td height="28"> </td>
</tr>
</TABLE>
Hi...I'm not new to html but i've come across something i cant get to work. I have created a page with a background image to repeat-x and it look great. Next I want to place a three column table at the top and over this repeated background image. The problem is that the table get placed below the 'background_img.jpg'. So there is a large gap between the top of the page and the table. How do I get the table to be placed over or on top of the repeated background img? Thanks I'm using firework and dreamweaver, but i need to expand some side bar images in html in a table so client can input their own copy so it expands vertically without compromising the design. I need to use HTML code not CSS What code can i use to vertical align the background image in a table? Presently i have this working... <td rowspan="9" background="expansion_images/right_001_r2_c5 copy.png"> </td> Hi I want to addd a image for background so i can postion it and not have it repeat : for for a table cell if u see my link below its the purple table cell that has the Bomboniere Adelaide as the heading i only want the background image in that cell - thanks in advance http://weddingsmadeeasy.com.au/adelaide/Bomboniere.html Hello all, First time posting to the forums here. I'm creating a table and each row represents a "tab" of the UI. Each cell has a background image that looksl ike this. however, when I render my table and have text in the cell, the right edge of the tab is chopped off like this.. Any recommendations on some CSS or table attributes that I can aplly to make both rounded ends of the background image appear? I've tried turning off table borders, cell spacing and cell padding. Any help would be greatly appreciated. Thanks. So I decided to see if I could make my site XHTML 1.0 Strict-compliant. Here's the main page on my test server I'd be thrilled with it if I could do 3 things: - Set the background color of the left column to match the color behind the fonts. Is there a CSS class I can create and set the cells to that class? - Remove the border around clickable images. - Get the spacing between the menu options on the left to look the way it does on the other pages in the site. If you click any of the pages on my actual site you can see the look I'm going for. Thanks as always for the help! Joshua I used this code here but it doesnt seem to work for GoogleChrome browser well, as it did for the others. Is there a code that will work for all the browsers? HTML Code: <html>
<head>
<script language="javascript">
function randomBackground()
{
var myImages = Array();
myImages[0] = 'xxx.jpg';
myImages[1] = 'xxx.jpg';
myRandomNumber = Math.floor(Math.random()*myImages.length);
document.body.style.backgroundImage = 'URL('+myImages[myRandomNumber]+')';
}
</script>
<style type="text/css">
body
{
background-attachment: fixed;
background-repeat: no-repeat;
}
</style>
</head>
<body onload="randomBackground();"></body>
ive put a background in to my html document that stretches to fit the size of the browser window. heres the code: <style type="text/css">html {height:100%;}body {height:100%;margin:0;padding:0;}#bg {position: absolute;top:0;left:0;width:100%;height:100%;}#content { position:absolute;z-index:1; width:100%;}</style> <!--[if IE 6]><style type="text/css">html {overflow-y:hidden;}body {overflow-y:auto;}#bg {position:absolute;z-index:-1;}#content {position:static;}</style><![endif]--> <script type="text/javascript" src="swfobject.js"></script> </head> <body bgcolor="#000000" text="#999999" link="#999999" vlink="#999999" alink="#999999"> <div id="bg"><img src="NJWwallpaper01.jpg" width="100%" height="100%" alt=""></div> <div id="content"> Is it possible to put a smaller background image on top (like in layers) of my old background image? I have a background image, but I want to put a smaller image on top of that one, but for it to be treated also as background image. This image is a black vertical rectangle, but is faded on the edges to give a transparency, so its a .png. So ultimately what I am trying to do is put this black rectanlge on top of my original background image and with the transparency on the edges of this image, be able to see my original background image. How can I do so? Also what I was thinking was that this faded background would be scaled to fit different screen sizes, so do "width: 75%"? Just so that it ALWAYS stays at 75% no matter what screen size it is viewed on. Is this the right approach towards getting this result? Hello, I am new to these forums, and I greet you all Here is the problem I am having. I have a 3x3 table, and I want to use the 6 bottom cells to display linkable pictures of merchandise. I want the cells to display a different picture each time the customer visits the website. I found a javascript for diaplying a random, linkable, picture each time someone visits, but the problem is you can't put the script in each cell. It conflicts with itself somehow. The pictures rotate, but the links only go to the last set of links in the last cell. What is the best method I can use to accomplish my goal? Or can the script below be edited in such a way as to be useable in each cell? Thanks! Code: <script language="javascript">
/*
Random image slideshow- By Tyler Clarke (EMAIL REMOVED - Send PM to This User Instead)
For this script and more, visit http://www.javascriptkit.com
*/
var delay=0 //set delay in miliseconds
var curindex=0
var randomimages=new Array()
randomimages[0]=["picturehere.jpg","linkhere"];
randomimages[1]=["picturehere.jpg","linkhere"];
randomimages[2]=["picturehere.jpg","linkhere"];
randomimages[3]=["picturehere.jpg","linkhere"];
var preload=new Array()
for (n=0;n<randomimages.length;n++)
{
preload[n]=new Image()
preload[n].src=randomimages[n]
}
var First=Math.floor(Math.random()*(randomimages.length));
var LnkURL=randomimages[First][1];
document.write('<img onclick="Link();" name="defaultimage" src="'+randomimages[First][0]+'">')
function Link(){
if (LnkURL){
window.location=LnkURL;
}
}
function rotateimage()
{
if (curindex==(tempindex=Math.floor(Math.random()*(randomimages.length)))){
curindex=curindex==0? 1 : curindex-1
}
else
curindex=tempindex
LnkURL=randomimages[curindex][1];
document.images.defaultimage.src=randomimages[curindex][0];
}
setInterval("rotateimage()",delay)
</script>
Hi there, I have created a site that can be viewed at www.prestigeinteractive.com/legacy2 On this site I have utilized a basic two column design with both a header and a footer. You may need to look at the first page to know what i am talking about. Upon creating the site I wanted to make the athletes on the page extend beyond the borders of the site's wrapper. In order to do that and maintain reasonable filesizes, I opted to splice the images. I used a jpeg for the large part within the wrapper, and used a png in a absolute positioned div for the parts that are to extend beyond the site's wrapper/container (needed a transparent image to display the border and site's background properly). The friend I am making the site for asked if I could set it up so that there can be a number of images that randomly load when a user enters the home page. I am not sure it that is possible using the format I've implemented (2 images properly aligned). Can this be done? I've done it before with single images within a div tag, but not two that need specific coordinates to appear aligned correctly. If "yes this can be done", could someone kindly point me in the right direction to find a tutorial on this. If not, I'd appreciate knowing this as well, as I'll need to come up with an alternative plan. Thank you for your time, G Hello, I'm sure the subject about random generators must have been asked a billion times before, but I can't seem to find an answer for my set up. Basically I have a style.css sheet which defines some images like this: #gallery .pic01 { background: url('images/gallery_images/pic_01.jpg') no-repeat; width: 205px Then in my html I have a list of these images like this <div id="gallery"> <ul> <li class="pic01"></li> <li class="pic02"></li> <li class="pic03"></li> </ul> What I'd like to do is have the pictures choosen randomly so that each time the page loads you get a different set of pictures. Is this possible. Please forgive me if this is easy peasy to do - I'm a real html thicky! How would i show a random image? When people come onto my site, i want the header to be random out of about, 6 different ones. When you refresh the page, it changes the image. (for more explaingin, ha) How would i go about doing this? Okay... Here is what I'm trying to do...and not really sure as an HTML novice where to even start. I have something called a 'blogwall' on my site, it's url is he http://www.weusecoupons.com/index.php?pageid=blogroll What I would like to do, is on the main page: www.weusecoupons.com Have a ONE of the 125x125 buttons appear randomly. Is this a simple thing? All images are hosted locally!! Thanks for your help. Here is an image depicting the trouble I'm having: I want to make a table, consisting of many cells. These cells would be fixed, and *very different* in sizes. It's easy to make a no-space table when all the images are exactly the same size, but when you have images with a variety of sizes, the table doesn't fit perfectly. Basically I want to create a collage of images with overlay text on each image. My idea was that I could create a table, and each cell (td) would have a background which is the image. Then I could just type in that cell, so the text would be over the image. Then I'd do this for every one of my images, and a collage would be formed. The problem is, the table makes large white spaces wherever the image sizes don't match! How do I get rid of these spaces, or is there an entirely different code/approach I should be using? Thanks! Here is my current code: HTML Code:
<html>
<head>
<style type="text/css">
table.nospace {
padding: 0; margin: 0;
border-collapse: collapse;
}
table.nospace tr {
padding: 0; margin: 0;
}
table.nospace td {
padding: 0; margin: 0;
}
</style>
</head>
<body>
<TABLE class="nospace" width="2040px" height="2000px" cellspacing="0px" cellpadding="0px">
<TR>
<td valign="top">
<table><tr>
<TD WIDTH="800px" HEIGHT="800px" BACKGROUND="image.jpg" VALIGN="bottom">
<h1><FONT COLOR=#ffffff>text</FONT></h1>
</TD></tr></table>
</td>
<td valign="top">
<table><tr>
<TD WIDTH="700" HEIGHT="497" BACKGROUND="image" VALIGN="bottom">
<h1><FONT COLOR=#ffffff>Text</FONT></h1>
</TD></tr></table>
</td>
<td valign="top">
<table><tr>
<TD WIDTH="700" HEIGHT="467" BACKGROUND="image.jpg" VALIGN="bottom">
<h1><FONT COLOR=#ffffff>Text</FONT></h1>
</TD></tr></table>
</td>
</TR>
</TABLE>
</body>
</html>
hi, i would like to know if its possible to place a table background image on top of the td color within that table... example he www.tomesrabold.com/levy/thingstodo.html I would like the image at the bottom to be on top of the yellow bar at left. The image at the bottom is the background to the entire table, while the left bar is the background color to the td. Hi, I'm a complete newb and html-challenged, so please forgive my stupid questions. This is what I want for the personal website I'm making: a fixed image as the background that covers the entire screen regardless of what screen resolution a user's computer has - this much I've managed with CSS...I think (like this right? http://www.geocities.com/serenamonster/index.htm ) clickable regions on this background image to use for navigation to various parts of the site. Or in other words, the background image as an image map. - this I'm having trouble with, because you have to designate the picture as a set # of pixels in dimension to make an image map right? and if I do that to my background image, then it may display too big or too small depending on the person's screen resolution right? So does anyone know how I can have clickable regions on my fixed background image without the image being too big for low resolutions or too small for high resolutions? (he http://www.geocities.com/serenamonster/map.html the background image is fixed at 800x400. I want to make each star on the image a hyperlink to a different part of the site). I read somewhere that standard is 800x600 to fill a person's browser right? But on my computer the image only covers about 2/3 of the browser screen which is too small. How can I make it so that it fills 100% of any viewer's screen regardless of resolution? How does it look on your computer? I know these are probably just really stupid questions because I'm missing something really fundamental...but any help would be greatly appreciated! Thanks! ~Serena P.S. is it possible to do mouseovers for certain coordinates on an image map? |
|||||||