June 21, 201115 yr Hello, I have a question. I have a table with different links and below I have a div box. Now i want that div box to change the background color based on the link clicked. I have tried to find some help from uncle google. however I have not found anything that seems to fit my needs. This is the div box that needs to change <div id="messageBox" class="messageDynamic">Click the above links to display content. </div></td> html 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> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /> <title>Natural Healing</title> <meta http-equiv="Window-target" content="_top" /> <link href="css/menu.css" rel="stylesheet" type="text/css" media="screen" /> <link href="css/template3.css" rel="stylesheet" type="text/css" media="screen" /> <script type="text/javascript" src="scripts/ajaxcalls.js"></script> </head> <body> <div class="container"> <div id="header2" class="header"> <div class="headerDetail"> <p><img src="images/logo1.png" alt="Logo" class="Pngfix" /></p> <!--Begin Menu.--> <!--End Menu --> </div> </div> <div class="page"> <div class="rightbarDetail"> <div class="rightbar"><img src="1.jpg" alt="" class="img" /><img src="2.jpg" alt="" class="img" /><img src="3.jpg" alt="" class="img" /></div> </div> <div class="content"> <div class="contentDetail"> <div class="tableHolder"> <div id="massageContent"> <!-- #BeginSnippet name="" --> <table width="100%" cellpadding="0" cellspacing="0"> <tr> <td width="50%" valign="top"><span>Massage</span> <p class="tablePadding"> <br/> </p> <p class="tablePadding"> </p></td> <td width="50%" valign="top"><div style="padding:5px; padding-top:0px" align="center">Natural Healing Terms & Options</div> <div style="padding-top:10px"> <table width="100%" cellpadding="0" cellspacing="0" class="messageTable"> <tr> <td class="td1" style="padding:5px"><a href="javascript:getContent(1)">Acupressure</a></td> <td class="td2" style="padding:5px"><a href="javascript:getContent(2)">Acupuncture</a></td> <td class="td3" style="padding:5px"><a href="javascript:getContent(3)">Chiropractic</a></td> </tr> <tr> <td class="td4" style="padding:5px"><a href="javascript:getContent(4)">Deep Tissue</a></td> <td class="td5" style="padding:5px"><a href="javascript:getContent(5)">Lymphatic</a></td> <td class="td6" style="padding:5px"><a href="javascript:getContent(6)">Maternity</a></td> </tr> <tr> <td class="td7" style="padding:5px"><a href="javascript:getContent(7)">Reflexology</a></td> <td class="td8" style="padding:5px"><a href="javascript:getContent(">Thai-Strech</a></td> <td class="td9" style="padding:5px"><a href="javascript:getContent(9)">Therapeutic</a></td> </tr> </table> </div> <div id="messageBox" class="messageDynamic">Click the above links to display content. </div></td> </tr> </table> <!-- #EndSnippet --> </div> </div> </div> </div> <div class="contentFix"> </div> </div> </div> <div class="footer"> <div class="footerDetail"><p><a href="index.php">home |</a> <a href="contact.php">contact us |</a> <a href="feedback.php">Feedback |</a> <a href="schedule.pdf">schedule |</a> <a href="privacy.php">privacy |</a></p> </div> </div> </body> </html> css code @charset "utf-8"; /* CSS Document */ /*Start PNG fix do not edit*/ .Pngfix { behavior: url(../scripts/iepngfix.htc) } /* End PNG fix do not edit*/ .img { padding:5px; text-align:center; } body { /* start center */ margin:0; padding:0; /* end center */ line-height: 24px; background-color:#7eccb5; background-image: url("../images/background2.jpg"); background-attachment: fixed; background-repeat: no-repeat; font-family:Arial, Helvetica, sans-serif; } .container { margin: 0 auto; /* the auto margins (in conjunction with a width) center the page */ width: 780px; /* using 20px less than a full 800px width allows for browser chrome and avoids a horizontal scroll bar */ } .page { margin: 20px; background-color: #C8FC98; } .menu { margin-top:20px; z-index:100; } .header { margin: 20px; height: 183px; /*Height of top section*/ clear: both; margin: auto; /* the auto margins (in conjunction with a width) center the page */ } .headerDetail { position: relative; } .rightbar { z-index: 5; height: 210px; } .rightbarDetail { padding:10px; text-align: center; } #rightbarFiller { text-align:center; } .content { z-index: 0; background-color: #C1FFFF; margin: 0px; } .contentDetail { position: relative; padding:10px; height:423px; overflow:auto; } /* this is new */ .tableHolder { position: relative; overflow-x:hidden; } .messagebox { position: relative; padding:10px; } #messageContent td { width:40%; padding:10px; } .messageTable td { width:33%; font-size:12px; font-weight:bold; text-align:center; text-transform:uppercase; padding:5px; } .messageTable td a { text-decoration:none; } .tablePadding { padding-right:20px; text-align:justify; } .messageDynamic { margin-top:10px; padding:10px; height:auto; text-align:justify; background-color:#C60; } /* commenting out to test fore ie8,7 and 6 .contentFloat { float: left; } end commening out */ .contentFix { float: none; clear: both; visibility: hidden; border-bottom: 1px solid white; } .footer { clear: both; float: none; margin: auto; /* the auto margins (in conjunction with a width) center the page */ } .footerDetail { position: relative; color: #333; text-align: center; text-transform:uppercase; } .footer a { color: #03F; text-decoration:none; } .footer a:hover { font-weight:bold; color: #F0F; } Thank you. Edited June 21, 201115 yr by floating one
June 21, 201115 yr <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3c.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html> <head> <title>Untitled</title> <meta name="keywords" content="" /> <meta name="description" content="" /> <meta http-equiv="Content-Type" content="text/html; charset=windows-1251" /> </head> <body> <a href="javascript:colour('#ff0000')">Red</a> <a href="javascript:colour('#00ff00')">Green</a> <a href="javascript:colour('#6699ff')">Blue</a> <div id="messageBox" class="messageDynamic">Click the above links to display content. </div> <script type="text/javascript"> var mb = document.getElementById('messageBox'); function colour(clr) { mb.style.backgroundColor = clr; } </script> </body> </html>
Create an account or sign in to comment