# HTML & Javascript enigma

**URL:** https://boards.straightdope.com/t/html-javascript-enigma/33605
**Category:** Factual Questions
**Created:** [September 18, 2000, 3:27pm UTC](https://boards.straightdope.com/t/html-javascript-enigma/33605 "2000-09-18T15:27:57Z")
**Posts on this page:** 18
**Page:** 1

<div class="post-metadata">

### Author: ![Omniscient](https://sea3.discourse-cdn.com/straightdope/user_avatar/boards.straightdope.com/omniscient/32/3290_2.png) [@Omniscient](https://boards.straightdope.com/u/Omniscient)
#### Post date: [September 18, 2000, 3:27pm UTC](https://boards.straightdope.com/t/html-javascript-enigma/33605/1 "2000-09-18T15:27:57Z")

</div>

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?

---

<div class="post-metadata">

### Author: ![Andy](https://avatars.discourse-cdn.com/v4/letter/a/aeb1de/32.png) [@Andy](https://boards.straightdope.com/u/Andy)
#### Post date: [September 18, 2000, 3:32pm UTC](https://boards.straightdope.com/t/html-javascript-enigma/33605/2 "2000-09-18T15:32:37Z")

</div>

I’m not sure it’s such a hot idea really.  
But then what the hell do I know?

---

<div class="post-metadata">

### Author: ![Omniscient](https://sea3.discourse-cdn.com/straightdope/user_avatar/boards.straightdope.com/omniscient/32/3290_2.png) [@Omniscient](https://boards.straightdope.com/u/Omniscient)
#### Post date: [September 18, 2000, 3:39pm UTC](https://boards.straightdope.com/t/html-javascript-enigma/33605/3 "2000-09-18T15:39:04Z")

</div>

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.

---

<div class="post-metadata">

### Author: ![sailor](https://avatars.discourse-cdn.com/v4/letter/s/a587f6/32.png) [@sailor](https://boards.straightdope.com/u/sailor)
#### Post date: [September 18, 2000, 4:07pm UTC](https://boards.straightdope.com/t/html-javascript-enigma/33605/4 "2000-09-18T16:07:11Z")

</div>

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.

---

<div class="post-metadata">

### Author: ![Crusoe](https://avatars.discourse-cdn.com/v4/letter/c/49beb7/32.png) [@Crusoe](https://boards.straightdope.com/u/Crusoe)
#### Post date: [September 18, 2000, 4:10pm UTC](https://boards.straightdope.com/t/html-javascript-enigma/33605/5 "2000-09-18T16:10:09Z")

</div>

How about this:

(i) In **\<STYLE\>** tags in the head:

```auto

<!--
.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:

```auto

<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):

```auto

<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.

---

<div class="post-metadata">

### Author: ![Omniscient](https://sea3.discourse-cdn.com/straightdope/user_avatar/boards.straightdope.com/omniscient/32/3290_2.png) [@Omniscient](https://boards.straightdope.com/u/Omniscient)
#### Post date: [September 18, 2000, 4:25pm UTC](https://boards.straightdope.com/t/html-javascript-enigma/33605/6 "2000-09-18T16:25:10Z")

</div>

> [@](#):
>
> 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.

---

<div class="post-metadata">

### Author: ![Lance\_Turbo](https://sea3.discourse-cdn.com/straightdope/user_avatar/boards.straightdope.com/lance_turbo/32/6156_2.png) [@Lance\_Turbo](https://boards.straightdope.com/u/Lance_Turbo)
#### Post date: [September 18, 2000, 5:08pm UTC](https://boards.straightdope.com/t/html-javascript-enigma/33605/7 "2000-09-18T17:08:32Z")

</div>

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.

---

<div class="post-metadata">

### Author: ![Omniscient](https://sea3.discourse-cdn.com/straightdope/user_avatar/boards.straightdope.com/omniscient/32/3290_2.png) [@Omniscient](https://boards.straightdope.com/u/Omniscient)
#### Post date: [September 18, 2000, 5:42pm UTC](https://boards.straightdope.com/t/html-javascript-enigma/33605/8 "2000-09-18T17:42:48Z")

</div>

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.

---

<div class="post-metadata">

### Author: ![Sam\_Stone](https://avatars.discourse-cdn.com/v4/letter/s/ecccb3/32.png) [@Sam\_Stone](https://boards.straightdope.com/u/Sam_Stone)
#### Post date: [September 18, 2000, 6:36pm UTC](https://boards.straightdope.com/t/html-javascript-enigma/33605/9 "2000-09-18T18:36:15Z")

</div>

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.

---

<div class="post-metadata">

### Author: ![Omniscient](https://sea3.discourse-cdn.com/straightdope/user_avatar/boards.straightdope.com/omniscient/32/3290_2.png) [@Omniscient](https://boards.straightdope.com/u/Omniscient)
#### Post date: [September 18, 2000, 9:03pm UTC](https://boards.straightdope.com/t/html-javascript-enigma/33605/10 "2000-09-18T21:03:26Z")

</div>

Sam, Netscape doesn’t support the onMouseover attribute in the \<td\> tag…the root of my stresses.

---

<div class="post-metadata">

### Author: ![Sam\_Stone](https://avatars.discourse-cdn.com/v4/letter/s/ecccb3/32.png) [@Sam\_Stone](https://boards.straightdope.com/u/Sam_Stone)
#### Post date: [September 18, 2000, 11:34pm UTC](https://boards.straightdope.com/t/html-javascript-enigma/33605/11 "2000-09-18T23:34:25Z")

</div>

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?

---

<div class="post-metadata">

### Author: ![TheNerd](https://avatars.discourse-cdn.com/v4/letter/t/858c86/32.png) [@TheNerd](https://boards.straightdope.com/u/TheNerd)
#### Post date: [September 19, 2000, 2:15am UTC](https://boards.straightdope.com/t/html-javascript-enigma/33605/12 "2000-09-19T02:15:17Z")

</div>

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.

---

<div class="post-metadata">

### Author: ![Barney111](https://avatars.discourse-cdn.com/v4/letter/b/898d66/32.png) [@Barney111](https://boards.straightdope.com/u/Barney111)
#### Post date: [September 19, 2000, 3:59am UTC](https://boards.straightdope.com/t/html-javascript-enigma/33605/13 "2000-09-19T03:59:32Z")

</div>

Try this:  
[http://www.projectseven.com/dreamweaver/colors/index.htm](http://www.projectseven.com/dreamweaver/colors/index.htm)

Works in Netscape 6.

Best I can offer right now.

Good luck.

---

<div class="post-metadata">

### Author: ![Starbury](https://avatars.discourse-cdn.com/v4/letter/s/f04885/32.png) [@Starbury](https://boards.straightdope.com/u/Starbury)
#### Post date: [September 19, 2000, 3:14pm UTC](https://boards.straightdope.com/t/html-javascript-enigma/33605/14 "2000-09-19T15:14:29Z")

</div>

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 --\>

---

<div class="post-metadata">

### Author: ![Starbury](https://avatars.discourse-cdn.com/v4/letter/s/f04885/32.png) [@Starbury](https://boards.straightdope.com/u/Starbury)
#### Post date: [September 19, 2000, 3:38pm UTC](https://boards.straightdope.com/t/html-javascript-enigma/33605/15 "2000-09-19T15:38:50Z")

</div>

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](https://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)” \>

---

<div class="post-metadata">

### Author: ![Omniscient](https://sea3.discourse-cdn.com/straightdope/user_avatar/boards.straightdope.com/omniscient/32/3290_2.png) [@Omniscient](https://boards.straightdope.com/u/Omniscient)
#### Post date: [September 19, 2000, 3:54pm UTC](https://boards.straightdope.com/t/html-javascript-enigma/33605/16 "2000-09-19T15:54:48Z")

</div>

```auto

<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.

---

<div class="post-metadata">

### Author: ![Omniscient](https://sea3.discourse-cdn.com/straightdope/user_avatar/boards.straightdope.com/omniscient/32/3290_2.png) [@Omniscient](https://boards.straightdope.com/u/Omniscient)
#### Post date: [September 19, 2000, 3:56pm UTC](https://boards.straightdope.com/t/html-javascript-enigma/33605/17 "2000-09-19T15:56:24Z")

</div>

Fuck, preview, preview, preview!!!

---

<div class="post-metadata">

### Author: ![Starbury](https://avatars.discourse-cdn.com/v4/letter/s/f04885/32.png) [@Starbury](https://boards.straightdope.com/u/Starbury)
#### Post date: [September 19, 2000, 4:23pm UTC](https://boards.straightdope.com/t/html-javascript-enigma/33605/18 "2000-09-19T16:23:24Z")

</div>

> [@](#):
>
> \*Originally posted by Omniscient \*  
> \*\*  
> 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… I’m thinking of maybe positioning the \<layers\> in the same spot as the location on the table  
> \*\*

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.