人力検索はてな
モバイル版を表示しています。PC版はこちら
i-mobile

ソースの意味を教えてください。
http://nifberry.727.net/test/hatena101.htmで*画像に触ったりクリックした時に画像を変化させる<p>
<a href=”#” onMouseOver=”SetImage1(2,0)” onMouseOut=”SetImage1(1,0)” onClick=”SetImage1(3,0)”>
<img src=”http://maiden1970.sakura.ne.jp/keiji1.gif” alt=”keiji1” border=0 width=”78” height=”33”></a>
<p>
<a href=”#” onMouseOver=”SetImage1(2,1)” onMouseOut=”SetImage1(1,1)” onClick=”SetImage1(3,1)”>
<img src=”http://maiden1970.sakura.ne.jp/reviu1.gif” alt=”keiji1” border=0 width=”78” height=”33”>の件は、クリッカブルマップの画像切り替えだと思うんですが、数値が何を示しているのかが
わかりません。教えてください。

●質問者: yujihirose
●カテゴリ:コンピュータ 学習・教育
✍キーワード:クリッカブル クリック ソース マップ 画像
○ 状態 :終了
└ 回答数 : 5/8件

▽最新の回答へ

1 ● reply
●16ポイント

http://www13.plala.or.jp/ayamenobasho/me/java/cursor02.html

カーソルをもってくるとB

SetImage1(flag,position)

を実行して、画像を呼び出しているのでしょう。(^^)


2 ● mKogu
●16ポイント

http://tohoho.wakusei.ne.jp/html/img.htm

そのファイルは現在ありません

数値は、サイズと枠線を示しています

ALTはメインの画面が出るまでに表示される文字です


3 ● syuzabu
●16ポイント

http://hotwired.goo.ne.jp/webmonkey/98/11/index2.html

JavaScriptは普段使わないので勉強がてら調べてみました。

まずJavaScriptの宣言部に注目しましょう。

================================================================================

var ButtonImage = new Array();

for(i = 1; i <= 3; i++) {

ButtonImage[i]= new Image();

ButtonImage[i].src=”

http://maiden1970.sakura.ne.jp/keiji

” + i + ”.gif”;

ButtonImage[i+3]= new Image();

ButtonImage[i+3].src=”

http://maiden1970.sakura.ne.jp/reviu

”+ i + ”.gif”;

}

function SetImage1(flag, position) {

document.images[position].src=ButtonImage[flag+position*3].src;

}

================================================================================

まず画像の数ですがButtonImage[1]〜[6]の計6個あります。

次に<A>タグの中で呼び出しているSetImage1関数を見ていくと

flag変数が画像の状態(1...通常時、2...マウスオーバー時、3...クリック時)を

表していることが分かります。この状態でposition変数を無視(ゼロと)して

考えると document.images[1].src = ButtonImage[flag].src; となることは

分かりますよね?つまりボタンの状態により、画像の表示元を変化させています。

position変数については document.images[] の意味を調べて頂くと分かりますが

画面に表示している画像の番号を指定します。(IMGタグの数だけ)

具体的に申し上げると、下記IMGタグが三行記述されている場合は

<HTML><BODY>

<IMG SRC=”A.GIF”>

<IMG SRC=”B.GIF”>

<IMG SRC=”C.GIF”>

</BODY></HTML>

A.GIFの位置のIMGタグの番号が1になり、B.GIFの位置が2となります。

A.GIFのイメージを変化させたい場合は SetImage1(flag, 1) を呼べば良いです。

多分(^-^;)IMGタグを記述した順に1〜と番号が割り当てられる訳です。

……説明するの下手なんですが、分かりましたでしょうか?

あとJavaScriptホントに今調べたばっかりで合ってるか若干怪しいですが。(^-^:)

◎質問者からの返答

半分くらいわかりました・・・(苦笑)


4 ● Spawapawa
●16ポイント

http://nifberry.727.net/test/hatena101.htm

var ButtonImage = new Array();

for(i = 1; i <= 3; i++) {

ButtonImage[i]= new Image();

ButtonImage[i].src=”

http://maiden1970.sakura.ne.jp/keiji

” + i + ”.gif”;

ButtonImage[i+3]= new Image();

ButtonImage[i+3].src=”

http://maiden1970.sakura.ne.jp/reviu

”+ i + ”.gif”;

}

function SetImage1(flag, position) {

document.images[position].src=ButtonImage[flag+position*3].src;

}

----------------------------------------------------------

function Set〜以上の文章であらかじめ画像を呼び出します。

(これはhtmlファイルが呼び出されるときに行われます。

これをすることによってロールオーバーをしたときに画像の切り替えが円滑に行われます。)

次に、画像を触り、SetImageが呼ばれたとき引数として2つの値をスクリプトに渡します。

これを関数SetImage1が変数flagと変数positionとして受け取ります。

後はdocument.imagesで画像を書き出すとき、それぞれの変数を使った画像を呼び出します。

変数flagは画像の状態を表しています。

このスクリプトと画像だと、1がマウスを合わせてないとき、2が合わせたとき、3がクリックしたときを表しています。

変数positionは画像の種類を表しています。

このスクリプトと画像だと、掲示板の画像が0、CDレヴューの画像が1を表しています。

ちょっと難しくなったかも知れません。

間違ってたらすいません。


5 ● syuzabu
●16ポイント

http://www.scollabo.com/banban/java/ref.html

JavaScriptリファレンス/初心者のためのホームページ作り

すみません、今自分の書いた奴見てて間違ってますね。(^-^;)

以下訂正点…

> 考えると document.images[1].src = ButtonImage[flag].src; となることは

考えると document.images[0].src = ButtonImage[flag].src; となることは

> A.GIFの位置のIMGタグの番号が1になり、B.GIFの位置が2となります。

> A.GIFのイメージを変化させたい場合は SetImage1(flag, 1) を呼べば良いです。

> 多分(^-^;)IMGタグを記述した順に1〜と番号が割り当てられる訳です。

A.GIFの位置のIMGタグの番号が0になり、B.GIFの位置が1となります。

A.GIFのイメージを変化させたい場合は SetImage1(flag, 0) を呼べば良いです。

多分(^-^;)IMGタグを記述した順に0〜と番号が割り当てられる訳です。

◎質問者からの返答

僕には難しい…関数とかの意味がわかりません。

本買おうかな…

関連質問


●質問をもっと探す●



0.人力検索はてなトップ
8.このページを友達に紹介
9.このページの先頭へ
対応機種一覧
お問い合わせ
ヘルプ/お知らせ
ログイン
無料ユーザー登録
はてなトップ