Click to See Complete Forum and Search --> : possible?
stormrevolution
09-04-2003, 04:25 PM
on my website (located at http://www.geocities.com/monkejrq2/revolution_home.htm)
there is a table on the left hand side, in each cell i have a link, i was wondering is there any way that when someone rolls-over the link the cell background would change colour?
Khalid Ali
09-04-2003, 04:34 PM
yes.
<td onmouseover="this.style.background-color:lightyellow;" onmouseout="this.style.background-color:#FFFFFF;">
Charles
09-04-2003, 04:45 PM
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title>Example</title>
<style type="text/css">
<!--
#main {margin-left:6em}
#menu {position:absolute; top:1em; width:6em}
#menu span.separator{display:none}
#menu a {
display:block;
height:1em;
margin:1ex;
padding-left:1em;
width:4em;
}
#menu a:link, #menu a:visited {background-color:#aaa; color:#fff}
#menu a:hover, #menu a:active {background-color:#a00; color:#f00}
-->
</style>
<div id="main">
<h1>Rhafocam man gescro</h1>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipitlobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. Nam liber tempor *** soluta nobis eleifend option congue nihil imperdiet doming id quod mazim placerat facer possim assum. Typi non habent claritatem insitam; est usus legentis in iis qui facit eorum claritatem.</p>
<h3>Etreprem pep screvasnatis</h3>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipitlobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. Nam liber tempor *** soluta nobis eleifend option congue nihil imperdiet doming id quod mazim placerat facer possim assum.</p>
</div>
<div id="menu">
<a href="fee.html">Fee</a>
<span class="separator">|</span>
<a href="fie.html">Fie</a>
<span class="separator">|</span>
<a href="foe.html">Foe</a>
<span class="separator">|</span>
<a href="fum.html">Fum</a>
</div>
stormrevolution
09-05-2003, 03:25 PM
cheers, one question tho,
i got a table already setup with the links, just wondering where i would put this code, also for each cell in the table is it possible or when the mouse rolls over to have a different co
lour for each cell
example:
cell1 = gray to dark blue
cell2 = grey to light blue
Charles
09-05-2003, 03:45 PM
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title>Example</title>
<style type="text/css">
<!--
#menu span.separator{display:none}
#menu a {
display:block;
height:1em;
margin:1ex;
padding-left:1em;
width:4em;
}
a#fee:link, a#fee:visited {background-color:#aaa; color:#00a}
a#fee:hover, a#fee:active {background-color:#00a; color:#aaa}
a#fie:link, a#fie:visited {background-color:#aaa; color:#00f}
a#fie:hover, a#fie:active {background-color:#00f; color:#aaa}
a#foe:link, a#foe:visited {background-color:#aaa; color:#a00}
a#foe:hover, a#foe:active {background-color:#a00; color:#aaa}
a#fum:link, a#fum:visited {background-color:#aaa; color:#f00}
a#fum:hover, a#fum:active {background-color:#f00; color:#aaa}
-->
</style>
<div id="menu">
<a href="fee.html" id="fee">Fee</a>
<span class="separator">|</span>
<a href="fie.html" id="fie">Fie</a>
<span class="separator">|</span>
<a href="foe.html" id="foe">Foe</a>
<span class="separator">|</span>
<a href="fum.html" id="fum">Fum</a>
</div>
stormrevolution
09-05-2003, 04:38 PM
cheers for that, its like what im looking for, but i want it for a table, and this is the table i will be using it for:
<div style="top : 112;left : 4;
position : absolute;
z-index : 77; width:147; height:343" id="Layer43">
<table border="1" cellpadding="0" cellspacing="0" style="border-collapse: collapse" width="100%" id="AutoNumber3" bordercolor="#FFFFFF">
<tr>
<td width="100%" bgcolor="#FFFFFF" style="font-size: 10px; font-family: Arial" colspan="2" bordercolor="#FFFFFF">
<p align="center">
<img border="0" src="bar2.bmp"></td>
</tr>
<tr>
<td width="3%" bgcolor="#0099CC" style="font-size: 10px; font-family: Arial" bordercolor="#FFFFFF"> </td>
<td width="97%" bgcolor="#C0C0C0" style="font-size: 10px; font-family: Arial" bordercolor="#FFFFFF">
<font face="Tahoma" size="1"> <a title="Home" href="revolution_home.htm">Home</a></font></td>
</tr>
<tr>
<td width="3%" bgcolor="#0099FF" style="font-size: 10px; font-family: Arial" bordercolor="#FFFFFF"> </td>
<td width="97%" bgcolor="#C0C0C0" style="font-size: 10px; font-family: Arial" bordercolor="#FFFFFF">
<font face="Tahoma" size="1"> <a title="Listen Live" href="listenlive.htm">Listen Live</a></font></td>
</tr>
<tr>
<td width="3%" bgcolor="#66CCFF" style="font-size: 10px; font-family: Arial" bordercolor="#FFFFFF"> </td>
<td width="97%" bgcolor="#C0C0C0" style="font-size: 10px; font-family: Arial" bordercolor="#FFFFFF">
<font face="Tahoma" size="1"> <a title="Schedule" href="schedule.htm">Schedule</a></font></td>
</tr>
<tr>
<td width="3%" bgcolor="#99CCFF" style="font-size: 10px; font-family: Arial" bordercolor="#FFFFFF"> </td>
<td width="97%" bgcolor="#C0C0C0" style="font-size: 10px; font-family: Arial" bordercolor="#FFFFFF">
<font face="Tahoma" size="1"> <a title="Gamezone" href="gamezone.htm">Gamezone</a></font></td>
</tr>
<tr>
<td width="3%" bgcolor="#66CCFF" style="font-size: 10px; font-family: Arial" bordercolor="#FFFFFF"> </td>
<td width="97%" bgcolor="#C0C0C0" style="font-size: 10px; font-family: Arial" bordercolor="#FFFFFF">
<font face="Tahoma" size="1"> <a title="Chatzone" href="chatzone.htm">Chatzone</a></font></td>
</tr>
<tr>
<td width="3%" bgcolor="#3399FF" style="font-size: 10px; font-family: Arial" bordercolor="#FFFFFF"> </td>
<td width="97%" bgcolor="#C0C0C0" style="font-size: 10px; font-family: Arial" bordercolor="#FFFFFF">
<font face="Tahoma" size="1"> <a title="Mobilezone" href="mobilezone.htm">Mobilezone</a></font></td>
</tr>
<tr>
<td width="3%" bgcolor="#0099CC" style="font-size: 10px; font-family: Arial" bordercolor="#FFFFFF"> </td>
<td width="97%" bgcolor="#C0C0C0" style="font-size: 10px; font-family: Arial" bordercolor="#FFFFFF">
<font face="Tahoma" size="1"> <a title="Jokezone" href="jokezone.htm">Jokezone</a></font></td>
</tr>
<tr>
<td width="3%" bgcolor="#0099FF" style="font-size: 10px; font-family: Arial" bordercolor="#FFFFFF"> </td>
<td width="97%" bgcolor="#C0C0C0" style="font-size: 10px; font-family: Arial" bordercolor="#FFFFFF">
<font face="Tahoma" size="1"> <a title="Programzone" href="programzone.htm">Programzone</a></font></td>
</tr>
<tr>
<td width="3%" bgcolor="#66CCFF" style="font-size: 10px; font-family: Arial" bordercolor="#FFFFFF"> </td>
<td width="97%" bgcolor="#C0C0C0" style="font-size: 10px; font-family: Arial" bordercolor="#FFFFFF">
<font face="Tahoma" size="1"> <a title="Weekly Poll" href="weeklypoll.htm">Weekly Poll</a></font></td>
</tr>
<tr>
<td width="3%" bgcolor="#99CCFF" style="font-size: 10px; font-family: Arial" bordercolor="#FFFFFF"> </td>
<td width="97%" bgcolor="#C0C0C0" style="font-size: 10px; font-family: Arial" bordercolor="#FFFFFF">
<font face="Tahoma"> <a title="Request Centre" href="requestcentre.htm">Request Centre</a></font></td>
</tr>
<tr>
<td width="3%" bgcolor="#66CCFF" style="font-size: 10px; font-family: Arial" bordercolor="#FFFFFF"> </td>
<td width="97%" bgcolor="#C0C0C0" style="font-size: 10px; font-family: Arial" bordercolor="#FFFFFF">
<font face="Tahoma"> <a title="The Music" href="themusic.htm">The Music</a></font></td>
</tr>
<tr>
<td width="3%" bgcolor="#0099FF" style="font-size: 10px; font-family: Arial" bordercolor="#FFFFFF"> </td>
<td width="97%" bgcolor="#C0C0C0" style="font-size: 10px; font-family: Arial" bordercolor="#FFFFFF">
<font face="Tahoma"> <a title="News & Weather" href="news.htm">News & Weather</a></font></td>
</tr>
<tr>
<td width="3%" bgcolor="#0099CC" style="font-size: 10px; font-family: Arial" bordercolor="#FFFFFF"> </td>
<td width="97%" bgcolor="#C0C0C0" style="font-size: 10px; font-family: Arial" bordercolor="#FFFFFF">
<font face="Tahoma"> <a title="Studio Cams" href="studiocams.htm">Studio Cams</a></font></td>
</tr>
<tr>
<td width="3%" bgcolor="#3399FF" style="font-size: 10px; font-family: Arial" bordercolor="#FFFFFF"> </td>
<td width="97%" bgcolor="#C0C0C0" style="font-size: 10px; font-family: Arial" bordercolor="#FFFFFF">
<font face="Tahoma"> <a title="Message Forums" href="forums.htm">Message Forums</a></font></td>
</tr>
<tr>
<td width="3%" bgcolor="#66CCFF" style="font-size: 10px; font-family: Arial" bordercolor="#FFFFFF"> </td>
<td width="97%" bgcolor="#C0C0C0" style="font-size: 10px; font-family: Arial" bordercolor="#FFFFFF">
<font face="Tahoma"> <a title="About Us" href="aboutus.htm">About Us</a></font></td>
</tr>
<tr>
<td width="3%" bgcolor="#99CCFF" style="font-size: 10px; font-family: Arial" bordercolor="#FFFFFF"> </td>
<td width="97%" bgcolor="#C0C0C0" style="font-size: 10px; font-family: Arial" bordercolor="#FFFFFF">
<font face="Tahoma"> <a title="Awards" href="awards.htm">Awards</a></font></td>
</tr>
<tr>
<td width="3%" bgcolor="#66CCFF" style="font-size: 10px; font-family: Arial" bordercolor="#FFFFFF"> </td>
<td width="97%" bgcolor="#C0C0C0" style="font-size: 10px; font-family: Arial" bordercolor="#FFFFFF">
<font face="Tahoma"> <a title="Advertisement Sales" href="advertisement.htm">Advertisement Sales</a></font></td>
</tr>
<tr>
<td width="3%" bgcolor="#0099FF" style="font-size: 10px; font-family: Arial" bordercolor="#FFFFFF"> </td>
<td width="97%" bgcolor="#C0C0C0" style="font-size: 10px; font-family: Arial" bordercolor="#FFFFFF">
<font face="Tahoma"> <a title="Broadcasters Sites" href="broadcasters.htm">Broadcasters Sites</a></font></td>
</tr>
<tr>
<td width="3%" bgcolor="#0099CC" style="font-size: 10px; font-family: Arial" bordercolor="#FFFFFF"> </td>
<td width="97%" bgcolor="#C0C0C0" style="font-size: 10px; font-family: Arial" bordercolor="#FFFFFF">
<font face="Tahoma"> <a title="Link To Us" href="linktous.htm">Link To Us</a></font></td>
</tr>
<tr>
<td width="3%" bgcolor="#0099FF" style="font-size: 10px; font-family: Arial" bordercolor="#FFFFFF"> </td>
<td width="97%" bgcolor="#C0C0C0" style="font-size: 10px; font-family: Arial" bordercolor="#FFFFFF">
<font face="Tahoma"> <a title="How To Listen" href="howtolisten.htm">How To Listen</a></font></td>
</tr>
<tr>
<td width="3%" bgcolor="#66CCFF" style="font-size: 10px; font-family: Arial" bordercolor="#FFFFFF"> </td>
<td width="97%" bgcolor="#C0C0C0" style="font-size: 10px; font-family: Arial" bordercolor="#FFFFFF">
<font face="Tahoma"> <a title="Advice" href="advice.htm">Advice</a></font></td>
</tr>
<tr>
<td width="3%" bgcolor="#99CCFF" style="font-size: 10px; font-family: Arial" bordercolor="#FFFFFF"> </td>
<td width="97%" bgcolor="#C0C0C0" style="font-size: 10px; font-family: Arial" bordercolor="#FFFFFF">
<font face="Tahoma"> <a title="Contact" href="contact.htm">Contact</a></font></td>
</tr>
<tr>
<td width="3%" bgcolor="#66CCFF" style="font-size: 10px; font-family: Arial" bordercolor="#FFFFFF"> </td>
<td width="97%" bgcolor="#C0C0C0" style="font-size: 10px; font-family: Arial" bordercolor="#FFFFFF">
<font face="Tahoma"> <a title="Support" href="support.htm">Support</a></font></td>
</tr>
<tr>
<td width="3%" bgcolor="#3399FF" style="font-size: 10px; font-family: Arial" bordercolor="#FFFFFF"> </td>
<td width="97%" bgcolor="#C0C0C0" style="font-size: 10px; font-family: Arial" bordercolor="#FFFFFF">
<font face="Tahoma"> <a title="Staff Applications" href="staffapps.htm">Staff Applications</a></font></td>
</tr>
</table>
</div>
how would i go about adding a code to change the cell colour on mouseover to this table??
Charles
09-05-2003, 04:44 PM
From the HTML 4.01 Specification:
Tables should not be used purely as a means to layout document content as this may present problems when rendering to non-visual media. Additionally, when used with graphics, these tables may force users to scroll horizontally to view a table designed on a system with a larger display. To minimize these problems, authors should use style sheets to control layout rather than tables.
http://www.w3.org/TR/html4/struct/tables.html#h-11.1But if, owing to some mental or moral defect, you must use TABLEs for layuout, simply increase the size of your A elements to that of the containing TD element.
And you really need to run that thing throught the CSS validator (http://jigsaw.w3.org/css-validator/) and, I suspect, the HTML validator (http://validator.w3.org/) as well.
stormrevolution
09-05-2003, 05:11 PM
i know i gotta run some HTML checks on my site (been changed so many times, some crap is starting to build up!)
the only reason im using a table is for this navagation menu, i was just wondering if i could add the code to change the cell background colour to this table and if so, where do i add it and how??
cheers for all your help so far.
Charles
09-05-2003, 06:36 PM
Originally posted by stormrevolution
the only reason im using a table is for this navagation menuAnd I've, above, shown you how to get rid of that TABLE. And you'll note that my mark up is much easier to read and maintain.
stormrevolution
09-07-2003, 08:30 AM
hmmm...i cannot work any of this, can someone just help me in getting this table to work:
<div style="top : 112;left : 4;
position : absolute;
z-index : 77; width:147; height:343" id="Layer43">
<table border="1" cellpadding="0" cellspacing="0" style="border-collapse: collapse" width="100%" id="AutoNumber3" bordercolor="#FFFFFF">
<tr>
<td width="100%" bgcolor="#FFFFFF" style="font-size: 10px; font-family: Arial" colspan="2" bordercolor="#FFFFFF">
<p align="center">
<img border="0" src="bar2.bmp"></td>
</tr>
<tr>
<td width="3%" bgcolor="#0099CC" style="font-size: 10px; font-family: Arial" bordercolor="#FFFFFF"> </td>
<td width="97%" bgcolor="#C0C0C0" style="font-size: 10px; font-family: Arial" bordercolor="#FFFFFF">
<font face="Tahoma" size="1"> <a title="Home" href="revolution_home.htm">Home</a></font></td>
</tr>
<tr>
<td width="3%" bgcolor="#0099FF" style="font-size: 10px; font-family: Arial" bordercolor="#FFFFFF"> </td>
<td width="97%" bgcolor="#C0C0C0" style="font-size: 10px; font-family: Arial" bordercolor="#FFFFFF">
<font face="Tahoma" size="1"> <a title="Listen Live" href="listenlive.htm">Listen Live</a></font></td>
</tr>
<tr>
<td width="3%" bgcolor="#66CCFF" style="font-size: 10px; font-family: Arial" bordercolor="#FFFFFF"> </td>
<td width="97%" bgcolor="#C0C0C0" style="font-size: 10px; font-family: Arial" bordercolor="#FFFFFF">
<font face="Tahoma" size="1"> <a title="Schedule" href="schedule.htm">Schedule</a></font></td>
</tr>
<tr>
<td width="3%" bgcolor="#99CCFF" style="font-size: 10px; font-family: Arial" bordercolor="#FFFFFF"> </td>
<td width="97%" bgcolor="#C0C0C0" style="font-size: 10px; font-family: Arial" bordercolor="#FFFFFF">
<font face="Tahoma" size="1"> <a title="Gamezone" href="gamezone.htm">Gamezone</a></font></td>
</tr>
<tr>
<td width="3%" bgcolor="#66CCFF" style="font-size: 10px; font-family: Arial" bordercolor="#FFFFFF"> </td>
<td width="97%" bgcolor="#C0C0C0" style="font-size: 10px; font-family: Arial" bordercolor="#FFFFFF">
<font face="Tahoma" size="1"> <a title="Chatzone" href="chatzone.htm">Chatzone</a></font></td>
</tr>
<tr>
<td width="3%" bgcolor="#3399FF" style="font-size: 10px; font-family: Arial" bordercolor="#FFFFFF"> </td>
<td width="97%" bgcolor="#C0C0C0" style="font-size: 10px; font-family: Arial" bordercolor="#FFFFFF">
<font face="Tahoma" size="1"> <a title="Mobilezone" href="mobilezone.htm">Mobilezone</a></font></td>
</tr>
<tr>
<td width="3%" bgcolor="#0099CC" style="font-size: 10px; font-family: Arial" bordercolor="#FFFFFF"> </td>
<td width="97%" bgcolor="#C0C0C0" style="font-size: 10px; font-family: Arial" bordercolor="#FFFFFF">
<font face="Tahoma" size="1"> <a title="Jokezone" href="jokezone.htm">Jokezone</a></font></td>
</tr>
<tr>
<td width="3%" bgcolor="#0099FF" style="font-size: 10px; font-family: Arial" bordercolor="#FFFFFF"> </td>
<td width="97%" bgcolor="#C0C0C0" style="font-size: 10px; font-family: Arial" bordercolor="#FFFFFF">
<font face="Tahoma" size="1"> <a title="Programzone" href="programzone.htm">Programzone</a></font></td>
</tr>
<tr>
<td width="3%" bgcolor="#66CCFF" style="font-size: 10px; font-family: Arial" bordercolor="#FFFFFF"> </td>
<td width="97%" bgcolor="#C0C0C0" style="font-size: 10px; font-family: Arial" bordercolor="#FFFFFF">
<font face="Tahoma" size="1"> <a title="Weekly Poll" href="weeklypoll.htm">Weekly Poll</a></font></td>
</tr>
<tr>
<td width="3%" bgcolor="#99CCFF" style="font-size: 10px; font-family: Arial" bordercolor="#FFFFFF"> </td>
<td width="97%" bgcolor="#C0C0C0" style="font-size: 10px; font-family: Arial" bordercolor="#FFFFFF">
<font face="Tahoma"> <a title="Request Centre" href="requestcentre.htm">Request Centre</a></font></td>
</tr>
<tr>
<td width="3%" bgcolor="#66CCFF" style="font-size: 10px; font-family: Arial" bordercolor="#FFFFFF"> </td>
<td width="97%" bgcolor="#C0C0C0" style="font-size: 10px; font-family: Arial" bordercolor="#FFFFFF">
<font face="Tahoma"> <a title="The Music" href="themusic.htm">The Music</a></font></td>
</tr>
<tr>
<td width="3%" bgcolor="#0099FF" style="font-size: 10px; font-family: Arial" bordercolor="#FFFFFF"> </td>
<td width="97%" bgcolor="#C0C0C0" style="font-size: 10px; font-family: Arial" bordercolor="#FFFFFF">
<font face="Tahoma"> <a title="News & Weather" href="news.htm">News & Weather</a></font></td>
</tr>
<tr>
<td width="3%" bgcolor="#0099CC" style="font-size: 10px; font-family: Arial" bordercolor="#FFFFFF"> </td>
<td width="97%" bgcolor="#C0C0C0" style="font-size: 10px; font-family: Arial" bordercolor="#FFFFFF">
<font face="Tahoma"> <a title="Studio Cams" href="studiocams.htm">Studio Cams</a></font></td>
</tr>
<tr>
<td width="3%" bgcolor="#3399FF" style="font-size: 10px; font-family: Arial" bordercolor="#FFFFFF"> </td>
<td width="97%" bgcolor="#C0C0C0" style="font-size: 10px; font-family: Arial" bordercolor="#FFFFFF">
<font face="Tahoma"> <a title="Message Forums" href="forums.htm">Message Forums</a></font></td>
</tr>
<tr>
<td width="3%" bgcolor="#66CCFF" style="font-size: 10px; font-family: Arial" bordercolor="#FFFFFF"> </td>
<td width="97%" bgcolor="#C0C0C0" style="font-size: 10px; font-family: Arial" bordercolor="#FFFFFF">
<font face="Tahoma"> <a title="About Us" href="aboutus.htm">About Us</a></font></td>
</tr>
<tr>
<td width="3%" bgcolor="#99CCFF" style="font-size: 10px; font-family: Arial" bordercolor="#FFFFFF"> </td>
<td width="97%" bgcolor="#C0C0C0" style="font-size: 10px; font-family: Arial" bordercolor="#FFFFFF">
<font face="Tahoma"> <a title="Awards" href="awards.htm">Awards</a></font></td>
</tr>
<tr>
<td width="3%" bgcolor="#66CCFF" style="font-size: 10px; font-family: Arial" bordercolor="#FFFFFF"> </td>
<td width="97%" bgcolor="#C0C0C0" style="font-size: 10px; font-family: Arial" bordercolor="#FFFFFF">
<font face="Tahoma"> <a title="Advertisement Sales" href="advertisement.htm">Advertisement Sales</a></font></td>
</tr>
<tr>
<td width="3%" bgcolor="#0099FF" style="font-size: 10px; font-family: Arial" bordercolor="#FFFFFF"> </td>
<td width="97%" bgcolor="#C0C0C0" style="font-size: 10px; font-family: Arial" bordercolor="#FFFFFF">
<font face="Tahoma"> <a title="Broadcasters Sites" href="broadcasters.htm">Broadcasters Sites</a></font></td>
</tr>
<tr>
<td width="3%" bgcolor="#0099CC" style="font-size: 10px; font-family: Arial" bordercolor="#FFFFFF"> </td>
<td width="97%" bgcolor="#C0C0C0" style="font-size: 10px; font-family: Arial" bordercolor="#FFFFFF">
<font face="Tahoma"> <a title="Link To Us" href="linktous.htm">Link To Us</a></font></td>
</tr>
<tr>
<td width="3%" bgcolor="#0099FF" style="font-size: 10px; font-family: Arial" bordercolor="#FFFFFF"> </td>
<td width="97%" bgcolor="#C0C0C0" style="font-size: 10px; font-family: Arial" bordercolor="#FFFFFF">
<font face="Tahoma"> <a title="How To Listen" href="howtolisten.htm">How To Listen</a></font></td>
</tr>
<tr>
<td width="3%" bgcolor="#66CCFF" style="font-size: 10px; font-family: Arial" bordercolor="#FFFFFF"> </td>
<td width="97%" bgcolor="#C0C0C0" style="font-size: 10px; font-family: Arial" bordercolor="#FFFFFF">
<font face="Tahoma"> <a title="Advice" href="advice.htm">Advice</a></font></td>
</tr>
<tr>
<td width="3%" bgcolor="#99CCFF" style="font-size: 10px; font-family: Arial" bordercolor="#FFFFFF"> </td>
<td width="97%" bgcolor="#C0C0C0" style="font-size: 10px; font-family: Arial" bordercolor="#FFFFFF">
<font face="Tahoma"> <a title="Contact" href="contact.htm">Contact</a></font></td>
</tr>
<tr>
<td width="3%" bgcolor="#66CCFF" style="font-size: 10px; font-family: Arial" bordercolor="#FFFFFF"> </td>
<td width="97%" bgcolor="#C0C0C0" style="font-size: 10px; font-family: Arial" bordercolor="#FFFFFF">
<font face="Tahoma"> <a title="Support" href="support.htm">Support</a></font></td>
</tr>
<tr>
<td width="3%" bgcolor="#3399FF" style="font-size: 10px; font-family: Arial" bordercolor="#FFFFFF"> </td>
<td width="97%" bgcolor="#C0C0C0" style="font-size: 10px; font-family: Arial" bordercolor="#FFFFFF">
<font face="Tahoma"> <a title="Staff Applications" href="staffapps.htm">Staff Applications</a></font></td>
</tr>
</table>
</div>
all i want to happen is when the mouse rolls over a cell for the cell background colour to change, if anyone can please help me in doing this to the table i have posted above it would be great, im just getting really confused now and just want this table to do this.
Cheers all
Khalid Ali
09-07-2003, 09:26 AM
Originally posted by Khalid Ali
yes.
<td onmouseover="this.style.background-color:lightyellow;" onmouseout="this.style.background-color:#FFFFFF;">
I did in the very beginning.
just add the above in all of your td's with appropriate colors
stormrevolution
09-07-2003, 09:47 AM
yep ive been trying to add it, but everytime i do so, i get a javascript error :-S
could you tell me where abouts i add them??
cheers for your help, its been great.
Khalid Ali
09-07-2003, 09:52 AM
add the following line
onmouseover="this.style.background-color:lightyellow;" onmouseout="this.style.background-color:#FFFFFF;"
in every td.such as
<td onmouseover="this.style.background-color:lightyellow;" onmouseout="this.style.background-color:#FFFFFF;" >
stormrevolution
09-07-2003, 10:05 AM
hmmm, think im starting to understand now!!
take this cell for instance:
<tr>
<td ADD IT HERE?width="97%" bgcolor="#C0C0C0" style="font-size: 10px; font-family: Arial" bordercolor="#FFFFFF">
<font face="Tahoma" size="1"> <a title="Home" href="revolution_home.htm">Home</a></font></td>
</tr>
i've put in ADD IT HERE? where i think the code should be added, is this correct??
stormrevolution
09-07-2003, 10:31 AM
hmm..ok...i tryed what i just posted and i am still getting javascript errors, and the cell is not changing colour :(
Charles
09-07-2003, 11:25 AM
Then give my method a go. And it'll work on more browsers.
stormrevolution
09-07-2003, 11:34 AM
i would give it a go, but the problem is that the way you have shown me will not match in with the rest of the site and will look outta place completly, i am however considering your way for a future website i am developing as it will match with the style.
I Just at this time need to find out where abouts do i insert this:
onmouseover="this.style.background-color:lightyellow;" onmouseout="this.style.background-color:#FFFFFF;"
i know its gotta be in the "td" area, but i dont know where, everytime i place this code it seems to give me a javascript error.
could someone please tell me where to put this code?? which part of the table, im soooo stuck! :(, heres the table code:
<table border="1" cellpadding="0" cellspacing="0" style="border-collapse: collapse" width="100%" id="AutoNumber3" bordercolor="#FFFFFF">
<tr>
<td width="100%" bgcolor="#FFFFFF" style="font-size: 10px; font-family: Arial" colspan="2" bordercolor="#FFFFFF">
<p align="center">
<img border="0" src="bar2.bmp"></td>
</tr>
<tr>
<td width="3%" bgcolor="#0099CC" style="font-size: 10px; font-family: Arial" bordercolor="#FFFFFF"> </td>
<td width="97%" bgcolor="#C0C0C0" style="font-size: 10px; font-family: Arial" bordercolor="#FFFFFF">
<font face="Tahoma" size="1"> <a title="Home" href="revolution_home.htm">Home</a></font></td>
</tr>
<tr>
<td width="3%" bgcolor="#0099FF" style="font-size: 10px; font-family: Arial" bordercolor="#FFFFFF"> </td>
<td width="97%" bgcolor="#C0C0C0" style="font-size: 10px; font-family: Arial" bordercolor="#FFFFFF">
<font face="Tahoma" size="1"> <a title="Listen Live" href="listenlive.htm">Listen Live</a></font></td>
</tr>
<tr>
<td width="3%" bgcolor="#66CCFF" style="font-size: 10px; font-family: Arial" bordercolor="#FFFFFF"> </td>
<td width="97%" bgcolor="#C0C0C0" style="font-size: 10px; font-family: Arial" bordercolor="#FFFFFF">
<font face="Tahoma" size="1"> <a title="Schedule" href="schedule.htm">Schedule</a></font></td>
</tr>
<tr>
<td width="3%" bgcolor="#99CCFF" style="font-size: 10px; font-family: Arial" bordercolor="#FFFFFF"> </td>
<td width="97%" bgcolor="#C0C0C0" style="font-size: 10px; font-family: Arial" bordercolor="#FFFFFF">
<font face="Tahoma" size="1"> <a title="Gamezone" href="gamezone.htm">Gamezone</a></font></td>
</tr>
<tr>
<td width="3%" bgcolor="#66CCFF" style="font-size: 10px; font-family: Arial" bordercolor="#FFFFFF"> </td>
<td width="97%" bgcolor="#C0C0C0" style="font-size: 10px; font-family: Arial" bordercolor="#FFFFFF">
<font face="Tahoma" size="1"> <a title="Chatzone" href="chatzone.htm">Chatzone</a></font></td>
</tr>
<tr>
<td width="3%" bgcolor="#3399FF" style="font-size: 10px; font-family: Arial" bordercolor="#FFFFFF"> </td>
<td width="97%" bgcolor="#C0C0C0" style="font-size: 10px; font-family: Arial" bordercolor="#FFFFFF">
<font face="Tahoma" size="1"> <a title="Mobilezone" href="mobilezone.htm">Mobilezone</a></font></td>
</tr>
<tr>
<td width="3%" bgcolor="#0099CC" style="font-size: 10px; font-family: Arial" bordercolor="#FFFFFF"> </td>
<td width="97%" bgcolor="#C0C0C0" style="font-size: 10px; font-family: Arial" bordercolor="#FFFFFF">
<font face="Tahoma" size="1"> <a title="Jokezone" href="jokezone.htm">Jokezone</a></font></td>
</tr>
<tr>
<td width="3%" bgcolor="#0099FF" style="font-size: 10px; font-family: Arial" bordercolor="#FFFFFF"> </td>
<td width="97%" bgcolor="#C0C0C0" style="font-size: 10px; font-family: Arial" bordercolor="#FFFFFF">
<font face="Tahoma" size="1"> <a title="Programzone" href="programzone.htm">Programzone</a></font></td>
</tr>
<tr>
<td width="3%" bgcolor="#66CCFF" style="font-size: 10px; font-family: Arial" bordercolor="#FFFFFF"> </td>
<td width="97%" bgcolor="#C0C0C0" style="font-size: 10px; font-family: Arial" bordercolor="#FFFFFF">
<font face="Tahoma" size="1"> <a title="Weekly Poll" href="weeklypoll.htm">Weekly Poll</a></font></td>
</tr>
<tr>
<td width="3%" bgcolor="#99CCFF" style="font-size: 10px; font-family: Arial" bordercolor="#FFFFFF"> </td>
<td width="97%" bgcolor="#C0C0C0" style="font-size: 10px; font-family: Arial" bordercolor="#FFFFFF">
<font face="Tahoma"> <a title="Request Centre" href="requestcentre.htm">Request Centre</a></font></td>
</tr>
<tr>
<td width="3%" bgcolor="#66CCFF" style="font-size: 10px; font-family: Arial" bordercolor="#FFFFFF"> </td>
<td width="97%" bgcolor="#C0C0C0" style="font-size: 10px; font-family: Arial" bordercolor="#FFFFFF">
<font face="Tahoma"> <a title="The Music" href="themusic.htm">The Music</a></font></td>
</tr>
<tr>
<td width="3%" bgcolor="#0099FF" style="font-size: 10px; font-family: Arial" bordercolor="#FFFFFF"> </td>
<td width="97%" bgcolor="#C0C0C0" style="font-size: 10px; font-family: Arial" bordercolor="#FFFFFF">
<font face="Tahoma"> <a title="News & Weather" href="news.htm">News & Weather</a></font></td>
</tr>
<tr>
<td width="3%" bgcolor="#0099CC" style="font-size: 10px; font-family: Arial" bordercolor="#FFFFFF"> </td>
<td width="97%" bgcolor="#C0C0C0" style="font-size: 10px; font-family: Arial" bordercolor="#FFFFFF">
<font face="Tahoma"> <a title="Studio Cams" href="studiocams.htm">Studio Cams</a></font></td>
</tr>
<tr>
<td width="3%" bgcolor="#3399FF" style="font-size: 10px; font-family: Arial" bordercolor="#FFFFFF"> </td>
<td width="97%" bgcolor="#C0C0C0" style="font-size: 10px; font-family: Arial" bordercolor="#FFFFFF">
<font face="Tahoma"> <a title="Message Forums" href="forums.htm">Message Forums</a></font></td>
</tr>
<tr>
<td width="3%" bgcolor="#66CCFF" style="font-size: 10px; font-family: Arial" bordercolor="#FFFFFF"> </td>
<td width="97%" bgcolor="#C0C0C0" style="font-size: 10px; font-family: Arial" bordercolor="#FFFFFF">
<font face="Tahoma"> <a title="About Us" href="aboutus.htm">About Us</a></font></td>
</tr>
<tr>
<td width="3%" bgcolor="#99CCFF" style="font-size: 10px; font-family: Arial" bordercolor="#FFFFFF"> </td>
<td width="97%" bgcolor="#C0C0C0" style="font-size: 10px; font-family: Arial" bordercolor="#FFFFFF">
<font face="Tahoma"> <a title="Awards" href="awards.htm">Awards</a></font></td>
</tr>
<tr>
<td width="3%" bgcolor="#66CCFF" style="font-size: 10px; font-family: Arial" bordercolor="#FFFFFF"> </td>
<td width="97%" bgcolor="#C0C0C0" style="font-size: 10px; font-family: Arial" bordercolor="#FFFFFF">
<font face="Tahoma"> <a title="Advertisement Sales" href="advertisement.htm">Advertisement Sales</a></font></td>
</tr>
<tr>
<td width="3%" bgcolor="#0099FF" style="font-size: 10px; font-family: Arial" bordercolor="#FFFFFF"> </td>
<td width="97%" bgcolor="#C0C0C0" style="font-size: 10px; font-family: Arial" bordercolor="#FFFFFF">
<font face="Tahoma"> <a title="Broadcasters Sites" href="broadcasters.htm">Broadcasters Sites</a></font></td>
</tr>
<tr>
<td width="3%" bgcolor="#0099CC" style="font-size: 10px; font-family: Arial" bordercolor="#FFFFFF"> </td>
<td width="97%" bgcolor="#C0C0C0" style="font-size: 10px; font-family: Arial" bordercolor="#FFFFFF">
<font face="Tahoma"> <a title="Link To Us" href="linktous.htm">Link To Us</a></font></td>
</tr>
<tr>
<td width="3%" bgcolor="#0099FF" style="font-size: 10px; font-family: Arial" bordercolor="#FFFFFF"> </td>
<td width="97%" bgcolor="#C0C0C0" style="font-size: 10px; font-family: Arial" bordercolor="#FFFFFF">
<font face="Tahoma"> <a title="How To Listen" href="howtolisten.htm">How To Listen</a></font></td>
</tr>
<tr>
<td width="3%" bgcolor="#66CCFF" style="font-size: 10px; font-family: Arial" bordercolor="#FFFFFF"> </td>
<td width="97%" bgcolor="#C0C0C0" style="font-size: 10px; font-family: Arial" bordercolor="#FFFFFF">
<font face="Tahoma"> <a title="Advice" href="advice.htm">Advice</a></font></td>
</tr>
<tr>
<td width="3%" bgcolor="#99CCFF" style="font-size: 10px; font-family: Arial" bordercolor="#FFFFFF"> </td>
<td width="97%" bgcolor="#C0C0C0" style="font-size: 10px; font-family: Arial" bordercolor="#FFFFFF">
<font face="Tahoma"> <a title="Contact" href="contact.htm">Contact</a></font></td>
</tr>
<tr>
<td width="3%" bgcolor="#66CCFF" style="font-size: 10px; font-family: Arial" bordercolor="#FFFFFF"> </td>
<td width="97%" bgcolor="#C0C0C0" style="font-size: 10px; font-family: Arial" bordercolor="#FFFFFF">
<font face="Tahoma"> <a title="Support" href="support.htm">Support</a></font></td>
</tr>
<tr>
<td width="3%" bgcolor="#3399FF" style="font-size: 10px; font-family: Arial" bordercolor="#FFFFFF"> </td>
<td width="97%" bgcolor="#C0C0C0" style="font-size: 10px; font-family: Arial" bordercolor="#FFFFFF">
<font face="Tahoma"> <a title="Staff Applications" href="staffapps.htm">Staff Applications</a></font></td>
</tr>
</table>
stormrevolution
09-07-2003, 01:07 PM
are there any websites where this is done, where i can see a preview of it in action???
cheers all
Khalid Ali
09-07-2003, 01:23 PM
oops a bit of my error..here is an example I made it in your code
<td onmouseover="this.style.backgroundColor='lightyellow';" onmouseout="this.style.backgroundColor='#FFFFFF';" width="3%" bgcolor="#0099CC" style="font-size: 10px; font-family: Arial" bordercolor="#FFFFFF"></td>
<td onmouseover="this.style.backgroundColor='lightyellow';" onmouseout="this.style.backgroundColor='#FFFFFF';" width="97%" bgcolor="#C0C0C0" style="font-size: 10px; font-family: Arial" bordercolor="#FFFFFF"></td>
stormrevolution
09-07-2003, 01:59 PM
WOO!! Cheers! it works great, thanks for all your help with this, sorry if i was a bit slow on the take up!! but it works great and your the one to thank for it.
thanks
steve.
Khalid Ali
09-07-2003, 02:07 PM
you are welcome...:D