Get .aspx control ID in .js file

Get .aspx control ID in .js file

Hello everyone,
(HEAD PART)
<script type="text/javascript">
function ChangeColor1(elementid)
{
document.getElementById(elementid).style.backgroundImage =
"url('images/1.jpg')";
document.getElementById("<%= img2.ClientID%>").style.backgroundImage =
"url('images/2.jpg')";
document.getElementById("<%= img3.ClientID%>").style.backgroundImage =
"url'images/2.jpg')";
document.getElementById("<%= img4.ClientID%>").style.backgroundImage =
"url('images/2.jpg')";
document.getElementById("<%= imgchange.ClientID%>").style.backgroundImage
= "url('images/img1.JPG')";
}
function ChangeColor2(elementid)
{
document.getElementById(elementid).style.backgroundImage =
"url('images/1.jpg')";
document.getElementById("<%= img1.ClientID%>").style.backgroundImage =
"url('images/2.jpg')";
document.getElementById("<%= img3.ClientID%>").style.backgroundImage =
"url('images/2.jpg')";
document.getElementById("<%= img4.ClientID%>").style.backgroundImage =
"url('images/2.jpg')";
document.getElementById("<%= imgchange.ClientID%>").style.backgroundImage
= "url('images/img2.JPG')";
}
function ChangeColor3(elementid)
{
document.getElementById(elementid).style.backgroundImage =
"url('images/1.jpg')";
document.getElementById("<%= img1.ClientID%>").style.backgroundImage =
"url('images/2.jpg')";
document.getElementById("<%= img2.ClientID%>").style.backgroundImage =
"url('images/2.jpg')";
document.getElementById("<%= img4.ClientID%>").style.backgroundImage =
"url('images/2.jpg')";
document.getElementById("<%= imgchange.ClientID%>").style.backgroundImage
= "url('images/img3.JPG')";
}
function ChangeColor4(elementid)
{
document.getElementById(elementid).style.backgroundImage =
"url('images/1.jpg')";
document.getElementById("<%= img2.ClientID%>").style.backgroundImage =
"url('images/2.jpg')";
document.getElementById("<%= img3.ClientID%>").style.backgroundImage =
"url('images/2.jpg')";
document.getElementById("<%= img1.ClientID%>").style.backgroundImage =
"url('images/2.jpg')";
document.getElementById("<%= imgchange.ClientID%>").style.backgroundImage
= "url('images/img4.JPG')";
}
</script>
(BODY PART)
<table>
<tr>
<td id="img1" runat="server" onmouseover="ChangeColor1(this.id)"
style="background-image: url('images/2.jpg')">
</td>
</tr>
<tr>
<td id="img2" runat="server" onmouseover="ChangeColor2(this.id)"
style="background image: url('images/2.jpg')">
</td>
</tr>
<tr>
<td id="img3" runat="server" onmouseover="ChangeColor3(this.id)"
style="background-image: url('images/2.jpg')">
</td>
</tr>
<tr>
<td id="img4" runat="server" onmouseover="ChangeColor4(this.id)"
style="background-image: url('images/2.jpg')">
</td>
</tr>
</table>



This code is working fine in .ASPX page.
But when I put this script code in .js file and call it in head part of
.ASPX page, this .js file is not working well.
ID=img2, ID=img3, ID=img4 of td is not passing in .js file.
How can I pass this all ID in .js file???