頭部
<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("<%= 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("<%= imgchange.ClientID%>").style.backgroundImage = "url('images/img2.JPG')";
}
</script>
体の部分
<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="imgchange" runat="server">
</td>
</tr>
</table>
ここではすべて正常に動作していますが、上記のスクリプトを.js ファイルに配置すると動作しません。
img1 で onmouseover を実行していた場合、その ID は渡されますが、id="img2" および id="imgchange" は .js ファイルに渡されません。
したがって、この問題が発生します。onmouseover を id="img1" に実行するときに、コントロール id="img2" と id="imgchange" を渡す方法