onMouseOverについて質問。
-
0 名前： 本当の初心者 ： 2006/05/26（金） 23:17
- onMouseOverについて質問。
次のプログラムを作りました。
if (document.images) {
// 通常の画像
var はじめ = new Image();はじめ.src = "はじめ.bmp";
// ポイント時の画像
var img1 = new Image(); img1.src = "Ａ.jpg";
var img2 = new Image(); img2.src = "Ｂ.jpg";
・
・
・
// 設定終了
}
// ポイント時の処理
function On(name) {
if (document.images) {
document.images['start'].src = eval(name + '.src');
}
}
// 放した時の処理
function Off() {
if (document.images) {
document.images['start'].src = はじめ.src;
}
}
</head>
<body>
<div style="top:180px;left:520px;position:absolute">
<IMG SRC="はじめ.bmp" ALT="START" WIDTH="150" HEIGHT="100" NAME="start" border="2">
</div>
①１は<A href="手順1.htm" onMouseOver="On('img1')" onMouseOut="Off()">ＡＡＡ</a>です。
・
・
・
上記のように「onMouseOver」のプログラムを作りました。「はじめに」の画像が正常に変化しました。
そこで、マウスポインターが指す場所により、別の画像が変わるようにしたいので、
var おわり = new Image();おわり.SRC="おわり.bmp";
と
<div style="top:950px;left:520px;position:absolute">
<IMG SRC="おわり.bmp" ALT="finish" WIDTH="150" HEIGHT="100" NAME="finish" border="2">
</div>
を追加し
ポイント時の処理と放した時の処理
// ポイント時の処理
function On-finish(name) {
if (document.images) {
document.images['finish'].src = eval(name + '.src');
}
}
// 放した時の処理
function Off-finish() {
if (document.images) {
document.images['finish'].src = おわり.src;
}
}
を追加しましたところ、画像の表示がされなくなりました。
何処が悪かったのでしょうが？
「onMouseOver="On-finish('img1')"」等の表記が許されないのでしょうか？
-
1 名前： いるらん ： 2006/05/26（金） 23:17
- とりあえず、On-finishというのは初めて見ました。
-
2 名前： Pid ◆byEkK9OALr ： 2006/05/26（金） 23:17
- ・関数名・変数名にハイフンは使用できません（日本語文字は可）。
・img 要素には id 属性を付けて下さい。name 属性は（NN4 対応が必要でなければ）もう要りません。
・document.images の有無の判定は，最初に一回行えば十分です（関数を呼び出すたびに判定しても意味がありません）。
・src 属性の中の日本語文字は（本当に使うなら）パーセント符号化して下さい。
-
3 名前： 本当の初心者 ： 2006/05/26（金） 23:17
- 「いるらん」さん、「Ｐｉｄ」さんコメントありがとうございました。
おかげさまで、正常に動作しました。
原因はご指摘の「-」ハイフンでした。
このホームページの
「http://www.tagindex.com/javascript/link/change3.html」を
参考に作ったのですが!!!!!
・document.images の有無の判定は，最初に一回行えば十分です（関数を呼び出すたびに判定しても意味がありません）。
了解しました。何故 ifがあったのか私には判りません。
・img 要素には id 属性を付けて下さい。name 属性はもう要りません。
サンプル通りに作ったので、良く解からないのですが、
IE5.5を使用しているのですが、「nameはもう要らない」とはどういう意味でしょうか
また、nameの代わりにIDを使いなさいとのことでしょうか。IDの方が便利なのでしょうか？
・src 属性の中の日本語文字は（本当に使うなら）パーセント符号化して下さい。
これも、意味が良く解からないのですが、
正常に動いているようなのですが、
「パーセント符号化」しなければならないのでしょうか？どのようにするのでしょうか？
（パーセント符号化を内部検索しても４件しか現れず、パーセント符号化の方法が不明）
-
4 名前： Pid ◆byEkK9OALr ： 2006/05/26（金） 23:17
- > 何故 ifがあったのか私には判りません。
document.images オブジェクトがサポートされているかどうかの判定です。しかし，このオブジェクトは JavaScript 1.1 から存在しますので，個人レベルではもう判定の必要はないと思います……が，
> nameの代わりにIDを使いなさいとのことでしょうか。IDの方が便利なのでしょうか？
これから覚えるならば，まず document.getElementsByTagName や getElementById をしっかり覚えて下さい。document.images は「昔はそんなのもあったんだ」程度で十分です。
http://www2u.biglobe.ne.jp/%7Eoz-07ams/prog/dom-ref/HTML/HTMLDocument.html#HTMLDocument-images
> 「パーセント符号化」しなければならないのでしょうか？
その前に，これは Web 上で使うおつもりですか？それとも個人的な使用だけですか？
もし Web 上で使うのであれば，そもそも日本語文字の使用は避けるのが賢明ですし，BMP 画像形式も止めた方が良いのですが。
-
5 名前： 本当の初心者 ： 2006/05/26（金） 23:17 ID:MM8RZ7/N
- Pid様、コメントありがとうございました。
完成すればＷＥＢに公開のつもりです。従って、ご指摘のとおり、日本語文字
（全角文字）は半角のローマ字に変更します。
折角紹介してもらったページは今一つわからないので、
「document.getElementsByTagName、getElementById」から、
少しづつ、勉強します。
色々ありがとうございました。
