• 締切済み

このコードは問題ないでしょうか。

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>

みんなの回答

回答No.16

使えない文字。 onclick 属性の中で "&" と "<" と" >" は使えませんよ。 HTML5 ならエラー処理されますが、XHTML なら整形式違反でパースエラーです。 XHTML なら script 要素内に ”&"、"<" を書くこともできません。 XHTML に慣れないうちは気をつけましょう。

  • gorusura
  • ベストアンサー率59% (25/42)
回答No.15

そういえば、script要素のなかでは、何かと使えない文字があったような気もします……(HTMLなら。XHTMLは分かりません) 何かは分かりませんが、外部ファイル化するのがいいかもしれませんね。

回答No.14

ごめんなさいね。メモリーリークパターンについて addEvent の関数の中で process に関数を代入しています。 この関数がイベント発火で呼ばれた時に、そのスコープから外側、引数の中の element に html要素があります。 これが循環参照となっています。なので、 element = null; return process; のような形で関係を断ち切ると良いと思いますが、 その説明を上手にできないので強くも言えません。そして、だけどお奨めしません。 メモリーリークパターンは、解消されているとも言われましたが、「危ういものには近づかない」 かな?

  • gorusura
  • ベストアンサー率59% (25/42)
回答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/1228737912 こちらにある通りです。 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'; }

  • gorusura
  • ベストアンサー率59% (25/42)
回答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.preventDefault こちらと、ほぼ同じです。 ただし、stopPropagationが混じっています。 addEvent関数は、 イベントリスナに登録する関数です。

kiseki777
質問者

お礼

指摘通りに直したところちゃんと動きました。ありがとうございます。 今日は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.attributes http://jibun.atmarkit.co.jp/lskill01/rensai/dom05/dom01.html ★55行目のattr.name.toLowerCase(); attr.nameは属性の取得。 http://www.scollabo.com/banban/jsindex/sample/sample_298.html ★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.preventDefault https://developer.mozilla.org/ja/DOM/event.cancelable https://developer.mozilla.org/ja/DOM/event.stopPropagation イベント伝播(IE:「下から上に(イベントバブリング方式)」,IE以外:「上から下に(イベントキャプチャリング方式)」) ★81行目のelse if(evt.returnValue!==void 0)evt.returnValue=false; returnValueはモーダルダイアログウィンドウから返された値を指定または取得 http://e-words.jp/w/E383A2E383BCE38380E383ABE38380E382A4E382A2E383ADE382B0.html http://translate.google.co.jp/translate?hl=ja&sl=en&u=http://help.dottoro.com/ljxdnukm.php&ei=bpOvT5i-J6XRmAX3gqDFCQ&sa=X&oi=translate&ct=result&resnum=4&ved=0CDYQ7gEwAw&prev=/search%3Fq%3Dwindow.returnValue%25E3%2583%2597%25E3%2583%25AD%25E3%2583%2591%25E3%2583%2586%25E3%2582%25A3%25E3%2581%25A8%25E3%2581%25AF%2Bjavascript%26hl%3Dja%26biw%3D1163%26bih%3D546%26prmd%3Dimvns モーダルダイアログウィンドウを使わなくてもreturnValueは使えるのですか? ★86行目の例外処理について event.srcElement http://www.openspc2.org/JavaScript/reference4/event/srcElement/index.html 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.html ・エラーメッセージを受け取れる ・ループでエラーになる部分を簡潔な記述で対応して抜けられる だから、今までifで分けていた例外処理を全部tryで例外処理した方がいい。 ですね。 ★95行目のvoid(0)について window.event===void 0 ⇒ 「window.eventが存在しなければtrue、存在すればfalse」 これはこういうものだと形そのものをテクニックとして知ってればOKですよね。 http://detail.chiebukuro.yahoo.co.jp/qa/question_detail/q1210776097 ★103行目のelse if('handleEvent' in listener) http://builder.japan.zdnet.com/script/sp_javascript-kickstart-2007/20365320/ else if(handleEvent)でも良いということですね。 ★105行目のlistener.handleEvent.call(listener,evt) event.handleEvent:http://www.scollabo.com/banban/jsindex/sample/sample_096.html 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-check.html 自分を評価すると、jQuery なんて使い方がわかりません。 なのでLevel4の手前。 「上・中・下」で言えば、”下”! もっと精確に言うなら、”下の上”もしくは”中の下”あたりです。 上級者の方々の意見も聞きたいですよね。 そこですぐに質問をすると答えにくいでしょうから、忘れた頃にまた趣を変えて質問してみてはどうでしょう!? もうすでに200ポイントを・・・

kiseki777
質問者

お礼

>関数に、ある情報を渡すには、普段、引数として渡しますよね。 >実はそれ以外に、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-transitional.dtd"> <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>

  • gorusura
  • ベストアンサー率59% (25/42)
回答No.8

XHTMLはあまり詳しくありませんが…… それと、form action="GET" ではなく、form method="GET" では? https://box.yahoo.co.jp/guest/viewer?sid=box-l-ttqw5dhmp67ubidpgf4d6umsam-1001&uniqid=df5c7bca-202c-41b1-9f62-34a8ebd689c4&viewtype=detail こちらに色々修正したものを置いておきました。

kiseki777
質問者

お礼

>それと、form action="GET" ではなく、form method="GET" では? 間違えていました。 >こちらに色々修正したものを置いておきました。 imgの方は動きますが、inputの方は動かないみたいです。 知らないものがいろいろあるので、解読にしばらく時間がかかりそうです。 参考にさせていただきます。ありがとうございます。

回答No.7

さすがに深夜の連投は迷惑だろうと思って、今投稿。 slice 戻り値は Array。 あとアンパサンドアンパサンド。

kiseki777
質問者

お礼

いろいろとありがとうございます。 > </body> の直前にスクリプトを書いています。 これからは必ず</body> の直前に書くようにします。 > 関数 aaa のなかで、変更すべき id を取得できているのに、なぜループする!? 凄く無駄がありました。 rrrrr ()での配列の使い方が上手ですね。 このやり方を覚えておきます。 > // 画像がキャッシュに納まるならそれはそれで argumentsがキャッシュに何か影響を与えると思い調べたのですが・・・勘違いでした。 > jpeg って、重ねて表示できたっけ? サンプルで何となく付けた拡張子がjpegでした。 実践ではpngを使います。 > NS付きを調べてね。 https://developer.mozilla.org/ja/DOM/element.getElementsByTagNameNS 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%94%A8%E6%96%B9%E6%B3%95/

関連するQ&A

  • javascript setTimeout

    javascript初心者ですが、練習を兼ねて神経衰弱を作っています。 setTimeoutを使って「めくったカードが違う場合、少し時間を経過させてから元に戻す」 という動作を作りたいのですが、うまくいきません。 /--------------------------------------------------------/ <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>神経衰弱</title> <style type="text/css"> ul { width: 300px; list-style:none; margin: 0; padding: 0; } li { float:left; margin: 0; padding; 0: } img { vertical-align: bottom; /*上下隙間埋め*/ } #all { width: 300px; margin: 0px auto 0px; margin-top: 50px; } </style> </head> <body> <div id="all"> <ul> <li><img src="none.jpg" alt="3" width="100" height="100" id="c_1" onclick="conce('c_1')" /></li> <li><img src="none.jpg" alt="1" width="100" height="100" id="c_2" onclick="conce('c_2')" /></li> <li><img src="none.jpg" alt="4" width="100" height="100" id="c_3" onclick="conce('c_3')" /></li> <li><img src="none.jpg" alt="4" width="100" height="100" id="c_4" onclick="conce('c_4')" /></li> <li><img src="none_2.jpg" alt="" width="100" height="100"/></li> <li><img src="none.jpg" alt="2" width="100" height="100" id="c_5" onclick="conce('c_5')" /></li> <li><img src="none.jpg" alt="1" width="100" height="100" id="c_6" onclick="conce('c_6')" /></li> <li><img src="none.jpg" alt="2" width="100" height="100" id="c_7" onclick="conce('c_7')" /></li> <li><img src="none.jpg" alt="3" width="100" height="100" id="c_8" onclick="conce('c_8')" /></li> </ul> </div> <script type="text/javascript"> var card_c = 0; //数字が表示されているimgの数 var card_first; //altの数 var card_second; //altの数 var click_first; //開けた場所1 var click_second; //開けた場所2 function conce(aaa){ //クリックで無地に数字を表示 var imgId = document.getElementById(aaa);//クリックしたimgのid if(card_c==0){ //1枚目 imgId.src = imgId.alt+".jpg"; card_c++; card_first = imgId.alt; click_first=aaa; }else{//2枚目 imgId.src = imgId.alt+".jpg"; card_second = imgId.alt; click_second=aaa; if(card_first==card_second){ card_c=0; }else{ setTimeout("bunki()",500); card_c=0; } function bunki(){ document.getElementById(click_first).src="none.jpg"; document.getElementById(click_second).src="none.jpg"; } } } </script> </body> </html> /----------------------------------------------/ どこが間違っているのでしょうか。 よろしくお願いします。

  • javascript 神経衰弱

    javascriptを勉強し始めて間もない初心者です。 練習として神経衰弱を作ろうとしているのですが、うまく動いてくれません。 どこが間違っているのでしょうか。 /---------------------------------------------------------/ <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>神経衰弱</title> <style type="text/css"> ul { width: 300px; list-style:none; margin: 0; padding: 0; } li { float:left; margin: 0; padding; 0: } img { vertical-align: bottom; /*上下隙間埋め*/ } #all { width: 300px; margin: 0px auto 0px; margin-top: 50px; } </style> </head> <body> <div id="all"> <ul> <li><img src="none.jpg" alt="3" width="100" height="100" id="c_1" onclick="conce('c_1')" /></li> <li><img src="none.jpg" alt="1" width="100" height="100" id="c_2" onclick="conce('c_2')" /></li> <li><img src="none.jpg" alt="4" width="100" height="100" id="c_3" onclick="conce('c_3')" /></li> <li><img src="none.jpg" alt="4" width="100" height="100" id="c_4" onclick="conce('c_4')" /></li> <li><img src="none_2.jpg" alt="" width="100" height="100"/></li> <li><img src="none.jpg" alt="2" width="100" height="100" id="c_5" onclick="conce('c_5')" /></li> <li><img src="none.jpg" alt="1" width="100" height="100" id="c_6" onclick="conce('c_6')" /></li> <li><img src="none.jpg" alt="2" width="100" height="100" id="c_7" onclick="conce('c_7')" /></li> <li><img src="none.jpg" alt="3" width="100" height="100" id="c_8" onclick="conce('c_8')" /></li> </ul> </div> <script type="text/javascript"> var card_c = 0; //数字が表示されているimgの数 var card_first; //altの数 var card_second; //altの数 var click_first; //開けた場所1 var click_second; //開けた場所2 function conce(aaa){ //クリックで無地に数字を表示 var imgId = document.getElementById(aaa);//クリックしたimgのid if(card_c=0){ //1枚目 imgId.src = imgId.alt+".jpg"; card_c++; card_first = imgId.alt; click_first=aaa; }else{//2枚目 imgId.src = imgId.alt+".jpg"; card_second = imgId.alt; click_second=aaa; if(card_first==card_second){ card_c=0; }else{ document.getElementById(click_first).src="none.jpg"; document.getElementById(click_second).src="none.jpg"; card_c=0; } } } </script> </body> </html> /---------------------------------------------------------/ 流れとしては、 画像をクリック →1回目は数字画像表示 →2回目は1回目と同じ数字がそろえばそのまま、違えば数字画像を元に戻す。 というようにしたいです。 よろしくお願いします。

  • 神経衰弱 順番に裏返し

    javascript初心者ですが、練習のために神経衰弱を作っています。 簡単な骨組みはでき、要素を加えている最中なのですが、今足そうと思っている要素の書き方がわかりません。 足そうと思っているのは、 「全てカードをそろえたあと、順番にカードをひっくり返して、元に戻す」 という要素です。 setTimeoutを使って0.5秒ごとにカードを返すというコードを書いているつもりなのですが、うまくいきません。どうすればいいのでしょうか。 /-------------------------------------------------------------------------/ <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>神経衰弱</title> <style type="text/css"> ul { width: 300px; list-style:none; margin: 0; padding: 0; } li { float:left; margin: 0; padding; 0: } img { vertical-align: bottom; /*上下隙間埋め*/ } #all { width: 300px; margin: 0px auto 0px; margin-top: 50px; } </style> </head> <body> <div id="all"> <ul> <li><img src="none.jpg" alt="3" width="100" height="100" id="c_1" onclick="conce('c_1')" /></li> <li><img src="none.jpg" alt="1" width="100" height="100" id="c_2" onclick="conce('c_2')" /></li> <li><img src="none.jpg" alt="4" width="100" height="100" id="c_3" onclick="conce('c_3')" /></li> <li><img src="none.jpg" alt="4" width="100" height="100" id="c_4" onclick="conce('c_4')" /></li> <li><img src="none_2.jpg" alt="" width="100" height="100"/></li> <li><img src="none.jpg" alt="2" width="100" height="100" id="c_5" onclick="conce('c_5')" /></li> <li><img src="none.jpg" alt="1" width="100" height="100" id="c_6" onclick="conce('c_6')" /></li> <li><img src="none.jpg" alt="2" width="100" height="100" id="c_7" onclick="conce('c_7')" /></li> <li><img src="none.jpg" alt="3" width="100" height="100" id="c_8" onclick="conce('c_8')" /></li> </ul> </div> <script type="text/javascript"> var card_c = 0; //1枚目 var card_first; //altの数 var card_second; //altの数 var click_first; //開けた場所1 var click_second; //開けた場所2 var fullOpen = 0; //ワンペアで1追加 4でクリア function conce(aaa){ //クリックで無地に数字を表示 var imgId = document.getElementById(aaa);//クリックしたimgのid switch(card_c){ case 0: imgId.src = imgId.alt+".jpg"; card_c++; card_first = imgId.alt; click_first=aaa; break; case 1: imgId.src = imgId.alt+".jpg"; card_second = imgId.alt; click_second=aaa; card_c++; if(card_first==card_second){//揃ったら card_c=0; fullOpen++; }else{//揃わなかったら function bunki(){ document.getElementById(click_first).src="none.jpg"; document.getElementById(click_second).src="none.jpg"; card_c=0;//setTimeoutのあとだと待つ必要があるためココ } setTimeout(bunki,500);//0.5秒後閉じる } break; default: break; }//switch //全部そろえた時のアクション if(fullOpen==4){ alert("complete!"); //0.5秒ごとに裏返す 8回繰り返す for(var j=0;j<8;j++){ function resetAll(){ var i = 0; if(i<8){ document.getElementById('c_'+(i+1)).src="none.jpg"; i++; } }//resetAll setTimeout(resetAll,500); }//for fullOpen=0; }//if(fullOpen==4) }//function conce(aaa) </script> </body> </html> /-------------------------------------------------------------------------------/ よろしくお願いします。

  • javascript 神経衰弱 表に返す時間

    javascript初心者です。 練習で神経衰弱を作っていますが、わからないところがあるので質問させていただきます。 以下のような神経衰弱のスクリプトを書き、一応単純な骨組みは出来て、機能を追加しているところです。 今追加しようとしているのは、 「2枚のカードを表にしたときの表示時間中(0.5秒)に3枚目をクリックできないようにする」 です。 連打してクリックすると、2枚の判定をしている最中に3枚目をクリックしてしまい、スクリプトがおかしくなります。 これを解消したいのですが、うまい方法が思いつきません。 アドバイスいただければと思います。 /--------------------------------------------------------------/ <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>神経衰弱</title> <style type="text/css"> ul { width: 300px; list-style:none; margin: 0; padding: 0; } li { float:left; margin: 0; padding; 0: } img { vertical-align: bottom; /*上下隙間埋め*/ } #all { width: 300px; margin: 0px auto 0px; margin-top: 50px; } </style> </head> <body> <div id="all"> <ul> <li><img src="none.jpg" alt="3" width="100" height="100" id="c_1" onclick="conce('c_1')" /></li> <li><img src="none.jpg" alt="1" width="100" height="100" id="c_2" onclick="conce('c_2')" /></li> <li><img src="none.jpg" alt="4" width="100" height="100" id="c_3" onclick="conce('c_3')" /></li> <li><img src="none.jpg" alt="4" width="100" height="100" id="c_4" onclick="conce('c_4')" /></li> <li><img src="none_2.jpg" alt="" width="100" height="100"/></li> <li><img src="none.jpg" alt="2" width="100" height="100" id="c_5" onclick="conce('c_5')" /></li> <li><img src="none.jpg" alt="1" width="100" height="100" id="c_6" onclick="conce('c_6')" /></li> <li><img src="none.jpg" alt="2" width="100" height="100" id="c_7" onclick="conce('c_7')" /></li> <li><img src="none.jpg" alt="3" width="100" height="100" id="c_8" onclick="conce('c_8')" /></li> </ul> </div> <script type="text/javascript"> var card_c = 0; //1枚目 var card_first; //altの数 var card_second; //altの数 var click_first; //開けた場所1 var click_second; //開けた場所2 var fullOpen = 0; //ワンペアで1追加 4でクリア function conce(aaa){ //クリックで無地に数字を表示 var imgId = document.getElementById(aaa);//クリックしたimgのid if(card_c==0){ //1枚目 imgId.src = imgId.alt+".jpg"; card_c++; card_first = imgId.alt; click_first=aaa; }else{//2枚目 imgId.src = imgId.alt+".jpg"; card_second = imgId.alt; click_second=aaa; if(card_first==card_second){//揃ったら card_c=0; fullOpen++; }else{//揃わなかったら function bunki(){ document.getElementById(click_first).src="none.jpg"; document.getElementById(click_second).src="none.jpg"; } setTimeout(bunki,500);//0.5秒後閉じる card_c=0; } } //全部そろえた時のアクション if(fullOpen==4){ alert("complete!"); for(i=0;i<8;i++){ document.getElementById('c_'+(i+1)).src="none.jpg" } fullOpen=0; } } </script> </body> </html> /-------------------------------------------------------------/ よろしくおねがいします。

  • javascript src書き換え

    javascript 初心者なのですが、質問させてください。 クリックした画像を3.jpgに書き換えるというコードを書いたのですが、うまく動きません。 どこが違間違っているのでしょうか。 /-------------------------------------------------------------/ <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>神経衰弱</title> <style type="text/css"> ul { width: 300px; list-style:none; margin: 0; padding: 0; } li { float:left; margin: 0; padding; 0: } img { vertical-align: bottom; } #all { width: 300px; margin: 0px auto 0px; margin-top: 50px; } </style> </head> <body> <div id="all"> <ul> <li><img src="none.jpg" alt="3" width="100px" height="100px" id="c_1" onclick="conce(c_1)" /></li> <li><img src="none.jpg" alt="1" width="100px" height="100px" id="c_2" onclick="conce(c_2)" /></li> <li><img src="none.jpg" alt="4" width="100px" height="100px" id="c_3" onclick="conce(c_3)" /></li> <li><img src="none.jpg" alt="4" width="100px" height="100px" id="c_4" onclick="conce(c_4)" /></li> <li><img src="none_2.jpg" alt="" width="100px" height="100px" id="c_5"/></li> <li><img src="none.jpg" alt="2" width="100px" height="100px" id="c_6" onclick="conce(c_5)" /></li> <li><img src="none.jpg" alt="1" width="100px" height="100px" id="c_7" onclick="conce(c_6)" /></li> <li><img src="none.jpg" alt="2" width="100px" height="100px" id="c_8" onclick="conce(c_7)" /></li> <li><img src="none.jpg" alt="3" width="100px" height="100px" id="c_9" onclick="conce(c_8)" /></li> </ul> </div> <script type="text/javascript"> function conce(aaa){ document.getElementById("aaa").src = "3.jpg"; } </script> </body> </html> /-----------------------------------------------------------------------/ よろしくお願いします。

  • JavaScript - 月ごとに画像変化

    <script type="text/javascript"> <!-- var myimg = new Array(); myimg[0] = '<img src="a.jpg" alt="a.jpg" width="477" height="33">'; myimg[1] = '<img src="b.jpg" alt="b.jpg" width="477" height="33">'; myimg[2] = '<img src="c.jpg" alt="c.jpg" width="477" height="33">'; myimg[3] = '<img src="d.jpg" alt="d.jpg" width="477" height="33">'; myimg[4] = '<img src="e.jpg" alt="e.jpg" width="477" height="33">'; myimg[5] = '<img src="f.jpg" alt="f.jpg" width="477" height="33">'; myimg[6] = '<img src="g.jpg" alt="g.jpg" width="477" height="33">'; myimg[7] = '<img src="h.gif" alt="h.jpg" width="477" height="33">'; myimg[8] = '<img src="i.jpg" alt="i.jpg" width="477" height="33">'; myimg[9] = '<img src="j.jpg" alt="j.jpg" width="477" height="33">'; myimg[10] = '<img src="k.jpg" alt="k.jpg" width="477" height="33">'; myimg[11] = '<img src="l.jpg" alt="l.jpg" width="477" height="33">'; var mynow = new Date(); var mymonth = mynow.getMonth(); document.write("<center><img 'src="+myimg[mymonth ]+"'></center>"); // --></script> このようなものをHTML属性のBODY内に入れて、月ごとに画像を変化させるということを実現しています。 画像の変化自体はうまくいってますが、ブラウザの多くは [a.jpg]'> ("["と"]"は画像の端)という風に、右端に文字が出てしまいます。 試しに、2つの"'"を消せば []> という風に、画像が見つからない×印がついて表示も出来ません。 文字が出ないようにするにはどう対応するのでしょうか。 詳しい方アドバイスお願いします。 ちなみにJavascriptにこだわらず、月ごとに画像が変化できれば何でもいいです。

  • エラーが起きてしまいます

    アルバムページを作ろうと思っていたのですが どこが、どう間違っているのでしょうか? 一応表示はできていると思うのですが… <HTML> <HEAD> <TITLE></TITLE> <SCRIPT language=javascript> var prevObj = null function chBorder(elem,color) { if(prevObj != null) { prevObj.style.borderColor = "#ffffff" } prevObj = elem elem.style.borderColor = color } </SCRIPT> </HEAD> <BODY> <TABLE> <TBODY> <TR> <TD> <IMG onclick="myImg1.src=this.src" src="1.jpg" width="60"> <IMG onclick="myImg1.src=this.src" src="2.jpg" width="60"> <IMG onclick="myImg1.src=this.src" src="3.jpg" width="60"> <IMG onclick="myImg1.src=this.src" src="4.jpg" width="60"> <IMG onclick="myImg1.src=this.src" src="5.jpg" width="60"> </TD> </TR> <TR> <TD align="center"> <IMG id="myImg1" src="0.jpg" width="300"> </TD> </TR> </TBODY> </TABLE> </BODY> </HTML>

  • ローカルでは問題なく動くがサーバーにupするとおかしくなるロールオーバー

    会社のhpを作成中です。 ロールオーバーをしたいという事で、メニューをjsでロールオーバーさせる事にしました。 javascriptは初心者です。 本を見て、コードを打ちました。 が、PC上では問題なく動くのですが、サーバーに乗せるとおかしくなります。 リストにマウスを乗せた状態にするとaltのテキストが表示されてしまうのです。 色々調べてみましたが、どうしても分かりません。 分かる方がおられたら是非教えてください。 xhmtl <ul id="nav"> <li><a href="news.html"><img src="image/news.gif" class="Hover" alt="更新情報" width="255" height="34" /></a></li> <li><a href="profile.html"><img src="image/profile.gif" class="Hover" alt="会社概要" width="255" height="34" /></a></li> <li><a href="works.html"><img src="image/works.gif" class="Hover" alt="営業種目" width="255" height="34" /></a></li> <li><a href="staff.html"><img src="image/staff.gif" class="Hover" alt="スタッフ" width="255" height="34" /></a></li> <li><a href="office.html"><img src="image/office.gif" class="Hover" alt="営業所" width="255" height="34" /></a></li> <li><a href="extra.html"><img src="image/extra_over.gif" class="Hover" alt="臨時情報" width="255" height="34" /></a></li> </ul> js //p = console.log; window.onload = function(){ var conf = { className : 'Hover', postfix : '_over' }; var imgNodeList = getElementsByClassName(conf.className); var node; for (var i=0, len=imgNodeList.length; i<len; i++) { node = imgNodeList[i]; node.originalSrc = node.src; node.rolloverSrc = node.originalSrc.replace(/(\.gif|\.jpg|\.png)/, conf.postfix+"$1"); preloadImage(node.rolloverSrc); node.onmouseover = function(){ this.src = this.rolloverSrc; }; node.onmouseout = function(){ this.src = this.originalSrc; }; } }; //クラス名によるエレメントノード配列取得 function getElementsByClassName(name){ var elements = []; var allElements = document.getElementsByTagName('*'); for (var i=0, len=allElements.length; i<len; i++) { if (allElements[i].className == name){ elements.push(allElements[i]); } } return elements; } //プリロード preloadedImages = []; function preloadImage(url){ var p = preloadedImages; var l = p.length; p[l] = new Image(); p[l].src = url; }

  • changeImgによる画像の入れ替え時のIEにおける不安定さ

    changeImgで画像を入れ替えたいのですが、 FireFoxでは問題ないのですが、 IEだと、画像が表示されない、半分だけ表示される、等の現象が発生してしまいます。 表示されないときに右クリックの画像を表示するにすると表示されます。 http://inoue.sub.jp/test/ ソースは ************************** function changeImg(iName,img){ document.images[iName].src=img; } ************************** <img height="344" border="0" width="230" name="tar01" id="tar01" alt="" src="img/01.jpg"/> <a onclick="changeImg('tar01','img/01.jpg');" onmouseout="changeImg('tar02','img/07.jpg')" onmouseover="changeImg('tar02','img/08.jpg');" href="javascript:void(0);"> <img height="83" border="0" width="50" name="tar02" id="tar02" alt="" src="img/07.jpg"/></a> <a onclick="changeImg('tar01','img/02.jpg');" onmouseout="changeImg('tar03','img/09.jpg')" onmouseover="changeImg('tar03','img/10.jpg');" href="javascript:void(0);"> <img height="83" border="0" width="50" name="tar03" id="tar03" alt="" src="img/09.jpg" class="pl5"/></a> になります。 何処がおかしいのでしょうか?どうぞよろしくお願いいたします。

  • JQUERY slideshowについて

    slide-show.jsについての質問です。 ホームページのトップイメージにスライドショーで3枚の写真を動かしています。 で、トップページの写真を9枚にして、左3枚・真ん中3枚・右3枚というふうに動かしたいです。 トップイメージの写真(幅900px)3枚を トップイメージの写真(幅300px)×3を3枚スライドにする (意味不明ですか・・・) 下の#slideshow01を#slideshow02、#slideshow03に増やして、設置したら動きませんでした。 出来れば、右→真ん中→左がちょっと時差をつけてスライドして欲しいです。 写真の切り替えは、CSSのZーindexを使っています。 現在のHTML <div id='slideshow01'> <!--スライドショーの3枚ここ!--> <img src="upimg/results/flash_1.jpg" alt="" width="300" height="400" /> <img src="upimg/results/flash_2.jpg" alt="" width="300" height="400" /> <img src="upimg/results/flash_3.jpg" alt="" width="300" height="400" /> <!--スライドショーの3枚終わり--> </div> 求めるHTML <div id='slideshow01'> <!--スライドショーの3枚ここ!--> <img src="upimg/results/flash_1.jpg" alt="" width="300" height="400" /> <img src="upimg/results/flash_2.jpg" alt="" width="300" height="400" /> <img src="upimg/results/flash_3.jpg" alt="" width="300" height="400" /> <!--スライドショーの3枚終わり--> </div> <div id='slideshow02'> <!--スライドショーの3枚ここ!--> <img src="upimg/results/flash_4.jpg" alt="" width="300" height="400" /> <img src="upimg/results/flash_5.jpg" alt="" width="300" height="400" /> <img src="upimg/results/flash_6.jpg" alt="" width="300" height="400" /> <!--スライドショーの3枚終わり--> </div> <div id='slideshow03'> <!--スライドショーの3枚ここ!--> <img src="upimg/results/flash_7.jpg" alt="" width="300" height="400" /> <img src="upimg/results/flash_8.jpg" alt="" width="300" height="400" /> <img src="upimg/results/flash_9.jpg" alt="" width="300" height="400" /> <!--スライドショーの3枚終わり--> </div> この js を使っています。 function slideSwitch() { var $active = $('#slideshow01 img.active'); if ( $active.length == 0 ) $active = $('#slideshow01 img:last'); var $next = $active.next().length ? $active.next() : $('#slideshow01 img:first'); $active.addClass('last-active'); $next.css({opacity: 0.0}) .addClass('active') .animate({opacity: 1.0}, 1000, function() { $active.removeClass('active last-active'); }); } $(function() { setInterval( "slideSwitch()", 4000 ); });