Javascript doesn't function right

[Annuscha]

Hi,

I've been strugelling with this code for days now, I new at javascript and really need help. This code worked perfectly and then just stopped working.

I want the divs to change on a mouseover event, so basically when you hover over a td it goes to a other div.

Please can someone check my code and see what I am missing.

<script language="javascript">

function showDiv(elem)

{

        var arr = document.getElementsByTagName('div')

        for(var i=0; i<arr.length;i++)

        {

            if (arr[i].id != "navtxt" && arr[i].id.substr(0,5) != "style" && arr[i].id.substr(0,5) != "arrow" && arr[i].id != "" && arr[i].id != "mediaspace") {

                arr[i].style.display = 'none';

                var styler = document.getElementById("style1_"+arr[i].id);

                styler.className = "stylegray";

                var styler = document.getElementById("style2_"+arr[i].id);

                styler.className = "stylegray";

            }

        }



        var arr = document.getElementsByTagName('img')

        for(var i=0; i<arr.length;i++)

        {

            if (arr[i].id.substr(0,5) == "arrow") {

                arr[i].src = 'images/blank.jpg';

            }

        }



        var arr = document.getElementsByTagName('a')

        for(var i=0; i<arr.length;i++)

        {

            if (arr[i].id.substr(0,7) == "style3_") {

                var styler = document.getElementById(arr[i].id);

                styler.style.color = "#e3e3e3";

            }

        }

        e2 = document.getElementById(elem);

        e2.style.display = 'block';

        e3 = document.getElementById("style1_"+elem);

        e3.className = "stylered";

        e3 = document.getElementById("style2_"+elem);

        e3.className = "stylegray2";

        e3 = document.getElementById("style3_"+elem);

        e3.style.color = "darkred";

        e3 = document.getElementById("arrow_"+elem);

        e3.src = "images/arrow.png";

}

</script>

<img src="images/bar.jpg" />

<table width="100%" border="0" cellpadding="0" cellspacing="0" style="word-wrap: break-word; table-layout: fixed; height: 130px">

<tr>

<?
foreach ($niceArray AS $key => $value) {
$i++;
$bstyle = "border-right-width: 2px; border-right-style: solid; border-right-color: #e3e3e3;";

if ($i == $numrows) {

$bstyle = "";

                                        }

                                        $color1 = "stylegray";

                                        $color2 = "stylegray";

                                        $color3 = "#e3e3e3";

                                        $arrow = "images/blank.jpg";

                                        if ($first) {

                                            $first = false;

                                            $firstDiv = $value["showDiv"];

                                        }

                                        ?>

<td align="left" style="<?=$bstyle?> padding-left: 10px; padding-right: 10px;" width="<?=$sizer?>%"                onmouseover="javascript:showDiv('<?=$value["showDiv"]?>');"  valign="top">

<center><img id="<?=$value["id"]?>" width="12px" height="12px" src="<?=$arrow?>" /></center>
<br />

<b><div id='style1_<?=$value["showDiv"]?>' class="<?=$color1?>"><?=strtoupper($value["file_type"])?></div></b><br />

<?php if ($value['file_type'] != 'Video') {?> <a id='style3_<?=$value["showDiv"]?>' href="<?=$value['click']?>"    style="color<?=$color3?>; text-decoration: underline; font-size:11px;" target="_blank">Click here to view</a> <? } ?><br />

<br />

<a href="javascript:showDiv('<?=$value["showDiv"]?>');"><div id='style2_<? echo $value["showDiv"];?>'
class="<?=$color2?>"><?=$value["file_name"]?></div>
</a><br />

</td>

<?}?>



<script language="javascript">

showDiv('<? echo $firstDiv;?>');

</script>

</tr>
</table>

At the momment when I go over the td i takes away the div and shows nothing.
Please can someone help me?

Annuscha

[phfilly]

Hi the code is a bit difficult to read in this format bot non-the-less I'm going to try help you. You know that your javascript needs to be coded in your head tag?Or did you only just copy the relevant code? Cause most of the times the browser doesn't always read the script tags correctly if it's placed outside of that head tag. I've seen cases where it's also placed outside the body tag. Just something I learned from personal experience. And what do you mean by

so basically when you hover over a td it goes to a other div.