オンマウスでコメント表示
-
0 名前： nap ： 2005/07/23 08:42 ［URL］
- 過去ログにあるかもしれませんが、
検索しても上手くヒットしなかったので、教えてください。
自分で撮った写真を掲載しているのですが、
何もしない状態ではテキストを非表示にして
マウスポインタを画像の上にもって来た時だけに
画像の下にテキストを表示させる方法を教えてください。
よろしくおねがいします。
-
1 名前： みちお ： 2005/07/23 08:42
- 代替テキストではだめですか？
<IMG src="001.jpg" border="0" width="301" height="450">にalt="〜"を加える。
-
2 名前： RippleGreen ： 2005/07/23 08:42
- このような方法は如何でしょうか。
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html lang="ja">
<head>
<meta http-equiv="content-script-type" content="text/javascript">
<title>sample</title>
<script type="text/javascript"><!--
function change_view(id){
if (document.all) obj = document.all(id).style; else;
if (document.getElementById) obj = document.getElementById(id).style;
if (obj) obj.display == 'none'?obj.display='':obj.display='none';
}
//--></script>
</head>
<body onLoad="change_view('comment1')">
<img src="photo1.jpg" width="300" height="250" alt="○○の写真です" onmouseover="change_view('comment1')" onmouseout="change_view('comment1')">
<div id="comment1">
ここにコメントを記述します。
</div>
</body>
</html>
------------------------------------------------------------
※上記JavaScriptに対応していないブラウザ、JavaScriptをOFFに
している環境では、コメントは表示されたままになります。
------------------------------------------------------------
動作確認
OS：WindowsXP professional sp2
Browser：IE 6.0 SP2、Netscape7.2、Firefox 1.0.4
-
3 名前： Pid ： 2005/07/23 08:42
- >>1
デフォルトで alt 属性をツールチップ表示するのは IE くらいなので，title 属性の方が良いかもしれませんね（これとて，どう表現されるかはブラウザ依存ですが）。
※なお，alt 属性は「加える」ものではなく，img 要素を使う場合は（src 属性と同じく）「必ず」書かねばならないものです。
>>2
面白いですね。とっても細かい事で恐縮ですが，
> obj.display=''
の部分は空ではなく，何らかの値（この場合は 'block'）を与えた方が確実だと思います。
※ DOM2-CSS では，style.display など CSS2Properties に「不正な値」を与えたときに例外を発生させるっぽいですが，これをどう処理するかはブラウザ依存だと思います。確かに，多くのブラウザでは初期値（かどうかは微妙ですが）に戻すようですが，「エラー行を無視して直前の値のままにする」というブラウザがあってもおかしくありません。
-
4 名前： nap ： 2005/07/23 08:42 ［URL］
- ありがとうございました。
-
5 名前： みちお ： 2005/07/23 08:42 ［URL］
- Pid様ありがとうございます。勉強になりました。
少しずつ改善していきます。
