掲示板/JavaScript質問板/過去ログ/一覧/ 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」から、
少しづつ、勉強します。

色々ありがとうございました。