マウスを乗せると絵が変わるWebを作成するには？

[上に] [前に] [次に]
kyoko [E-Mail] 1999/08/23(月) 14:04:09
長くなってしまいました。申し訳ありません。
以下添付のhtmlですが、マウスを乗せた時の画像にborderが設定されてしまい、
切り替えの際、若干画像がずれてしまいます。
Ulink(n).gifのborderをゼロに設定するにはどうしたら良いのですか？


<html>

<head>
<meta http-equiv="Content-Type" content="text/html; charset=x-sjis">
<title>新しいページ 1</title>
<script LANGUAGE="JavaScript">
ULink = new Array();
for (i = 0; i <= 4; i++) {
ULink[i] = new Image();
ULink[i].src = 'ULink' + i + '.gif';
}

function LinkI (n,pos) {
document.images[pos].src = ULink[n].src;
}
function LinkO(n,pos) {
document.images[pos].src = 'Link' + n + '.gif';
}
</script>
</head>

<body>

<table border="0" width="640" cellspacing="0" cellpadding="0">
  <tr>
    <td colspan="2"><img src="images2/head.gif" alt="head.gif (13484 バイト)" WIDTH="640"
    HEIGHT="58"></td>
  </tr>
  <tr>
    <td><a HREF="http://www.impress.co.jp/" onMouseOver="LinkI(0,1);" onMouseOut="LinkO(0,1);"><img
    src="Link0.gif" alt="Link0.gif (8799 バイト)" border="0" WIDTH="437" HEIGHT="39"></a></td>
    <td><img src="images2/sitecon.gif" alt="sitecon.gif (1238 バイト)" WIDTH="204"
    HEIGHT="39"></td>
  </tr>
  <tr>
    <td><a HREF="http://www.impress.co.jp/" onMouseOver="LinkI(1,3);" onMouseOut="LinkO(1,3);"><img
    src="Link1.gif" alt="Link1.gif (7883 バイト)" border="0" WIDTH="437" HEIGHT="39"></a></td>
    <td><img src="images2/kmsystem.gif" alt="kmsystem.gif (1661 バイト)" WIDTH="203"
    HEIGHT="39"></td>
  </tr>
  <tr>
    <td><a HREF="http://www.impress.co.jp/" onMouseOver="LinkI(2,5);" onMouseOut="LinkO(2,5);"><img
    src="Link2.gif" alt="Link2.gif (9631 バイト)" border="0" WIDTH="437" HEIGHT="39"></a></td>
    <td><img src="images2/search.gif" alt="search.gif (1393 バイト)" WIDTH="204"
    HEIGHT="39"></td>
  </tr>
  <tr>
    <td><a HREF="http://www.impress.co.jp/" onMouseOver="LinkI(3,7);" onMouseOut="LinkO(3,7);"><img
    src="Link3.gif" alt="Link3.gif (9031 バイト)" border="0" WIDTH="437" HEIGHT="39"></a></td>
    <td><img src="images2/suggest.gif" alt="suggest.gif (1674 バイト)" WIDTH="203"
    HEIGHT="39"></td>
  </tr>
  <tr>
    <td><a HREF="http://www.impress.co.jp/" onMouseOver="LinkI(4,9);" onMouseOut="LinkO(4,9);"><img
    src="Link4.gif" alt="Link4.gif (9338 バイト)" border="0" WIDTH="437" HEIGHT="43"></a></td>
    <td><img src="images2/blank.gif" alt="blank.gif (139 バイト)" WIDTH="204" HEIGHT="43"></td>
  </tr>
  <tr>
    <td><img src="images2/new.gif" alt="new.gif (2482 バイト)" WIDTH="437" HEIGHT="25"></td>
    <td><img src="images2/activity.gif" alt="activity.gif (1033 バイト)" WIDTH="203"
    HEIGHT="25"></td>
  </tr>
  <tr>
    <td></td>
    <td></td>
  </tr>
  <tr>
    <td></td>
    <td></td>
  </tr>
</table>
</body>
</html>
Tmb 1999/08/23(月) 14:20:22
＞マウスを乗せた時の画像にborderが設定されてしまい、
＞切り替えの際、若干画像がずれてしまいます。

そんな挙動は初耳ですが，理屈から考えて
>for (i = 0; i <= 4; i++) {
>ULink[i] = new Image();
>ULink[i].src = 'ULink' + i + '.gif';
の次にULink[i].border=0;を指定してみるか，
２箇所ある
>document.images[pos].src =　ほにゃらら
の次にdocument.images[pos].border=0;を指定してみてはどうでしょう。
toshi [E-Mail] [HomePage] 1999/08/23(月) 14:25:08
自分の環境では確認できませんでした。(IE5,WIN98)

というか質問するときは使用しているブラウザ、OSなどの情報だけでも書きましょう。
ページをアップしてアドレスを書いてくれればもっと良いのですが。
kyoko 1999/08/23(月) 17:55:47
[[解決]]
画像自体に問題があったことが分かりました。
（画像と画像がぴったり重なっていなかったため隙間がborderの様に見えた）
大変ご迷惑をおかけしました。
ありがとうございます。
[上に] [前に] [次に]