マウスオン画像切換を試してみる

あれとかこれとかの人が面白そうなことをしているので、早速真似してみました（わは）。

以下は、マウスオン（や選択）で画像が切換るようにするテスト。

Aタグにclass="onMouse"なし

<a href="リンク先"><img class="onMouseOverVis" src="マウスオン画像"><img class="onMouseOutVis" style="margin-left: -マウスオン画像の幅" src="マウスオフ画像"></a>
FirefoxではA:hoverにサイズ指定なんかしなくても、問題なく画像が切り替わるが…。

Aタグにclass="onMouse"あり

<a class="onMouse" href="リンク先"><img class="onMouseOverVis" src="マウスオン画像"><img class="onMouseOutVis" style="margin-left: -マウスオン画像の幅" src="マウスオフ画像"></a>
でもIEではA:hoverにサイズ指定（例えば_width:auto;）をしないと、画像が切り替わらない。

どちらにしても、マウスオフ画像のimgタグにstyle="margin-left: -マウスオン画像の幅"の属性（例えばstyle="margin-left: -120px"）を付加して、マウスオン画像の上にマウスオフ画像がくるように「ずらす」必要がある。
＃ 結構面倒ジャン

z-index, visibility→display

<a class="onMouse" href="リンク先"><img class="onMouseOver" src="マウスオン画像"><img class="onMouseOut" src="マウスオフ画像"></a>
z-indexとvisibility:{visible|hidden}のプロパティを使ったclass="onMouseOverVis"とclass="onMouseOutVis"の代わりに、display:{inline|none}のプロパティを使ったclass="onMouseOver"とclass="onMouseOut"を使用してみる。

これなら、マウスオン画像の上にマウスオフ画像がくるように「ずらす」必要はない。

CSSの追記内容

/* マウスオン画像切換 */
A:hover.onMouse,
A:active.onMouse {
	_width: auto;	/* IEのバグ対策 */
	/* IEはA:hoverやA:activeにサイズ指定しないと画像が切換らない */
}

IMG.onMouseOver,
IMG.onMouseOut {
	/* 画像の枠線なし */
	border: 0;
}
A:link    IMG.onMouseOver,
A:visited IMG.onMouseOver {
	display: none;
}
A:hover   IMG.onMouseOver,
A:active  IMG.onMouseOver {
	display: inline;
}
A:link    IMG.onMouseOut,
A:visited IMG.onMouseOut {
	display: inline;
}
A:hover   IMG.onMouseOut,
A:active  IMG.onMouseOut {
	display: none;
}


/* 以下は廃案？ */
IMG.onMouseOverVis,
IMG.onMouseOutVis {
	border: 0;
}
A:link    IMG.onMouseOverVis,
A:visited IMG.onMouseOverVis {
	z-index: 2;
	visibility: hidden;
}
A:hover   IMG.onMouseOverVis,
A:active  IMG.onMouseOverVis {
	z-index: 4;
	visibility: visible;
}
A:link    IMG.onMouseOutVis,
A:visited IMG.onMouseOutVis {
	z-index: 3;
	visibility: visible;
}
A:hover   IMG.onMouseOutVis,
A:active  IMG.onMouseOutVis {
	z-index: 1;
	visibility: hidden;
}

ということで、これが精一杯かなぁ。後で、CSSの編集内容と記事の書き方をきちんとした記事にしないと（わは）。

---

まうすおんてすと(追記あり） - あれとかこれとか　（Lefty） 2006年09月19日06:55
[351] 「マウスオン」が作成が昨日よりできません。 - goo ブログサークル 2006年09月15日17:20