|
HTML - Random Pictures In Each Table Data Cell
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>
Similar TutorialsHi, I can make basic websites but I am not very skilled in web design. I am in need of help. Since I made the website inside Photoshop using slices, I need to create a table at the center of the website. Since the center of the website is made of slices of jpeg images, I cannot create a table nor add any text here without disturbing the images. I can get around this by making the pictures part of the cell background, but when I try and remove the images in the center after, the cell background images repeat over and over, and the whole website is unaligned and a big mess! Below is a picture of what I mean... I have included a zip file containing my html pages and image folder. Please download it he http://homepage.ntlworld.com/stephan.../Portfolio.zip The file I need help with is work.html. I can ensure you it's virus free. I want to show my photoshop work off on a website, this is the reason why I am making this website. On our website, when it switches to HTTPS, some images are broken... but it is at random. The next page load, the broken images are just fine... but others that were fine are now broken. Any idea how this happens? Everything works fine on FireFox, this is only on IE. I am using IE6.0 on WinXP. Perhaps it is just my browser settings causing this issue? To see it, you can access our website: www.frpgames.com add any product to your shopping cart, click on the checkout cart, then click the checkout button, then click "Checkout without account". That should be the first secure page. Any help would be great! This issue is driving me crazy. Hi everyone: Any help appreciated. Objective: To have three equally sized and spaced images arranged horizontally, with their size set automatically by the size of the window. Development: I'm using a Mac, and I don't have ready access to a PC to experiment. What I tried: Code: <table> <tr> <td><img src = "a.png" style = "width: 100%" /></td> <td><img src = "b.png" style = "width: 100%" /></td> <td><img src = "c.png" style = "width: 100%" /></td> </tr> </table> <p class = "caption">A caption for the 3 images</p> <p class = "legend" >A legend for the three images</p> What happened: This works perfectly in Safari and Firefox (Mac) and Firefox under Vista, but in Internet Explorer under Vista , the images are HUGE - the unscaled size of the originals. What I think is the reason: IE is taking 100% to be relative to the width of the body element, not the td element. What I don't want to have to do: Use fixed sizes or calculate the sizes on the fly. What I'm trying now: removing the table and using a div, and inside that, setting the image width to 33% and floating one right and one left. What's the trick to get around this IE "gotcha" please? Thanks from a newbie. hi, i have a jsp page, in this page i am displaying data retrieved from mysql database. Now the problem is i must color table cell based on cell value. how to implement this.please give me an sample or working code foe this problem.( any code is accepted) preferably html or javascript. i.e if cell value is "late" then display that cell in red color else display the cell in green color please help me. Thanks ad Regards Akash The table itself is working fine, but the size of each cell is not correct in Firefox. Here is a screenshot of what is happening: http://img35.imageshack.us/img35/1938/tabletroubles.gif Here is the head of my page, the css for the table is he HTML Code:
<style type="text/css">
#cat table {border:0px solid #333333; cell-padding:0; cell-spacing:0; align=center}
#cat tr {align=center}
#cat td {font-size: 13px; font-family=tahoma; font-weight: bold; padding: 0px; border:0px solid #333333; align=center;}
#cat td a {text-decoration: none; color:#757575; background-color: white; display:block; height=23; background-image: url(linkbg1.gif); align=center;}
#cat td a:hover {background-color: #333333; font-weight: bold; text-decoration: none;color: #ffffff; background-image: url(linkbg2.gif); align=center;}
</style>
and here is the table code, located in the body of the page: HTML Code: <div style="Height:53px; overflow:auto; width:900px; position:absolute; top:0; left:0"> <TABLE bgcolor=#333333 cellspacing=0; cellpadding=0;><tr><td> <div id="cat"> <table width=900; cellpadding:0px; cellspacing:0px> <tr align=center> <td width=20%> <font face=tahoma><a href="home.html">Home</a></font> </td> <td width=20%><center><font face=tahoma><a href="openings.html" target="_top">Openings</a></font></center></td> <td width=20%><center><font face=tahoma><a href="dance.html" target="_top">Dance</a></font></center></td> <td width=20%><center><font face=tahoma><a href="projects.html" target="_top">Projects</a></font></center></td> <td width=20%><center><font face=tahoma><a href="vocaloid.html" target="_top">Vocaloid</a></font></center></td> </tr> <tr> <td width=20%><center><font face=tahoma><a href="fanflashes.html" target="_top">Fanflashes</a></font></center></td> <td width=20%><center><font face=tahoma><a href="caramelldansen.html" target="_top">Caramelldansen</a></font></center></td> <td width=20%><center><font face=tahoma><a href="cosplay.html" target="_top">Cosplay</a></font></center></td> <td width=20%><center><font face=tahoma><a href="endings.html" target="_top">Endings</a></center></td> <td width=20%><center><font face=tahoma><a href="anime.html" target="_top">Anime Episodes</a></font></font></center></td> </tr> </table> </div> </td></tr></table> </div> A table is nested within another table. The table on the outside has no content, it is there to make a gray border around everything else. If you look at the table in firefox & internet explorer, you'll see that in IE- the table is much thicker than in firefox. How can i make it so that the table in Firefox will have the same thickness as the one in IE? I could really use some help. Thanks! I would like to put an image as a background image in a data cell to prevent unauthorized copying (or help prevent thereof). However, when I do this the image begins to repeat itself if the data cell is slightly larger than the image specs. The images are located here at www.gabegarcia.com All images on the left side of the pages is what I would like to make background images without the repeat. What would I have to add to accomplish this? Hi everyone. So I got my template set up to the way I like it and everything is rolling good. I inserted a picture into one of the cells in the table and it shifts everything over. Here is my code: <td width="625" colspan="1" bgcolor="white"> <font type="Arial" size ="5" color="blue"> <b>Floorplan</b><br> <center> <a href="floorplanlarge.jpg"><img src="floorplansmall.jpg" border="0" /></a> </center> </td> I have been working on fixing this for the last hour and am out of ideas on what is going on. The picture is smaller than the cell width range. My picture width is 311 pixels and the cell width is 625 pixels. I dont know if there is code whether its HTML or CSS to prevent the cell from widening. Any help would be appreciated. Also if you need me to provide more detail I can. Thanks. Hello, I have a problem with tables cells containing form buttons: Code: <tr> <td colspan="2" align="center"> <button id="button-submit_2" type="submit">Add Name</button>      </form> <form action="nrt-home-edit&delete.php" method="post"> <input type="hidden" name="class_name" value="$class_name[0]"/> <button id="button-submit_2" type="submit">Finish</button></form> </td> </tr> The above code puts the two buttons on their own lines within the table cell. My question is, does anybody know how to keep them on the same line without putting them into their own individual cells? Hi Can someone please tell me how I can make a table cell (which contains text which is linked) linkable? http://www.revolution.worldclanleagu...?site=calendar Here you can see a calendar with months at the top. When you hover over a month, the cell highlights but only the text inside is actually selectable - I'd like to make the cell selectable/linked. PHP/HTML I have: Code: <td class="calendar-month" align="center"><a class="calendar" href="index.php?site=calendar&month=01">'.mb_substr($_language->module['jan'], 0, 3).'</a></td> CSS: Code: a.calendar, a.calendar:visited, a.calendar:active {
font-family: Arial;
color: #dbdbdb;
font-size: 11px;
line-height: 13px;
text-decoration: none;}
a.calendar:hover {
font-family: Arial;
color: #dbdbdb;
font-size: 11px;
line-height: 13px;
text-decoration: none;}
.calendar-month, calendar-month:visited {
font-family: Arial;
color: #dbdbdb;
font-size: 11px;
line-height: 13px;
padding: 5px;
background-color: #2f2f2f;
border-bottom:3px solid #1d1d1d;
border-right: 1px solid #000;
border-top: 1px solid #424242;
border-left: 1px solid #424242;}
.calendar-month:active {
font-family: Arial;
color: #dbdbdb;
font-size: 11px;
line-height: 13px;
padding: 5px;
background-color: #2f2f2f;
border-bottom:3px solid #1d1d1d;
border-right: 1px solid #000;
border-top: 1px solid #424242;
border-left: 1px solid #424242;}
.calendar-month:hover {
font-family: Arial;
color: #dbdbdb;
font-size: 11px;
line-height: 13px;
padding: 5px;
background-color: #3f3f3f;
border-bottom:3px solid #1d1d1d;
border-right: 1px solid #000;
border-top: 1px solid #424242;
border-left: 1px solid #424242;}
(sorry theres so much css) Thanks in advance =D So i am building a site for a friend, and created a navigational bar across the top with 7 tabs. The bg color is currently blue with white letters, and I want to make it white with black letters on a mouseover. I tried a couple different things from google, and nothing worked. Here is the code for the table. I would appreciate all the help I can get. Thanks! <HTML> <HEAD> <TITLE>Moxie Communication</TITLE> <style type="text/css"> p {font-family: Univers LT Std 45 Light} td {font-family: Univers LT Std 45 Light} </STYLE> </HEAD> <BODY bgcolor="#000000" style="color:white" vlink=white alink=black> <TABLE border=0 height=100 align=center bgcolor=#1A1919> <TR> <TD valign=top> <img src="F:\MOXIE\Website Images\Moxie_Top.jpg"> <TABLE border=0 width=100% cellpadding=9 cellspacing=1 bgcolor=#0054B4> <TR align=center> <TD><font size=2><a href="moxie.htm">HOME</a></font></TD> <TD><font size=2><a href="about.htm">ABOUT</a></font></TD> <TD><font size=2><a href="services.htm">SERVICES</a></font></TD> <TD><font size=2><a href="clients.htm">CLIENTS</a></font></TD> <TD><font size=2><a href="pricing.htm">PRICING</a></font></TD> <TD><font size=2><a href="team.htm">MEET THE TEAM</a></font></TD> <TD><font size=2><a href="contact.htm">CONTACT</a></font></TD> </TR> </TABLE> Hi, I have a template made that my friend made in photoshop and slice the image to be able to put them in html. The problem is when I put too much text the cell on both side of the middle one are resizing too. is there a way to lock them from resizing and get only the cell that i want to resize? I'll put the html code here and thx a lot! BTW When it say: this cell resize verticaly - it mean that I want this cell to resize and not the others 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>
<title>web_DIV</title>
<meta http-equiv="content-type" content="text/html; charset=iso-8859-1" />
</head>
<body bgcolor="#000000">
<table id="tableau_01" width="100%" border="0" cellpadding="0" cellspacing="0">
<tr>
<td rowspan="4" width="50%" height="316" background="images/web_div_01.jpg">
</td>
<td colspan="6" width="992" height="61" background="images/web_div_02.jpg">
</td>
<td rowspan="4" width="50%" height="316" background="images/web_div_03.jpg">
</td>
<td>
<img src="images/spacer.gif" width="1" height="61" alt="" /></td>
</tr>
<tr>
<td rowspan="3" width="55" height="255" background="images/web_div_04.jpg">
</td>
<td rowspan="3" width="23" height="255" background="images/web_div_05.jpg">
</td>
<td width="772" height="26" background="images/web_div_06.jpg">
</td>
<td colspan="2" rowspan="3" width="21" height="255" background="images/web_div_07.jpg">
</td>
<td width="121" height="26" background="images/web_div_08.jpg">
></td>
<td>
<img src="images/spacer.gif" width="1" height="26" alt="" /></td>
</tr>
<tr>
<td rowspan="4" width="772" height="435" background="images/web_div_09.jpg">
the text </td>
<td width="121" height="4" background="images/web_div_10.jpg">
</td>
<td>
<img src="images/spacer.gif" width="1" height="4" alt="" /></td>
</tr>
<tr>
<td width="121" height="225" background="images/web_div_11.jpg">
</td>
<td>
<img src="images/spacer.gif" width="1" height="225" alt="" /></td>
</tr>
<tr>
<td width="50%" height="100%" background="images/web_div_12.jpg">
<p>this cell resize verticaly</p>
</td>
<td colspan="2" width="78" height="100%" background="images/web_div_13.jpg">
this cell resize verticaly</td>
<td colspan="3" width="142" height="7" background="images/web_div_14.jpg">
this cell resize verticaly</td>
<td width="50%" height="100%" background="images/web_div_15.jpg">
this cell resizeverticaly</td>
<td>
<img src="images/spacer.gif" width="1" height="7" alt="" /></td>
</tr>
<tr>
<td rowspan="5" width="50%" height="345" background="images/web_div_16.jpg">
</td>
<td colspan="2" rowspan="2" width="78" height="223" background="images/web_div_17.jpg">
</td>
<td colspan="2" rowspan="2" width="21" height="223" background="images/web_div_18.jpg">
</td>
<td rowspan="4" width="121" height="332" background="images/web_div_19.jpg">
</td>
<td rowspan="5" width="8" height="345" background="images/web_div_20.jpg">
</td>
<td>
<img src="images/spacer.gif" width="1" height="199" alt="" /></td>
</tr>
<tr>
<td width="772" height="24" background="images/web_div_21.jpg">
</td>
<td>
<img src="images/spacer.gif" width="1" height="24" alt="" /></td>
</tr>
<tr>
<td colspan="5" width="871" height="81" background="images/web_div_22.jpg">
</td>
<td>
<img src="images/spacer.gif" width="1" height="81" alt="" /></td>
</tr>
<tr>
<td colspan="2" width="78" height="28" background="images/web_div_23.jpg">
</td>
<td colspan="2" width="773" height="28" background="images/web_div_24.jpg">
</td>
<td width="20" height="28" background="images/web_div_25.jpg">
</td>
<td>
<img src="images/spacer.gif" width="1" height="28" alt="" /></td>
</tr>
<tr>
<td colspan="6" width="992" height="13" background="images/web_div_26.jpg">
</td>
<td>
<img src="images/spacer.gif" width="1" height="13" alt="" /></td>
</tr>
<tr>
<td>
<img src="images/spacer.gif" width="8" height="1" alt="" /></td>
<td>
<img src="images/spacer.gif" width="55" height="1" alt="" /></td>
<td>
<img src="images/spacer.gif" width="23" height="1" alt="" /></td>
<td>
<img src="images/spacer.gif" width="772" height="1" alt="" /></td>
<td>
<img src="images/spacer.gif" width="1" height="1" alt="" /></td>
<td>
<img src="images/spacer.gif" width="20" height="1" alt="" /></td>
<td>
<img src="images/spacer.gif" width="121" height="1" alt="" /></td>
<td>
<img src="images/spacer.gif" width="8" height="1" alt="" /></td>
<td></td>
</tr>
</table>
</html>
Hi Guys, Code: <td><a href="#" onclick="javascript:document.forms['formStatement'].submit()"> <%= statement.getTransaction().get(i).getTransactionId()%></a></td> As u see above is cell of a table, I want to fetch the value of the row cell as i want to use it using request object like req.getAttribute("some attribute"); How can i do that? I've got a small problem, i want to make a table cell that works as a button. I tried it this way: Code: <table border='1' width='100%' height='10%'> <tr> <a href='page.htm'> <td width='20%' height='100%'> </td> </a> But this won't work, does anybody know how I can solve this problem? Hello all! I wanted to ask if there is a way to specify certain width sizes for table cells in a table. The thing is that I have a table in one webpage that, if I leave the width of the TD cells unspecified, I usually end up with some cells being very wide because the text that is written inside them is very big and does not roll up automatically and other cells shrink and become very small in order for the total table not to lose its specified length. Can I set a specific width for the cell that gets filled with many words so that the contents of this cell will wrap and not extend so much? Thank you! I recently made a rollover menu, and though the text does highlight when I roll over the cell, the link only works if I rollover the word is the cell. Is there a way to make the cell itself link? I have (for my sins - should have read up on css earlier) a table-based site, essentially with header, footer, left and right cells and the main piece in the middle. I have used different background colours, but am wanting to highlight the middle bit. I have used a border, but that seems to centre on the edge of the cell - ie half the specified border size is inside the cell and half outside. The effect of this is that my two side pieces have whitespace before they start. Is there any way to specify a 'border' which stays totally within its relevant cell ? Thanks. Code: <td class="row5" style="text-align:center;" width="50"> <b style="font-size:15px; color:#c9c5be; font-family:Georgia;">2</b> <span style="color:#c9c5be;">topics</span> <br /> <b style="font-size:15px; color:#c9c5be; font-family:Georgia;">1</b> <span style="color:#c9c5be;">posts</span><br /><br /> </td> I'm not sure how it's looking in IE, but in Firefox all the text in this table cell is aligned to the right. I can't figure out why. Row5 only adds a background color and nothing else. http://sa.zrkonium.net/ It's visible here ^ The grey topics/posts text is aligned to the right in Firefox rather than in the center where it should be. I can't figure out why it's not aligning right. Any help appreciated. I am doing a simple calendar. I managed to do the table with days etc. I have a problem I wish to highlight a number and the cell automatically according to the date of the day. Can Someone help please? Thanks & best regards |
|||||||