ちなみに、javascriptではなく、CSSを使っているので、
ページを開くときに全ての画像を読み込みます。
* 画像表示部分の記述
(実際は全角「<」「>」を半角に変換、改行、空白を除去してます。)
<!--↓拡大時のサイズの基準。table/tr/td でもOK-->
<div style="width:300px;height:400px;border-style:solid; ">
<!--↓拡大時の位置の基準。これはこのまま記述-->
<div style="position:relative;vertical-align:top;">
<a class="thumnailparent" href="(画像URL1)">
<img class="onMousethum" src="(画像URL1)">
</a>
<a class="thumnailparent" href="(画像URL2)">
<img class="onMousethum" src="(画像URL2)">
</a>
</div>
</div>
* CSSに追加した属性。
A:hover.thumnailparent,
A:active.thumnailparent {
_width: 100%; /* IEのバグ対策 */
}
.thumnailparent {
_width: auto; /* IEのバグ対策 */
/* IEはA:hoverやA:activeにサイズ指定しないと画像が切換らない */
}
.onMousethum{
border:0;
vertical-align:top;
width: 20%;
}
A:hover IMG.onMousethum,
A:active IMG.onMousethum{
z-index: 10;
width: 100%;
left: 0px;
position:absolute;
}
参考:
あれとかこれとか (Lefty):まうすおんてすと(追記あり)
子供、いらない:マウスオン画像切換を試してみる
(追記)
TB送るの忘れてた…いまさらですが、子供、いらない:マウスオン画像切換を試してみるにトラックバックします。