CSSだけでインタラクティブな画像を作る
onmouseover も onmouseout も Aタグ も Layerタグ も FLASH もいらない。
CSS2 ( NN6やMozillaに実装 ) ならこんなに手軽にインタラクティブ。
( 現時点で実際に使う時のために同じ動作をIEでも実現する NN6,Mozilla/IE5 共用版 スクリプトも添えておきます )
  触ると画像の下の背景色が変わる



●CSS2 ( NN6,Mozilla ) 版

<style>
img#img1:hover  { background-color:#000000 }
</style>


<img id="img1" src="tips.gif">



●NN6,Mozilla/IE5 共用版

<script>
function hoveron11(oj) {
	oj.style.backgroundColor='#000000';
}
function hoveroff11(oj) {
	oj.style.backgroundColor='#ffffff';
}
</script>

<img id="img11" src="tips.gif" 
     onmouseover="hoveron(this)" onmouseout="hoveroff(this)">

  触ると画像に点線囲みが付く



●CSS2 ( NN6,Mozilla ) 版

<style>
img#img2:hover  { border:dotted;background-color:#dddddd }
</style>


<img id="img2" src="tips.gif">



●NN6,Mozilla/IE5 共用版

<script>
function hoveron12(oj) {
	oj.style.backgroundColor='#dddddd';
	oj.style.border = 'dotted';
}
function hoveroff12(oj) {
	oj.style.backgroundColor='#ffffff';
	oj.style.border = 'none';
}
</script>

<img id="img12" src="tips.gif" 
     onmouseover="hoveron(this)" onmouseout="hoveroff(this)">

  触ると画像の下の背景画像が変わる



●CSS2 ( NN6,Mozilla ) 版

<style>
img#img3:hover  { background-image:url(bg.gif) }
</style>


<img id="img3" src="tips.gif">



●NN6,Mozilla/IE5 共用版

<script>
function hoveron13(oj) {
	oj.style.backgroundImage="url('bg.gif')";
}
function hoveroff13(oj) {
	oj.style.backgroundImage="";
}
</script>

<img id="img13" src="tips.gif" 
     onmouseover="hoveron(this)" onmouseout="hoveroff(this)">



Toshirou Takahashi tato@fureai.or.jp