複数画像のロールオーバー

質問

ただいまホームページ作成中で、JavaScriptで画像のロールオーバー効果をしようと思っています。
ところが、複数の画像を並べて効果を設定しようとしたところ、画像と画像の間に隙間があいてしまいます。
対処法がありましたら、ぜひ教えてください！！

回答No.2

nyanko_2003 · ベストアンサー

こんにちは。

#1です。ソース拝見しました。
一つ質問ですが、この画像はテーブルで組まずに、ページにダイレクトに置いていますか？（テーブルのソースが無かったもので）

テーブルを組んでいないのでしたら、テーブルに組み込んでください。
↓こんな感じです。

<table border="0" cellpadding="0" cellspacing="0" width="700">
<tr>
<td>
<a href="Tips01.htm" onmouseout="ImgChenge('Sample1',0)" onmouseover="ImgChenge('Sample1',1)"><img src="imgs/kkp/k1.gif" width="100" height="150" border="0" name="Sample1" id="Sample1"></a>
</td>
<td>
<a href="Tips01.htm" onmouseout="ImgChenge('Sample2',0)" onmouseover="ImgChenge('Sample2',1)"><img src="imgs/kkp/k2.gif" width="100" height="150" border="0" name="Sample2" id="Sample2"></a>
</td>
<td>
<a href="Tips01.htm" onmouseout="ImgChenge('Sample3',0)" onmouseover="ImgChenge('Sample3',1)"><img src="imgs/kkp/k3.gif" width="100" height="150" border="0" name="Sample3" id="Sample3"></a>
</td>
<td>
<a href="Tips01.htm" onmouseout="ImgChenge('Sample4',0)" onmouseover="ImgChenge('Sample4',1)"><img src="imgs/kkp/k4.gif" width="100" height="150" border="0" name="Sample4" id="Sample4"></a>
</td>
<td>
<a href="Tips01.htm" onmouseout="ImgChenge('Sample5',0)" onmouseover="ImgChenge('Sample5',1)"><img src="imgs/kkp/k5.gif" width=" 90" height="150" border="0" name="Sample5" id="Sample5"></a>
</td>
<td>
<a href="Tips01.htm" onmouseout="ImgChenge('Sample6',0)" onmouseover="ImgChenge('Sample6',1)"><img src="imgs/kkp/k6.gif" width="110" height="150" border="0" name="Sample6" id="Sample6"></a>
</td>
<td>
<a href="Tips01.htm" onmouseout="ImgChenge('Sample7',0)" onmouseover="ImgChenge('Sample7',1)"><img src="imgs/kkp/k7.gif" width="100" height="150" border="0" name="Sample7" id="Sample7"></td>
</tr>
</table>

これだけで、隙間はなくなります。
もしどうしてもテーブルを組まずに隙間を無くしたいのならば、改行を消してください。

<BR><BR>
<a href="Tips01.htm"～から～name="Sample7" id="Sample7"/></a>までをすべて「1列で」書きます。
すると、ソースは恐ろしいほど横長になりますが、隙間は消えます。
テーブルを組まずに（TDで区切らず）命令を入れて、改行すると「空白」と認識してしまうのです。
それを無くせば「空白なし」と認識してくれます。

どちらかお試しください。
それでもまだ直らなければ、補足ください。

補足

ありがとうございます！！
ものの見事に隙間がなくなりました！

それで、もう２個ほど質問してもいいでしょうか？（＾＾；）
☆なぜか、最後の画像だけ、ちょっと高さがながくなってしまいます・・・。

☆ページを表示すると、スクリプトエラーが出て、コンテンツがブロックされるとかなんとか・・・。

スクリプトエラーの内容です。

「このページのスクリプトでエラーが発生しました。

ライン：2
文字：　1
エラー：文字が正しくありません。
コード：0
URL：　mk:@MSITStore:C:\WINDOWS\Help\iexplore.chm::/GB_URLaction_block.htm　　　」

というものでした。お手数ですが、よろしくお願い致しますｍ（_ _）ｍ

回答No.3

nyanko_2003

こんにちは。

大変失礼致しました。
一番最後の画像が高さがおかしいのは、</a>で閉じていなかったからです…。
うっかりしてました。

ですので、一番最後のTDは
<td>
<a href="Tips01.htm" onmouseout="ImgChenge('Sample7',0)" onmouseover="ImgChenge('Sample7',1)"><img src="imgs/kkp/k7.gif" width="100" height="150" border="0" name="Sample7" id="Sample7"></a></td>
になります。

スクリプトエラーは私の方では確認できませんでした。
取り敢えず、</a>を入れて、再度エラーが出るか確認をお願い致します。

お礼

お疲れ様でございます。
最後の画像が大きく表示されるということでしたが、
＜ｔｄ＞を改行したところ、他の画像とのサイズが揃いました！　お騒がせ致しました（＾＾；）ありがとうございます。

残るはエラーのみとなりました。

もし何かおかしなところがありましたら、ご指導願いますｍ（_　_）ｍ

補足

何度もありがとうございます（＾＾；）
私もソースを見て＜／ａ＞がないことに気づき、足して更新表示してみたのですが、やはり大きく表示されてしまいます（；_；）画像の高さを146pxにするとちょうどいいのですが、となりの画像との模様のずれが生じてしまいます・・・。

エラーはやはり出ます(;　；）
「セキュリティー保護のため、コンピュータにアクセスできるアクティブコンテンツは表示されないよう、
InternetExplorerで制限されています。」
というのが出てます。
ステータスバーに「ページが表示されました」と出るんですが、黄色で囲まれた＜！＞が文字の先頭についています。

本当に何度もすいませんｍ（_　_；）ｍ

回答No.1

nyanko_2003

こんにちは。

ごめんなさい、やりたい事がそのご質問からは読めませんでした。
複数の画像を並べてそれぞれロールオーバーをしたいのですか？
で、その画像たちの間が空白があるのですか？

ソースに空白は入っていませんか？
できればソースを書いていただけると、更にアドバイスできるかと思います。

補足

ソースは以下の通りです。
よろしくお願いします！（＾＾；）

<script language="JavaScript" type="text/javascript">

<!--
// イメージ用配列
var SwImg; SwImg = new Array;

// 画像の先読み ImgPreload('imgタグのid', '通常の画像のパス', 'マウスオーバー時の画像のパス')
ImgPreload('Sample1', 'imgs/kkp/k1.gif', 'imgs/kkp/k11.gif')
ImgPreload('Sample2', 'imgs/kkp/k2.gif', 'imgs/kkp/k12.gif')
ImgPreload('Sample3', 'imgs/kkp/k3.gif', 'imgs/kkp/k13.gif')
ImgPreload('Sample4', 'imgs/kkp/k4.gif', 'imgs/kkp/k14.gif')
ImgPreload('Sample5', 'imgs/kkp/k5.gif', 'imgs/kkp/k15.gif')
ImgPreload('Sample6', 'imgs/kkp/k6.gif', 'imgs/kkp/k16.gif')
ImgPreload('Sample7', 'imgs/kkp/k7.gif', 'imgs/kkp/k17.gif')

/* 画像プリロード */
function ImgPreload() {
var N = ImgPreload.arguments[0];
SwImg[N] = new Image();
SwImg[N][0] = new Image();
SwImg[N][0].src = ImgPreload.arguments[1];
SwImg[N][1] = new Image();
SwImg[N][1].src = ImgPreload.arguments[2];
}

/* ロールオーバー */
function ImgChenge() {
var ID = ImgChenge.arguments[0];
var N = ImgChenge.arguments[1];
document.images[ID].src = SwImg[ID][N].src;
}

//-->
</script>
</HEAD>

<BR><BR>
<a href="Tips01.htm" onmouseout="ImgChenge('Sample1', 0)" onmouseover="ImgChenge('Sample1', 1)">
<img src="imgs/kkp/k1.gif" width="100" height="150" border="0" name="Sample1" id="Sample1"/></a><a href="Tips01.htm" onmouseout="ImgChenge('Sample2', 0)" onmouseover="ImgChenge('Sample2', 1)">
<img src="imgs/kkp/k2.gif" width="100" height="150" border="0" name="Sample2" id="Sample2"/></a><a href="Tips01.htm" onmouseout="ImgChenge('Sample3', 0)" onmouseover="ImgChenge('Sample3', 1)">
<img src="imgs/kkp/k3.gif" width="100" height="150" border="0" name="Sample3" id="Sample3"/></a><a href="Tips01.htm" onmouseout="ImgChenge('Sample4', 0)" onmouseover="ImgChenge('Sample4', 1)">
<img src="imgs/kkp/k4.gif" width="100" height="150" border="0" name="Sample4" id="Sample4"/></a><a href="Tips01.htm" onmouseout="ImgChenge('Sample5', 0)" onmouseover="ImgChenge('Sample5', 1)">
<img src="imgs/kkp/k5.gif" width=" 90" height="150" border="0" name="Sample5" id="Sample5"/></a><a href="Tips01.htm" onmouseout="ImgChenge('Sample6', 0)" onmouseover="ImgChenge('Sample6', 1)">
<img src="imgs/kkp/k6.gif" width="110" height="150" border="0" name="Sample6" id="Sample6"/></a><a href="Tips01.htm" onmouseout="ImgChenge('Sample7', 0)" onmouseover="ImgChenge('Sample7', 1)">
<img src="imgs/kkp/k7.gif" width="100" height="150" border="0" name="Sample7" id="Sample7"/></a>