So, I’m going to dip into the SDMB pool of computer experience and knowledge for a moment.
My goal is to create an effect where an onMouseOver/onMouseOut event causes a table cell (<td> tag) to change its bgcolor, and then revert back to the original color. The cell is mostly obscured by a <img> which is also a <a href>, the event handler is presumably going to be within the <a href> tag but I’m willing to consider a method I haven’t thought of.
What do you geniouses think?
I’m not sure it’s such a hot idea really.
But then what the hell do I know?
andy, its not gratitious Java use, I’ll show everyone the result once its going, it looks nice. The only thing you really see is a small highlight behind the image implying its an active link, similar to the alink attribute.
Anyways, I forgot to mention the main complication. I’ve come up with a few methods that didn’t work espeially well. The major problem is that it needs to work in both IE 5.x and Netscape 4.x.
my trick when i see something I like at a website is to examine the code. Find someone who has done it and see how he did it.
How about this:
(i) In <STYLE> tags in the head:
<!--
.defaultCell {background-color: black; text-decoration: none;}
.defaultText {color: gray; text-decoration: none;}
.hoverText {color: white; text-decoration: none;}
.hoverCell {background-color: navy;}
-->
And also:
<script language="javascript">
<!-- hide --
function goTo(where) {
document.location=where;
}
function hiLiteCell(cellID) {
eval (cellID + ".className = 'hoverCell'");
eval (cellID + "Text.className = 'hoverText'");
}
function unHiLiteCell(cellID) {
eval (cellID + ".className = 'defaultCell'");
eval (cellID + "Text.className = 'defaultText'") ;
}
// -->
</script>
(ii) Then, in the body, ‘encase’ the links in a table, giving each link a separate with a unique identifier (“alt” in this example):
<TR id="alt" onClick="javascript:goTo('http://www.fervent.co.uk/')"
onMouseOver="javascript:hiLiteCell('alt')" onMouseOut="javascript:unHiLiteCell('alt')">
<td align="center">
<FONT SIZE="1" face=" Tahoma, Verdana, Arial, Helvetica " COLOR="gray">
<A class="defaultText" id="altText" HREF="http://www.fervent.co.uk/">[ back home ]</A>
</font>
</td>
<tr>
Sorry if there’s bad HTML in there, it was something I used a looong time ago. And it doesn’t work with Netscape, unfortunately.
If you only knew how often I said that…
Anyways, thats obviously the major requirement I have, so it looks like your code won’t work.
While I’m pretty good at HTML, I’m just getting started learning Javascript so don’t take anything I say as definative. I’m assuming you c&ped your example from another one and included the “hovertext, defaulttext” stuff as extraneous fields to my problem.
Thanks for the help so far guys.
Why don’t you take the image and add a border to it. Then copy the image and make the border a different color. Then you could do a simple image swap and have the exact effect that you described. It’s a little work to do the image editing, but the code will be simple.
Lance, an image swap is my absolute last resort. I considered it first but doing so would kill me from a bandwidth standpoint. I don’t want to have to preload twice as many images as I am now or else the page will take too long. The bgcolor idea was a strategic stroke of brilliance that is just killing me to impliment.
You can use Javascript to do what you want. Put an onmouseover() and onmouseout() event in your table cell, then in those routines you have to manually change the background for the cell.
So your table would look something like this:
<table>
<tr>
<td onmouseover=“turnon()” onmouseout=“turnoff”></td>
</tr>
</table>
Then you will write javascript routines like this:
<script language=“javascript”>
turnon()
{
src.bgcolor=“red”;
}
turnoff()
{
src.bgcolor=“white”;
}
</script>
I may have forgotten some details in there - I haven’t done any Javascript for a couple of months.
Sam, Netscape doesn’t support the onMouseover attribute in the <td> tag…the root of my stresses.
Okay, so how about putting a mouseover event right in the body tag, then in your event handler walking through the document object model to see which object fired it? Can’t you get an ID that way?
Anyway, doesn’t Netscape Navigator 4.0 support full DHTML? If so, can’t you use the hover attribute?
Netscape 4.x unfortunately does not support javascript events triggered on td tags. I was working on a problem similar to this myself a while back.
The best approximation I could get was to create a small layer (or div) in the cell and put the image in that. Then the background color of the layer/div can be changed dynamically.
Try this:
http://www.projectseven.com/dreamweaver/colors/index.htm
Works in Netscape 6.
Best I can offer right now.
Good luck.
This is kind of lengthy (and messy), but the way I did it was to just put a layer around the <TD> tags…that only works in Netscape, yes, but you can then just put in what mattK suggested for the IE users:
<HTML>
<HEAD>
<!–first, check to see which browser the user is running–>
<SCRIPT LANGUAGE=javascript>
<!–
var isNav4, isIE4
if(parseInt(navigator.appVersion.charAt(0)) >= 4) {
var isNav4 = (navigator.appName == “Netscape”) ? true : false
var isIE4 = (navigator.appName.indexOf(“Microsoft” != -1)) ? true : false
}
//–>
</SCRIPT>
<!–from this point, if isNav4 = true, then you can send the following script to
the client (i guess you could put this whole thing into a variable, and then do
response.write(variable))…if isIE4 = true, then do a response.write, and write
the code that mattk posted previously
//–>
<!–you could modify these functions so that they take in the name of the
layer, and change that layer’s bgcolor, or you could write out a function
for each layer that you’re going to have in your table //–>
<SCRIPT LANGUAGE=javascript>
<!–
function bgswitch(){
document.Layer1.bgColor = “WHITE”
}
function bgswitchoff(){
document.Layer1.bgColor = “YELLOW”
}
//–>
</SCRIPT>
<TITLE></TITLE>
</HEAD>
<BODY>
<TABLE>
<TR>
<LAYER NAME=“Layer1” BGCOLOR=“Yellow” onMouseOver=“bgswitch()” onMouseOut=“bgswitchoff()” >
<TD>I will change color!</TD>
</LAYER>
</TR>
</TABLE>
</BODY>
</HTML>
<!–then, here, you would do an Else, and write out the Internet explorer compatible
script -->
You could make these changes to what I just posted, and it will make it more flexible:
for the scripts-
<SCRIPT LANGUAGE=javascript>
<!–
function bgswitch(layername){
//document.layername.bgColor = “WHITE”
layername.bgColor = “WHITE”
}
function bgswitchoff(layername){
layername.bgColor = “YELLOW”
}
//–>
</SCRIPT>
and then for the layer:
<LAYER NAME=“Layer1” BGCOLOR=“Yellow”
onMouseOver=“bgswitch(this)” onMouseOut=“bgswitchoff(this)” >
<tr>
<td width="100" height="25" align="center" valign="middle" style="width:100%; background-color:#023C64" onMouseover="this.style.backgroundColor='red';" onMouseout="this.style.backgroundColor='#023C64';">
<ILAYER>
<LAYER ID="la1" bgColor="#023C64" width="100%" onMouseover="this.bgColor='red';" onMouseout="this.bgColor='#023C64';"><a href="newblue-business.htm"><img src="images/tab.gif" width="100" height="25" hspace="0" vspace="0" border="0"></a>
</LAYER>
</ILAYER>
</td>
</tr>
Starbury, thats basically the same solution I came up with. It works nicely, sorta, because IE ignores <ilayers> and <layers> while NN ignores the onmouseover/out attribute in the <td>. Its kinda a backwards fix, but seems to solve the problem.
The main concern right now is that using <ilayers> and <layers> in nested tables (a necessity for me without a complete CSS rebuild for both browsers) is a bit buggy and it tends to display the <img> residually on page load in the upper left corner regardless of where its placed in the page otherwise. I’ve found online references to this bug and its as of yet unresolved by Netscape. Its only noticable for a fraction of a second on load, but the perfectionist in me wants to get rid of it. I’m thinking of maybe positioning the <layers> in the same spot as the location on the table as well as relying on the <ilayers> as a experiement but thats a pain in the ass.
Fuck, preview, preview, preview!!!
Yeah, I noticed that problem after I went back and tried putting more than one layer into a table. They all were positioned on top of each other. I guess, like you said, the only way around it is to set the height and width of the layers.