まず、style=...に最初に表示する画像のＵＲＬを指定します。
onMouseOverで、カーソルが乗った時の画像のＵＲＬを指定します。
色の時は、this.style.backgroundだったものが、
this.style.backgroundImageに変わっているので注意してください。
結構忘れがちなんですが、「url」をちゃんと書いてくださいね。
そして、onMouseOutでカーソルが離れた時の画像のＵＲＬを指定します。
通常は、最初に表示する画像と同じになると思いますが・・・
例を見てみましょう。
||<#ffffff' style=background-image:url(最初に表示する画像のＵＲＬ); onMouseOver=this.style.backgroundImage='url(カーソルが乗った時の画像のＵＲＬ)' onMouseOut=this.style.backgroundImage='url(カーソルが離れた時の画像のＵＲＬ)' ``背景画像変化||
これは、あくまでもセルの背景なので、当然セル内のテキストに合った大きさになります。
しかし、背景画像の大きさを指定したい場合もあると思います。
そういう時は、width（横幅）とheight（高さ）の指定をしてください。
そうすると、
||<#ffffff' style=background-image:url(最初に表示する画像のＵＲＬ); onMouseOver=this.style.backgroundImage='url(カーソルが乗った時の画像のＵＲＬ)' onMouseOut=this.style.backgroundImage='url(カーソルが離れた時の画像のＵＲＬ)' width=100px height=100px ``背景画像変化||
となり、画像全体が表示されます。
ここで、テキストを何も書かなければ「画像の変化」として応用できます。
ここから先は、ちょっとややこしい話を。
実は、ＤＨＴＭＬでは「背景の入れ替え」ではなく「画像の入れ替え」というものできます。
何が違うのかというと、「画像」の場合はその画像に合ったサイズのセルに勝手になり、
「背景」の場合はテキストのサイズに合ったセルにるというところです。
画像を入れ替えるためには、 onMouseOver=this.src='....'というような記述をします。。
しかし、Wikiで出来るのは、<TD>タグで出来るものだけなんです。
ＨＴＭＬをかじってる方はわかると思いますが、<TD>タグに srcは使えませんよね？
srcは<IMG>タグで使うものなので、結局使えないということになります。
 転載元: Ks BLOG
|
でチェック♬
コメント（0）
