ロールオーバーで切り替えられるのは出来るの画像だけ？

質問

リモートロールオーバーで、サイトの更新情報を表示しようと思っています。

テーブルを組んで、サイトの各コンテンツの名前をオンマウスすると、横のセルに画像が表示されるようにしました。
更新情報だけは、画像が半分のサイズで、もう半分にテキスト（更新情報）を表示したいのです。

（以前はインラインフレームでこの方法を取っていたので、フレームを組んだページを表示させていたので問題なかったのですが、オンマウス表示にしたくて、悩んでいます）

ロールオーバーの機能では画像だけしか切り替えが出来ないのでしょうか？

また、テーブルの一つのセルの中に、画像とテキストの２種類をオンマウスで表示させる事は可能でしょうか？

御回答頂けると嬉しいです。

回答No.1

BLUEPIXY · ベストアンサー

表示、非表示は、画像でもテキストでも同じようにできると思います。

画像の場合は、srcを書き換えることで画像を変更できますが、
テキストの場合は、srcの様に手軽に変更ができません。
innerHTMLが使える場合には(IEやFireFox)
innerHTMLを使ってテキストの変更ができます。

画像とテキストを同時に表示・非表示にするには、
<div>などでくくって、divを表示・非表示するようにすれば良いと思います。

お礼

先日お礼を書き込んだつもりが、ちゃんと書き込めていなかったみたいです。
遅くなってしまい、すいません。

innerHTMLは初耳でした。勉強してみます。
それを乗り越えてから<div>を試してみます。
テキストは大変なんですね・・・
ありがとうございました！

回答No.2

koutarou504

動的処理は JavaScript で、表示非表示は CSS を用いては如何でしょうか。

切り替えも、内容を変えるのではなく
上書きというふうに発想の転換を・・・。
欠点は、CSS が無効の場合の配慮が必要な事。
ダミーのHTMLタグを２つ用意し、それぞれIDを振り片方をCSSで非表示とする。
JavaScript でその片方のIDのみを取得出来たら、CSSは有効と判断し・・・。
あとはオンマウス時に JavaScript にてHTMLを吐き出し
CSS の非表示，表示を更新し位置付けを更新する。
文字列の動的更新は大変でもCSSの更新は画像でのsrcと同様にstyle属性を更新するだけなので容易です。
あとはそれぞれをどの様に割り振るか次第かと・・・。

一応、右クリック時のオリジナルメニューを表示する処理としての実績はある考え方です。

お礼

なるほど、「発想の転換」ですね。

CSSにそういう機能をもったものがあるんですね、探してみます。
配慮の方は・・大変そうですね（＾＾；
頑張って試してみます。
遅くなりましたが、ありがとうございました！