[過去ﾛｸﾞ] + JavaScript の質問用スレッド vol.117 + (1001ﾚｽ)
上下前次1-新
抽出解除 必死ﾁｪｯｶｰ(本家) (べ) 自ID ﾚｽ栞 あぼーん
このｽﾚｯﾄﾞは過去ﾛｸﾞ倉庫に格納されています｡
次ｽﾚ検索 歴削→次ｽﾚ 栞削→次ｽﾚ 過去ﾛｸﾞﾒﾆｭｰ
470(3): デフォルトの名無しさん [] 2014/12/20(土) 13:15:51.69 ID:z3B/t80F(1/14) AAS
失礼します。
１ページに複数の画像を並べてオンマウスで画像３枚が順番に変わるようにしたいのですが、
下記のスクリプトを２つ並べると２つ目にマウスを持って行っても１つ目の画像が変わってしまいます。
どこを変更すればいいでしょうか・・
<div><IMG SRC=".1.jpg" id="show"
onmouseover="Over()" onmouseout="Out()"></div>
<script type='text/javascript'>
var i=1;
img=new Array(3);
img[1]=".1.jpg";
img[2]=".2.jpg";
img[3]=".3.jpg";
var tid = null;
function Over() {
if (! tid) {
tid = setInterval(Switch, 500);
}
}
function Out() {
if (tid) {
clearInterval(tid);
tid = null;
}
}
function Switch() {
document.getElementById("show").src=img[i];
i=i+1;
if(i>33(2): デフォルトの名無しさん [] 2014/07/01(火) 01:40:40.98 ID:U4Rt/XmH(3/5) AAS
■主要FAQ (全部は 外部ﾘﾝｸ:fiddle.jshell.net )
Q1. 別窓・フレーム内容やローカルファイルを読み書きしたいのですが…
A1. 別サーバのページやファイルの内容はセキュリティ制約でアクセス不可です。
Q2. document.write()でページ内容を追加したいのですが…
A2. 一度表示完了後にwriteするとページ内容が消去されます。DOM等別手段を。
Q3. table内容のinnerHTMLやDOMでの変更がうまく行かないのですが…
A3. IEではtable/tbody/trのinnerHTML書き換え不可です。DOMを使いますが、
DOMの場合tableの直下にはtbody要素が(作らなくても)あることに注意。
Q4. フォーム部品名を変数にした「...myform.変数名.value」が動きません…
A4. 「document.forms.myform.elements[変数名].value」でどぞ。
JavaScriptでは一般に「obj.x」と「obj['x']」は同じ意味です。
グローバル変数はwindowのプロパティなので「x」と「window['x']」も。
Q5. CSSで設定した背景色がe.style.backgroundColorで取得できないのですが…
A5. 取得には document.defaultView.getComputedStyle() を使う必要あり。
IEでは要素オブジェクトのプロパティcurrentStyleを使う。
Q6. setAttribute("class","foo")、setAttribute("onclick","bar()")が動きません…
A6. IEではそれは不可。「obj.className="foo"」「obj.onclick=bar」でどぞ。
Q7. タイマーやイベントハンドラに設定するコードにthisを含めたいのですが
「"...this..."」とか「function(){...this...}」ではうまく行きません。
A7. 実行時にthisが別のものを指してしまってる。以下のようにthisを束縛保存。
「function(x){return function(){...x...};}(this)」
Q8. input type="file"の値を設定(参照)できないのですが…
A8. セキュリティ制約のため設定は絶対に不可。参照はブラウザにより不可。
Q9. getElementById('ID名')や$('ID名')で要素が取れないのですが…
A9. コード実行時点でHTMLがそこまで読まれてない。window.onload 中でやるとか。
){i=1;}
}
</script>
473: デフォルトの名無しさん [] 2014/12/20(土) 14:00:44.30 ID:z3B/t80F(2/14) AAS
>>472472(11): デフォルトの名無しさん [sage] 2014/12/20(土) 13:58:34.92 ID:dWuhsWfV(1/11) AAS
>>470
マウスイベントを取って、動的に変化させるなら、
jQueryを使うのが一般的
Web制作管理板の
jQuery ライブラリ 総合質問所 vol.4 スレで聞けば？
2chｽﾚ:hp
どういうことをやりたいのかを、具体的に書く。
そのコードをすべて捨てて、最初からやり直す
ありがとうございます！
そこで質問してみます。
475: デフォルトの名無しさん [] 2014/12/20(土) 14:29:54.69 ID:z3B/t80F(3/14) AAS
>>474474(1): 472 [sage] 2014/12/20(土) 14:20:37.37 ID:dWuhsWfV(2/11) AAS
>>472
訂正。Web制作管理板の
jQuery ライブラリ 総合質問所 vol.4 スレではなく、
jQuery, Lodash などライブラリ関連の質問は、下記のスレへ
Web制作管理板の
JavaScript ライブラリ総合質問所 vol.4
2chｽﾚ:hp
>>470
仮に左から、ABCという画像3枚が、どのように変わるのか？
AにマウスOverで、左からBCAになるのか？
それとも、ABCのどれかにOverで変わるのか？
BCAになった後、マウスOutで変わるのか？
BにOverで、左からCABになるのか？
それとも、ABCのどれかにOverで変わるのか？
もっと、具体的に説明して
説明不足で申し訳ございませんでした。
左からABの画像が並んでおり、それぞれ、A1,A2,A3, B1,B2,B3という風に
画像が用意してあります。
Aにマウスを当てた場合、0.5秒おきにA画像はA1,A2,A3、また同じようにBに当てた場合、
B画像はB1,B2,B3‥と動くようにしたいのです。
それが、上記のスクリプトにすると、Bに当てても左のほうでA画像がA1,A2,A3と変わってしまいます。
最終的には1ページに30枚、それを数ページにしたいのです。
説明ベタで申し訳ありません＞＜
友人と手話のサイトを作ろうと思い、マウスオーバーで手話の流れが見れるようにしたいと思っています。
478: デフォルトの名無しさん [] 2014/12/20(土) 14:46:09.24 ID:z3B/t80F(4/14) AAS
>>476画像はすでにサーバに数百枚アップロードしてあり、それを今からGIFに変換する作業
よりURLで連続で変更した方が早いと思いまして‥
479: デフォルトの名無しさん [] 2014/12/20(土) 14:47:54.35 ID:z3B/t80F(5/14) AAS
>>477477(1): 472 [sage] 2014/12/20(土) 14:41:09.63 ID:dWuhsWfV(3/11) AAS
ABのエリアに、同じid="show"を付けている？
ABのエリアに、showA,showBなど、違うIDを付ける
そうすれば、ソースコードの大半は、
コピーしなくても、同じものを使える
それもやって見たのです…
showa showb やimg1などidと思えるものはすべて区別を付けてみたのですが、結果は同じでした＞＜
483: デフォルトの名無しさん [] 2014/12/20(土) 15:18:07.92 ID:z3B/t80F(6/14) AAS
>>480480(1): 472 [sage] 2014/12/20(土) 15:12:58.61 ID:dWuhsWfV(4/11) AAS
単に最初から、画像を並べておくだけではダメなのか？
どうしてもマウスで画像を切り替えたいのか？
見え方を動的に変えるなら、jQueryが必須。
$(セレクター).attr(属性,値); で簡単に設定できる
$(#showA).attr('src','.1.jpg');
id="showA"のタグを、src=".1.jpg"に設定する
アニメーション効果もある
slideさせつつ表示とか、fadeInOutなど
これを読む
山田祥寛(よしひろ)、翔泳社
10日でおぼえる jQuery 入門教室 第2版
ありがとうございます。
この手法でなくてはいけないということはないのですが、性格上モヤモヤがとまらなくて
このままやってみようと思っていました。
おすすめの本、早速取り寄せて読んでみようと思います。
重ねてありがとうございました。
485(2): デフォルトの名無しさん [] 2014/12/20(土) 15:25:45.72 ID:z3B/t80F(7/14) AAS
>>482482(2): デフォルトの名無しさん [sage] 2014/12/20(土) 15:17:47.42 ID:G86rIizh(1/4) AAS
>>470
id="show" もあるが、setInterval が返す tid を独立させないと複数の要素に対応できない
どう見てもライブラリにすれば解決する問題ではないのでここで継続質問していい
が、現象が発生するコード(複数並べた場合のコード)を 外部ﾘﾝｸ:jsfiddle.net にUPした方が回答しやすい(やったやらない議論が無駄)
すみません、先ほどのコードもjavascriptも初めての経験なのでご指摘のサイトの
利用方法もわからないのですが、
外部ﾘﾝｸ:jsfiddle.net
これで良いのでしょうか？
ご面倒をおかけしまして本当にすみません。
488: デフォルトの名無しさん [] 2014/12/20(土) 15:37:01.03 ID:z3B/t80F(8/14) AAS
>>487なるほど…コードをシェアできるんですね。
挑戦してみてきます、ありがとうございます。
490(1): デフォルトの名無しさん [] 2014/12/20(土) 15:41:44.85 ID:z3B/t80F(9/14) AAS
>>489489(1): デフォルトの名無しさん [sage] 2014/12/20(土) 15:38:27.10 ID:G86rIizh(2/4) AAS
>>485
jsfiddleはこう使う(体裁を整えただけなので正常動作しない)
外部ﾘﾝｸ:jsfiddle.net
id="show" が重複しているのが結局直ってないな
また、JavaScriptのグローバル変数も衝突しているので正常動作するはずがない
コピペして増やせば正常動作するだろうという安易な発想は捨てたほうがいい
・そもそも、function Over 等は共有できるのだから多重定義する意味はないだろう。event.target で対象のimg要素を取得し、srcプロパティの画像ファイル名から数値をインクリメントする処理を増やせばいい
・tid はクロージャに閉じ込めるか、配列化して衝突を避ける
これで解決できると思う
すみません‥こうしたいと思って探したものがたまたま先ほどのスクリプトでしたので、
本当に知識は０なのです。
どうやら私は無謀な挑戦をしていたようですね…
493: デフォルトの名無しさん [] 2014/12/20(土) 15:56:56.62 ID:z3B/t80F(10/14) AAS
>>491491(1): 472 [sage] 2014/12/20(土) 15:53:58.57 ID:dWuhsWfV(8/11) AAS
>>485
まず一般的に、JavaScript(JS)をHTMLの中には書かない
HTML,CSS,JSはすべて、別のファイルにした方がよい
この部分はHTML
<div><IMG SRC=".1.jpg" id="show"
onmouseover="Over()" onmouseout="Out()"></div>
<script type='text/javascript'>
この部分もHTML
</script>
それと、jsfiddle,jsdo.it でも、
ライブラリでjQueryを指定できる
なるほど、HTMLでjavascriptを読み込むということですね。
494: デフォルトの名無しさん [] 2014/12/20(土) 15:58:15.48 ID:z3B/t80F(11/14) AAS
>>492492(1): デフォルトの名無しさん [sage] 2014/12/20(土) 15:55:34.70 ID:G86rIizh(3/4) AAS
>>490
・id="show" の重複を避けるのはHTMLの分野
・グローバル変数の衝突はJavaScriptの分野
どちらも基礎知識に分類されるので基礎からみっちり勉強したほうがいいように思う
そうしないと今回は解決したとしても、また別の場面ではまるのは間違いない
わかりました＞＜
質問の仕方すらわからない状況でご迷惑おかけしました。
最低限質問が出来るように勉強してきます。
ありがとうございます。
496(1): デフォルトの名無しさん [] 2014/12/20(土) 16:13:34.69 ID:z3B/t80F(12/14) AAS
>>495495(1): 472 [sage] 2014/12/20(土) 16:05:06.95 ID:dWuhsWfV(9/11) AAS
知識0なら、JSは厳しいよ。
10日でおぼえる jQuery 入門教室 第2版では、
JSの文法は、20ページしか説明してない
それで理解できないなら、この本を読む
はじめてのJavaScript、秀和システム
掌田津耶乃(しょうだ つやの)、2013
でも、掌田の本はかなり本格的な、
プログラマー向けの本で、かなり難しい。
でもこれより簡単な本は知らない
わかりました、ご丁寧にありがとうございます。
読み漁ってみます。
499: デフォルトの名無しさん [] 2014/12/20(土) 16:29:21.63 ID:z3B/t80F(13/14) AAS
>>497497(1): 472 [sage] 2014/12/20(土) 16:20:55.20 ID:dWuhsWfV(10/11) AAS
HTML,CSSだけで、単に最初から、
画像を並べておくだけにした方がよいかも
君は何かの言語で、プログラミングしたことあるの？
もし無ければ、わざわざJavaScriptにはまるのはお勧めしない
JSはかなりの変態言語だから、
凝ったことをしようとすると、プロでも頭を抱えるほどw
いえ、プログラムの知識も同じく０です。
wordpressの記事内に入れれる言語を探していたらたまたま発見したのがこれだったのです。
それほどややこしい言語だったとは…
ありがとうございますm(__)m
>>498498(2): デフォルトの名無しさん [sage] 2014/12/20(土) 16:23:43.37 ID:G86rIizh(4/4) AAS
>>496
参考書としてはこの辺りを勧めておく
Amazon.co.jp： DOM Scripting 標準ガイドブック ~やさしく学ぶ、JavaScriptとDOMによるWebデザイン~ (Web Designing BOOKS): Jeremy Keith, 中村 享介, 吉川 典秀: 本
外部ﾘﾝｸ:www.amazon.co.jp
Amazon.co.jp： WebクリエイティブのためのDOM Scripting （Web Designing Books）: 中村享介: 本
外部ﾘﾝｸ:www.amazon.co.jp
jQueryはもっと後でいい
JavaScriptだけで書けるようになってからjQueryに手をつけないと、質の低いサンプルコードのコピペプログラミングになる
例えば、eventオブジェクトを活用したjQueryコードはほぼ見ないが、eventオブジェクトは addEventListener に慣れ親しんだ者なら一般的なものだ
JavaScriptだけで書けるようになってこそライブラリの選択肢の幅が広がる
了解いたしました。
ありがとうございました＞＜
502: デフォルトの名無しさん [] 2014/12/20(土) 19:08:17.42 ID:z3B/t80F(14/14) AAS
>>500>>501501(1): デフォルトの名無しさん [sage] 2014/12/20(土) 18:40:36.15 ID:4nv9LDuL(1) AAS
この程度なら適当に入門サイト読み漁れば何とかなる気もする
やりたい事が頭の中で筋道立ってるなら後はコード当てはめるだけだよ
はい、がんばります＞＜
上下前次1-新書関写板覧索設栞歴
ｽﾚ情報 赤ﾚｽ抽出 画像ﾚｽ抽出 歴の未読ｽﾚ AAｻﾑﾈｲﾙ
ぬこの手 ぬこTOP 0.053s