![](http://oshiete.xgoo.jp/images/v2/pc/qa/question_title.png?e8efa67)
javascriptを学んでいます。
練習のために下記のコードを自分なりに試行錯誤して作りました。
ちゃんと動くようになりましたが、自己流で修正を繰り返したので正しくない部分があると思います。
また、imgタグのそれぞれにidを付けて区別しています。
idを付けずにやる方が効率的で良いと思うのですが、実現することができず、
仕方なくidを全て付けて妥協しました。
改善点をご指摘して頂けると嬉しいです。ご教示をお願いいたします。
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja" lang="ja">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>画像の切替とおすすめの組合せ</title>
<style type="text/css">
#kkkkkk {
width: 300px;
position: relative;
}
#kkkkkk img {
position: absolute;
top:0;
left: 0;
}
</style>
<script type="text/javascript">
function aaa(evt){
var t = evt.target || evt.srcElement;
var tid = t.id;
var tag = t.parentNode.getElementsByTagName("img");
var kkkkkk = document.getElementById('kkkkkk');
if(t.nodeName != "IMG") return;
for(i=0; node=kkkkkk.children[i++];){
if(node.tagName != "IMG") continue;
if(node.id == tid.replace(/_|[0-4]/g,"")){
node.src = t.id+".jpg";
}
}
}
function rrrrr(a,b,c){
var ta = document.getElementById('testA');
var tb = document.getElementById('testB');
var tc = document.getElementById('testC');
ta.src = "testA_"+a+".jpg";
tb.src = "testB_"+b+".jpg";
tc.src = "testC_"+c+".jpg";
}
</script>
</head>
<body>
<div>
<img id="testA_0" src="testA_0.jpg" width="30" alt="" onclick="aaa(event);" />
<img id="testA_1" src="testA_1.jpg" width="30" alt="" onclick="aaa(event);" />
<img id="testA_2" src="testA_2.jpg" width="30" alt="" onclick="aaa(event);" />
<img id="testA_3" src="testA_3.jpg" width="30" alt="" onclick="aaa(event);" />
<br />
<img id="testB_0" src="testB_0.jpg" width="30" alt="" onclick="aaa(event);" />
<img id="testB_1" src="testB_1.jpg" width="30" alt="" onclick="aaa(event);" />
<br />
<img id="testC_0" src="testC_0.jpg" width="30" alt="" onclick="aaa(event);" />
<img id="testC_1" src="testC_1.jpg" width="30" alt="" onclick="aaa(event);" />
<img id="testC_2" src="testC_2.jpg" width="30" alt="" onclick="aaa(event);" />
</div>
<form>
<input type="button" value="おすすめ画像の組み合わせ その1" onclick="rrrrr(0,0,2)" /><br />
<input type="button" value="おすすめ画像の組み合わせ その2" onclick="rrrrr(3,1,0)" /><br />
<input type="button" value="おすすめ画像の組み合わせ その3" onclick="rrrrr(2,1,1)" /><br />
</form>
<div id="kkkkkk">
<img width="10" src="0.jpg" style="z-index:2;" id="testA" name="testA" alt="" />
<img width="20" src="1.jpg" style="z-index:1;" id="testB" name="testB" alt="" />
<img width="30" src="2.jpg" style="z-index:0;" id="testC" name="testC" alt="" />
</div>
</body>
</html>
A 回答 (16件中1~10件)
- 最新から表示
- 回答順に表示
No.16
- 回答日時:
使えない文字。
onclick 属性の中で "&" と "<" と" >" は使えませんよ。
HTML5 ならエラー処理されますが、XHTML なら整形式違反でパースエラーです。
XHTML なら script 要素内に ”&"、"<" を書くこともできません。
XHTML に慣れないうちは気をつけましょう。
No.15
- 回答日時:
そういえば、script要素のなかでは、何かと使えない文字があったような気もします……(HTMLなら。
XHTMLは分かりません)何かは分かりませんが、外部ファイル化するのがいいかもしれませんね。
No.14
- 回答日時:
ごめんなさいね。
メモリーリークパターンについてaddEvent の関数の中で process に関数を代入しています。
この関数がイベント発火で呼ばれた時に、そのスコープから外側、引数の中の element に html要素があります。
これが循環参照となっています。なので、
element = null;
return process;
のような形で関係を断ち切ると良いと思いますが、
その説明を上手にできないので強くも言えません。そして、だけどお奨めしません。
メモリーリークパターンは、解消されているとも言われましたが、「危ういものには近づかない」
かな?
No.13
- 回答日時:
色々と適当な回答をすみません……
自分のところにある関数群から抜き出してきただけでした。
>★47行目のif(name==='*'||!name){ について
getAttribute(要素);
又は、
getAttribute(要素,'*');
とか、こんな感じでやったときに、オブジェクト&配列で全部取得できるようにしただけのものです。
戻り値は、
{
name:['href','target' ……],
value:['http://example.com','_blank' ……]
}
みたいな感じです。
>★52行目のattributes
>★55行目のattr.name.toLowerCase();
>★57行目のif(name && value){
&& は、条件に合わなくなった時点で、最後に評価した値を返します。
全て合っているなら、最後に評価した値です。
alert(0 && 1); //0の時点で合わないので、 0 を表示。
alert(1 && 2); //全て合っているので、2 を表示。
こういう使い方が出来ます↓
a===3 && alert('j');
aが3のとき、alert('j') を実行。
>★62行目のreturn AllAttributes;
47行目の理由を参照して下さい。
>★64行目のname=name.toLowerCase();と199行目のtagName.toUpperCase()
タグ名は、普通大文字で、属性名は普通小文字で取得されます。
それに合わせているだけです。
name=name.toUpperCase() でも構いませんが、そうする場合は、
attr.name.toUpperCase へと変更して下さい。
>★67行目のif(name==='style')return element.style.cssText||null;
適当な実装ですね……
ホントはもっとしっかりやらなければならないところを、手抜きしています。。
element.style.cssText が、undefined だったり、'' だった場合、nullにします。
>★68行目のvalue=nullについて
すみません、その少し下の
if(attr.name.toLowerCase()===name){
value=attr.value;
の後に、
break;
を追加して下さい。
var value=null;
としているのは、指定した属性が見つからない場合は、nullを返すようにする為です。
>★81行目のelse if(evt.returnValue!==void 0)evt.returnValue=false;
returnValueは、
http://d.hatena.ne.jp/chaichanPaPa/20081208/1228 …
こちらにある通りです。
IE用、preventDefaultのようなものです。
>★86行目の例外処理について
tryで行っているのは、event が無いブラウザもあるからです。
このあたりもやや手抜きです。。
>★95行目のvoid(0)について
void 0 は undefined と同じです。
windowというのは、そもそも
var window={
document:...,
undefined:...,
null:...
};
みたいなものです(実際は違います)。
例えば、
var object={};
object.aとしたら、undefinedが返ってきますよね。
それと同じように、window.event とすることによって、存在するかどうかを確かめています。
>★103行目のelse if('handleEvent' in listener)
駄目です。
else if(listener.handleEvent)
なら、OKです。
切り張りして適当に作ったもので、すみません。
IEのメモリリーク問題も、改善出来ていません。
メモリリークの問題は、直し方が分かりません。
興味があれば、調べてみてください。
No.12
- 回答日時:
連投、ごめん。
文字数の制限が…いまだ xhtml である理由の説明がありませんので勝手に解釈。
xhtml の利点の1つに「ユニバーサルデザイン」があります。(HTML5ならOK)
文書は、どんな人でも利用できるよう配慮した設計になされているべきだと(理想)思います。
目の不自由な人は、ブラウザの音声機能により文書を読んでいるかもしれません。
貴方の書いている div#ggggg の img の羅列は、input@radio だとか input@checkbox の機能を有していると思いませんか?
javascript を使うことによって、それに類似した関連付けをしていますよね。なのに form 要素の中にもない。
音声機能の付いたブラウザは、radio だとか checkbox なら補助できるかもしれないけれど、製作者側が便利だろうと勝手に付け加えた機能を理解できません。
つまりユーザーがその文書の状態を把握できないのです。
そこでそれを実現しようとしたのが、「WAI-ARIA」です。
マークアップされた文書(HTML)は、アンカータグ(<a>)程度でしか関連させることができませんが、WAI-ARIA を使用すると強固に関連付けられるのです。
と、講釈を並べても自分は、まだこれを知っただけであり、使いこなすことなど到底できません。
それを見かねてか、コードを書いてくださった人がおられます。
その人の Level を推し量るすべは持ち合わせておりませんが、Level 10 を通り越し Level E のドグラ星の王子に匹敵するものと思える程です。
(こんな例えをすると怒られるだろうな、きっと。ごめんなさい。先に謝っておきます。そして未承諾のまま掲載しました。事後報告という事で…)
<!DOCTYPE html>
<title>TEST</title>
<body>
<form action="#" onclick="
var target = event.target || event.srcElement;
var currentTarget = event.currentTarget || this;
var doc = target.ownerDocument;
switch (target.tagName) {
case 'IMG' :
var source = target;
var result;
var t;
for (t = target; t; t = t.parentNode) {
result = t.getAttribute ('aria-controls');
if (result) {
result = doc.getElementById (result);
if (! result) {
break;
}
if (result.tagName === 'IMG') {
result.src = source.src;
result.alt = source.alt;
}
break;
}
if (t === currentTarget) {
break;
}
}
return;
case 'INPUT' :
var sources = target.getAttribute ('aria-labelledby');
var source;
var results;
var result;
var t;
var i;
if (! sources) {
return;
}
sources = sources.replace (/^\s+|\s+$/g, '').replace (/\s+/g, '\x20').split (/\x20/);
for (i = 0; source = sources[i]; ++i) {
source = doc.getElementById (source);
sources[i] = source ? (source.tagName === 'IMG') ? source : null : null;
}
for (t = target; t; t = t.parentNode) {
results = t.getAttribute ('aria-controls');
if (results) {
results = results.replace (/^\s+|\s+$/g, '').replace (/\s+/g, '\x20').split (/\x20/);
for (i = 0; result = results[i]; ++i) {
source = sources[i];
if (! source) {
continue;
}
result = doc.getElementById (result);
if (! result) {
continue;
}
if (result.tagName === 'IMG') {
result.src = source.src;
result.alt = source.alt;
}
}
}
if (t === currentTarget) {
break;
}
}
return;
}
">
<fieldset>
<legend>画像を選んで下さい</legend>
<ul>
<li aria-controls="A">
<span>A グループ:</span>
<img id="A0" src="A0.png" alt="A0">
<img id="A1" src="A1.png" alt="A1">
<img id="A2" src="A2.png" alt="A2">
<img id="A3" src="A3.png" alt="A3">
</li>
<li aria-controls="B">
<span>B グループ:</span>
<img id="B0" src="B0.png" alt="B0">
<img id="B1" src="B1.png" alt="B1">
</li>
<li aria-controls="C">
<span>C グループ:</span>
<img id="C0" src="C0.png" alt="C0">
<img id="C1" src="C1.png" alt="C1">
<img id="C2" src="C2.png" alt="C2">
</li>
</ul>
<ul>
<li aria-controls="A B C">
<input type="button" value="お勧めの組み合わせ 1" aria-labelledby="A0 B0 C1">
<input type="button" value="お勧めの組み合わせ 2" aria-labelledby="A3 B1 C0">
<input type="button" value="お勧めの組み合わせ 3" aria-labelledby="A2 B1 C1">
</li>
</ul>
<img src="0.png" alt="dummy">
</fieldset>
<fieldset>
<legend>結果</legend>
<p>
<img id="A" src="blank.png" alt="*">
<img id="B" src="blank.png" alt="*">
<img id="C" src="blank.png" alt="*">
</p>
</fieldset>
</form>
--
IE には、currentTarget に代わる機能がないので this を利用していますが、その this を勘違いしないように。
このプログラム!綺麗だと思いませんか?
ただ単に短くなるだけのショートコーディングをやめる切っ掛けになっています
No.11
- 回答日時:
指摘されたことが生かされていないような…
(書くほどに突っ込まれる、まるで自分のような)
> var frm = document.fff;
これは、一部の方言であって使用すべきでないと思います
document.forms['fff']
> action="GET"
相変わらず、method="GET" にならないようで
>> node.ownerDocument
イベントが起きた時の要素(t)の所属している document は、プログラムで使われている document と同じでないかもと想定して書きましょう
(document 内の iframe だったり…)
>> 関数内で id が取得できているのに…
無駄なループとはこのこと
function aaa(evt){
var t = evt.target || evt.srcElement;
if(t.nodeName != "IMG") return;
var rst = /^(test[A-C])_(\d)$/.exec (t.id);
var kkkkkk = document.getElementById('kkkkkk');
var i = 0, c = kkkkkk.childNodes, node;
while (node = c[i++]) {
if(node.tagName != "IMG") continue;
if (node.id == rst.slice(1,2)) {
node.src = t.id+".jpg";
}
}
}
//動くかどうかは未検証
function aaa(evt){
var t = evt.target || evt.srcElement;
var d = t.ownerDocument;
var result;
var e;
if("IMG" === t.tagName)
if ((result = /^(test[A-C])_(\d)$/.exec (t.id)))
if ((e = d.getElementById (result[1])))
e.src = e.id + '.jpg';
}
No.10
- 回答日時:
すみません、見落としていました。
addEvent(document.getElementByd('tuikaID') ……
の前に、
function rrrrr(a,b,c){
document.getElementById('testA').src='testA_'+a+'.jpg';
document.getElementById('testB').src='testB_'+b+'.jpg';
document.getElementById('testC').src='testC_'+c+'.jpg';
}
を追加し、
<form method="GET">
<input type="button" value="おすすめ画像の組み合わせ その1" /><br />
<input type="button" value="おすすめ画像の組み合わせ その2" /><br />
<input type="button" value="おすすめ画像の組み合わせ その3" /><br />
</form>
を
<form method="GET" id="buttonform">
<input type="button" onclick="window.rrrrr&&rrrrr(0,0,2);" value="おすすめ画像の組み合わせ その1" /><br />
<input type="button" onclick="window.rrrrr&&rrrrr(3,1,0);" value="おすすめ画像の組み合わせ その2" /><br />
<input type="button" onclick="window.rrrrr&&rrrrr(2,1,1);" value="おすすめ画像の組み合わせ その3" /><br />
</form>
に変更してみてください。
----------------------------
getAttribute関数は、
getAttribute(要素,属性名);
とすると、'要素'の [ [ '属性名'の属性 ] の属性値 ] (分かりにくくてすみません。つまり、<input type="button">なら、getAttribute(input要素,'type')==='button' ということです)を取得します。
内容は、クロスブラウザにするために書かれているものです。
preventDefault関数は、
https://developer.mozilla.org/ja/DOM/event.preve …
こちらと、ほぼ同じです。
ただし、stopPropagationが混じっています。
addEvent関数は、
イベントリスナに登録する関数です。
指摘通りに直したところちゃんと動きました。ありがとうございます。
今日は1日中、こちらのサンプルと向き合っていました。
でも理解度は2割ほど・・・落ち込み中です。
疑問がいろいろあるのですが、もしよろしければご教示いただけないでしょうか。
★47行目のif(name==='*'||!name){ について
function getAttribute(element,name){
if(name==='*'||!name){
~~~~~~~~~~~~~~~~~~~~~
var srcElement=getSrcElement(evt),src=getAttribute(srcElement,'src'),tagName=srcElement.tagName;
if(name==='*'||!name){のnameには'src'が入るので、ifの中の条件式の真偽は、
'src'の値と型の両方が'*'と一致するか、一致するならばこの条件式はtrue
一致しなければ 'src'がfalseになるときこの条件式はtrue、'src'がtrueのときは条件式はfalseを返す。
文字列に対して!をつけたり、*と比較すると特殊な効果があるのでしょうか。
★52行目のattributes
attributesはDOMのAttr部分を特定するプロパティ。
.nameや.valueなどのプロパティと組合わせることで値を取得する。
http://pf-j.sakura.ne.jp/program/jsdom/domattr.htm
https://developer.mozilla.org/ja/DOM/element.att …
http://jibun.atmarkit.co.jp/lskill01/rensai/dom0 …
★55行目のattr.name.toLowerCase();
attr.nameは属性の取得。
http://www.scollabo.com/banban/jsindex/sample/sa …
★57行目のif(name && value){
&&や||を使うと論理式に変化して返り値はtrueかfalseになる
と参考書に書いてありましたが、alert(name && value)とやると
valueの値が表示されます。
とにかく属性とその値があればif()ではtrueになるということですね。
★62行目のreturn AllAttributes;
getAttributeの最初のifにreturn AllAttributesを入れるのはなぜですか。
name==='*'||!nameがどういう状態か分からないので試せてないですが。
★64行目のname=name.toLowerCase();と199行目のtagName.toUpperCase()
toLowerCaseは小文字にtoUpperCaseは大文字にする。
name.toLowerCase()でのnameの'src'は小文字。それを小文字に?
★67行目のif(name==='style')return element.style.cssText||null;
element.style.cssTextは
スタイルシートの中身を下記変えるのに便利なもの。innerHTML的な
http://d.hatena.ne.jp/gan2/20070827/1188180592
最後の「||null」はstyle=""という状態を想定しているのですか?
★68行目のvalue=nullについて
var value=null,attributes=element.attributes,attr;
var value=null;の部分ですが、var value;ではだめなのでしょうか。
★80行目のpreventDefaultと82行目のstopPropagation
http://jmblog.jp/archives/169
https://developer.mozilla.org/ja/DOM/event.preve …
https://developer.mozilla.org/ja/DOM/event.cance …
https://developer.mozilla.org/ja/DOM/event.stopP …
イベント伝播(IE:「下から上に(イベントバブリング方式)」,IE以外:「上から下に(イベントキャプチャリング方式)」)
★81行目のelse if(evt.returnValue!==void 0)evt.returnValue=false;
returnValueはモーダルダイアログウィンドウから返された値を指定または取得
http://e-words.jp/w/E383A2E383BCE38380E383ABE383 …
http://translate.google.co.jp/translate?hl=ja&sl …
モーダルダイアログウィンドウを使わなくてもreturnValueは使えるのですか?
★86行目の例外処理について
event.srcElement
http://www.openspc2.org/JavaScript/reference4/ev …
http://okwave.jp/qa/q2811514.html
<クロスブラウザは例外処理で対応>
try{
return event.srcElement; //IEで動き、Firefoxでは動かない
}
catch(e){
return evt.srcElement||evt.target; //Firefox用
}
例外処理で対応されていますが、ifではダメなのでしょうか。
if(event.srcElement){
return event.srcElement; //IEで動き、Firefoxでは動かない
}else{
return evt.srcElement||evt.target; //Firefox用
}
と疑問に思ったのですが、こちらのサイトを見て何となくわかりました。
http://fstyle.ddo.jp/archives/2006/08/trycatch.h …
・エラーメッセージを受け取れる
・ループでエラーになる部分を簡潔な記述で対応して抜けられる
だから、今までifで分けていた例外処理を全部tryで例外処理した方がいい。
ですね。
★95行目のvoid(0)について
window.event===void 0 ⇒ 「window.eventが存在しなければtrue、存在すればfalse」
これはこういうものだと形そのものをテクニックとして知ってればOKですよね。
http://detail.chiebukuro.yahoo.co.jp/qa/question …
★103行目のelse if('handleEvent' in listener)
http://builder.japan.zdnet.com/script/sp_javascr …
else if(handleEvent)でも良いということですね。
★105行目のlistener.handleEvent.call(listener,evt)
event.handleEvent:http://www.scollabo.com/banban/jsindex/sample/sa …
listener.handleEvent.call(listener,evt)は
listenerエレメントをhandleEventしてcallし、
第一引数のlistenerオブジェクトにパラメータのevtを渡して実行する
No.9
- 回答日時:
>applyの使い方
自分なりの認識。
関数に、ある情報を渡すには、普段、引数として渡しますよね。
実はそれ以外に、this として渡す方法の2種類があります。
call と apply は、第一引数に this を、第二引数に普段、引数として渡す値を付けます。
その第二引数が、複数なら配列で渡せるのが apply だと・・・。
変数 A は、関数の内側に入れるのは、ちょっと無駄。
わざわざ外に出したのに・・・。
何でもかんでもグローバルがイケない!なんて考えないことです。
[[2,0,1], [3,1,2],[0,0,1]]だって、グローバルなら毎回評価されないでしょ!
--
ちょっと雑談。
http://tech.kayac.com/archive/javascripter-level …
自分を評価すると、jQuery なんて使い方がわかりません。
なのでLevel4の手前。
「上・中・下」で言えば、”下”!
もっと精確に言うなら、”下の上”もしくは”中の下”あたりです。
上級者の方々の意見も聞きたいですよね。
そこですぐに質問をすると答えにくいでしょうから、忘れた頃にまた趣を変えて質問してみてはどうでしょう!?
もうすでに200ポイントを・・・
>関数に、ある情報を渡すには、普段、引数として渡しますよね。
>実はそれ以外に、this として渡す方法の2種類があります。
>call と apply は、第一引数に this を、第二引数に普段、引数として渡す値を付けます。
>その第二引数が、複数なら配列で渡せるのが apply だと・・・。
http://d.hatena.ne.jp/jdg/20100515/1273903873
var array_like_anchors = document.getElementsByTagName('a');
var anchors = Array.prototype.slice.call(array_like_anchors);
つまり「Array.prototype.」+配列に使えるプロパティ+「.call(第一引数,第二引数)」
上記の型に下記のプロパティをはめ込めばオブジェクトに値を使えるということですね。
配列に使えるプロパティ:slice、map、concat、join、length、pop、push、reverse、shift、slice、sort、splice、unshift、など
第一引数:windowかnullを入れる。(undefinedやnullを指定すると、暗黙的にグローバルオブジェクトに変換)
第二引数:値を渡したいオブジェクト
>変数 A は、関数の内側に入れるのは、ちょっと無駄。
>わざわざ外に出したのに・・・。
>何でもかんでもグローバルがイケない!なんて考えないことです。
一度取得すれば済むものはグローバルの方が効率的で、
また、他のオブジェクトでも使えるようになるから便利
ということですね。ありがとうございます。
>「上・中・下」で言えば、”下”!
下!?
jQeryなどは抜きにしてjavascriptのみなら「上」ですよね?
そうであってほしいです。
ポイント???
applyを取り入れて直しました。
<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitio …
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja" lang="ja">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta http-equiv="Content-Style-Type" content="text/css" />
<meta http-equiv="Content-Script-Type" content="text/javascript" />
<title>画像の切替とおすすめの組合せ</title>
<style type="text/css">
#kkkkkk {
width: 300px;
position: relative;
}
#kkkkkk img {
position: absolute;
top:0;
left: 0;
}
</style>
</head>
<body>
<div id="ggggg">
<img id="testA_0" name="testA_0" src="testA_0.jpg" width="30" alt="A画像0" />
<img id="testA_1" name="testA_1" src="testA_1.jpg" width="30" alt="A画像1" />
<img id="testA_2" name="testA_2" src="testA_2.jpg" width="30" alt="A画像2" />
<img id="testA_3" name="testA_3" src="testA_3.jpg" width="30" alt="A画像3" />
<br />
<img id="testB_0" name="testB_0" src="testB_0.jpg" width="30" alt="B画像0" />
<img id="testB_1" name="testB_1" src="testB_1.jpg" width="30" alt="B画像1" />
<br />
<img id="testC_0" name="testC_0" src="testC_0.jpg" width="30" alt="C画像0" />
<img id="testC_1" name="testC_1" src="testC_1.jpg" width="30" alt="C画像1" />
<img id="testC_2" name="testC_2" src="testC_2.jpg" width="30" alt="C画像2" />
</div>
<form action="GET" name="fff">
<input type="button" name="0" value="おすすめ画像の組み合わせ その1" /><br />
<input type="button" name="1" value="おすすめ画像の組み合わせ その2" /><br />
<input type="button" name="2" value="おすすめ画像の組み合わせ その3" /><br />
</form>
<div id="kkkkkk">
<img width="10" src="0.jpg" style="z-index:2;" id="testA" name="testA" alt="切替後画像A" />
<img width="20" src="1.jpg" style="z-index:1;" id="testB" name="testB" alt="切替後画像B" />
<img width="30" src="2.jpg" style="z-index:0;" id="testC" name="testC" alt="切替後画像C" />
</div>
<script type="text/javascript">
var ggg = document.getElementById('ggggg');
var frm = document.fff;
var A = [
document.getElementById ('testA'),
document.getElementById ('testB'),
document.getElementById ('testC')
];
if (document.addEventListener){
ggg.addEventListener('click', aaa, false);
frm.addEventListener('click', bbb, false);
} else if (document.attachEvent){
ggg.attachEvent('onclick', aaa);
frm.attachEvent('onclick', bbb);
}
function aaa(evt){
var t = evt.target || evt.srcElement;
if(t.nodeName != "IMG") return;
var rst = /^(test[A-C])_(\d)$/.exec (t.id);
var kkkkkk = document.getElementById('kkkkkk');
var i = 0, c = kkkkkk.childNodes, node;
while (node = c[i++]) {
if(node.tagName != "IMG") continue;
if (node.id == rst.slice(1,2)) {
node.src = t.id+".jpg";
}
}
}
function bbb(evt) {
var t = evt.target || evt.srcElement;
rrrrr.apply (null, [[2,0,1], [3,1,2],[0,0,1]][Number(t.name)||0]);
}
function rrrrr(a,b,c){
for(var i = 0, I = arguments.length; i < I; i++){
A[i].src = A[i].id + '_' + arguments[i] + '.jpg';
}
}
</script>
</body>
</html>
No.8
- 回答日時:
XHTMLはあまり詳しくありませんが……
それと、form action="GET" ではなく、form method="GET" では?
https://box.yahoo.co.jp/guest/viewer?sid=box-l-t …
こちらに色々修正したものを置いておきました。
>それと、form action="GET" ではなく、form method="GET" では?
間違えていました。
>こちらに色々修正したものを置いておきました。
imgの方は動きますが、inputの方は動かないみたいです。
知らないものがいろいろあるので、解読にしばらく時間がかかりそうです。
参考にさせていただきます。ありがとうございます。
No.7
- 回答日時:
さすがに深夜の連投は迷惑だろうと思って、今投稿。
slice 戻り値は Array。
あとアンパサンドアンパサンド。
いろいろとありがとうございます。
> </body> の直前にスクリプトを書いています。
これからは必ず</body> の直前に書くようにします。
> 関数 aaa のなかで、変更すべき id を取得できているのに、なぜループする!?
凄く無駄がありました。
rrrrr ()での配列の使い方が上手ですね。
このやり方を覚えておきます。
> // 画像がキャッシュに納まるならそれはそれで
argumentsがキャッシュに何か影響を与えると思い調べたのですが・・・勘違いでした。
> jpeg って、重ねて表示できたっけ?
サンプルで何となく付けた拡張子がjpegでした。
実践ではpngを使います。
> NS付きを調べてね。
https://developer.mozilla.org/ja/DOM/element.get …
t.parentNode.getElementsByTagName("img");
なら
t.parentNode.getElementsByTagNameNS("http://www.w3.org/1999/xhtml", "img");
になるということでしょうか。名前空間とか難しいですね。
>rrrrr.apply (null, [[2,0,1], [3,1,2],[0,0,1]][Number(t.name)||0]);
applyの使い方をもう少し調べてみます。
http://andante.in/j/apply%E3%81%AE%E5%88%A9%E7%9 …
お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう!
似たような質問が見つかりました
- JavaScript 画像の表示位置 3 2022/12/23 08:25
- JavaScript html5に変えるとスライドショーが消えてしまった。 3 2022/03/26 19:53
- JavaScript 入力フォームの javascript で メールアドレスの正規チェックをを行い、ボタンをクリックして 2 2022/04/27 16:06
- JavaScript 1日1回引けるJavaScriptおみくじについて 1 2022/12/12 22:28
- HTML・CSS ボタンをクリックした時に、入力フォームのすぐ下部に、「入力欄が空白です」というテキストメッセージが表 1 2022/04/27 16:25
- HTML・CSS CSSが効かずどのように指定すれば良いか分からないのでアドバイスお願い致します 2 2023/06/07 12:25
- JavaScript jqueryを使ったスムーススクロールのコードを書いたのですが、HTMLコード内にある、a butt 2 2022/04/14 10:59
- HTML・CSS flex の各子要素を横幅 100% にしたい 1 2022/09/22 21:25
- JavaScript ①入力フォーム→②確認表示画面→③送信完了画面のコードを書いているのです、 入力フォームから受け取っ 2 2022/05/10 16:45
- JavaScript jQueryでのドラッグアンドドロップについて 1 2022/07/30 09:10
関連するカテゴリからQ&Aを探す
おすすめ情報
デイリーランキングこのカテゴリの人気デイリーQ&Aランキング
-
jQueryで同じクラス名のものを...
-
ボタンを押すたびに交互に切り...
-
jQueryでのドラッグアンドドロ...
-
「画像クリックで音声再生」を ...
-
このコードは問題ないでしょうか。
-
デフォルト非表示にしたい。【t...
-
パララックスについて 上下に...
-
lightbox風のモーダルウィンド...
-
Javascript初心者|jQueryの.va...
-
画像の表示位置
-
MAX関数を使ってからLEFT JOIN...
-
前回の質問の続き
-
textareaに画像を表示したい
-
Javascriptで画像を水面のよう...
-
JavaScriptで変更した属性の元...
-
c++std::string型をTCHARに変換...
-
createElementで作成した要素を...
-
ダイアログから画像ファイルは...
-
画像が表示でnull; this.src
-
複数画像のランダム複数表示(...
マンスリーランキングこのカテゴリの人気マンスリーQ&Aランキング
-
デフォルト非表示にしたい。【t...
-
jQueryで同じクラス名のものを...
-
Colorboxがうまく設置できません
-
jQueryでのドラッグアンドドロ...
-
bxsliderで最初に縦に複数表示...
-
Javascript初心者|jQueryの.va...
-
画像マウスオーバーで、checkb...
-
アップロードファイルの種類に...
-
複数bxsliderをタブで切り替え...
-
JavaScriptでの画像切り替えを...
-
サムネイルにカーソルを合わせ...
-
時間差で画像を動作させたいjav...
-
マウスオーバーにて画像に虫眼...
-
「画像クリックで音声再生」を ...
-
JavaScriptでクレイアニメ。ち...
-
クリックでクリッカブルマップ...
-
JQueryでオープニングアニメー...
-
交互に入れ替わる画像を複数配置
-
JavaScript/CANVASでの画像読込...
-
VBAでIEを動かす場合、下記の①...
おすすめ情報