- ベストアンサー
画像のロールオーバー
画像のロールオーバーで下記のスクリプトを教えてもらいました。 画像aをマウスオーバーで画像a2に変わる クリックでオーバーした状態を保持（画像a2のまま） さらに、画像bをマウスオーバーで画像b2に変わり クリックでオーバーした状態を保持（画像b2のまま） そのクリック時、画像a2が画像aに変わる 実装できたのですが。 下記のソース２つテーブルが１つのhtml上にあり a～fまでg～iまで画像が分かれていて a～fをクリックし画像が変わった後 g～iをクリックするとa～fの画像が変わらないようにしたいのです。 二つのテーブルの画像を別々に考えたいのですが、できますでしょうか？ よろしくお願いします。 <html> <head> <style type="text/css"> <!-- img.group {width: 111px; height:50px;} --> </style> <script type="text/javascript"><!-- var img=['a.jpg,a2.jpg','b.jpg,b2.jpg','c.jpg,c2.jpg','d.jpg,d2.jpg','e.jpg,e2.jpg','f.jpg,f2.jpg','g.jpg,g2.jpg','h.jpg,h2.jpg','i.jpg,i2.jpg']; var elm=[]; var o_idx=-1; window.onload=function(){ var e=document.getElementsByTagName('IMG'); for (var i=0,j=0; i<e.length; i++) if (e[i].className=='group1') elm[j++]=e[i]; for (i=0; i<elm.length; i++){ elm[i].onmouseover=change(i,1); elm[i].onmouseout=change(i,0); elm[i].onclick=change(i,2); } } function change(idx,n){ return function(){ if (n > 1){ if (o_idx > -1) elm[o_idx].src=img[o_idx].split(',')[0]; elm[idx].src=img[idx].split(',')[1]; o_idx=idx; } else { if (idx != o_idx) elm[idx].src=img[idx].split(',')[n]; } };} // --></script> </head> <body> <table width="676" border="0" cellspacing="0" cellpadding="0"> <tr> <td width="111"><img src="a.jpg" width="111" height="50" border="0" class="group1"></td> <td width="2"></td> <td width="111"><img src="b.jpg" width="111" height="50" border="0" class="group1"></td> <td width="2"></td> <td width="111"><img src="c.jpg" width="111" height="50" border="0" class="group1"></td> <td width="2"></td> <td width="111"><img src="d.jpg" width="111" height="50" border="0" class="group1"></td> <td width="2"></td> <td width="111"><img src="e.jpg" width="111" height="50" border="0" class="group1"></td> <td width="2"></td> <td width="111"><img src="f.jpg" width="111" height="50" border="0" class="group1"></td> </tr> </table> <br> <table width="333" border="0" cellspacing="0" cellpadding="0"> <tr> <td width="111"><img src="g.jpg" width="111" height="50" border="0" class="group1"></td> <td width="2"></td> <td width="111"><img src="h.jpg" width="111" height="50" border="0" class="group1"></td> <td width="2"></td> <td width="111"><img src="i.jpg" width="111" height="50" border="0" class="group1"></td> </tr> </table> </body> </html>
- testid
- お礼率77% (41/53)
- JavaScript
- 回答数3
- ありがとう数3
- みんなの回答 （3）
- 専門家の回答
質問者が選んだベストアンサー
前回は動作内容が不明だったので、推測で作りましたが… 画像のペアが「c.jpg,c2.jpg」のように2がつくものがペアだという規則性があるなら、わざわざ最初に定義する必要はありませんね。 （ローカルで動かすとsrcがフルパスでfile://localhost～みたいな場合、正しく解釈しないブラウザがありますが、サーバにUPすれば動作すると思います。） ついでですが、同じスタイルのものはまとめて定義しておいたほうが、HTMLが見やすくなるし、後の修正も楽になるのでは？ <html> <head> <style type="text/css"> <!-- table {border:0; border-collapse: collapse; padding:0;} tr, td {margin:0; padding:0;} .group1, .group2 {width:111px; height:50px; border:0; margin:0 1px;} --> </style> <script type="text/javascript"> <!-- var elm=[]; var o_idx=[]; var img=[]; window.onload=function(){ var e=document.getElementsByTagName('IMG'); for (var i=0,j=0; i<e.length; i++){ if (e[i].className && e[i].className.substr(0,5)=='group'){ var num=e[i].className.substr(5); if (num=='') num='none'; if (!isNaN(num)) {o_idx[parseInt(num)]=-1; img[j]=e[i].src; elm[j++]=e[i];} };} for (i=0; i<elm.length; i++){ elm[i].onmouseover=change(i,1); elm[i].onmouseout=change(i,0); elm[i].onclick=change(i,2); } } function change(idx,n){ return function(){ var num=parseInt(elm[idx].className.substr(5)); var m1=img[idx].replace(/\.[A-Z0-9]{2,4}$/i,'2') + RegExp.lastMatch; if (n > 1){ if (o_idx[num] > -1) elm[o_idx[num]].src=img[o_idx[num]]; elm[idx].src=m1; o_idx[num]=idx; } else { if (idx != o_idx[num]) elm[idx].src=n?m1:img[idx]; } };} // --> </script> </head> <body> <table><tr> <td><img src="a.jpg" class="group1"></td> <td><img src="b.jpg" class="group1"></td> <td><img src="c.jpg" class="group1"></td> <td><img src="d.jpg" class="group1"></td> <td><img src="e.jpg" class="group1"></td> <td><img src="f.jpg" class="group1"></td> </tr></table> <br> <table><tr> <td><img src="g.jpg" class="group2"></td> <td><img src="h.jpg" class="group2"></td> <td><img src="i.jpg" class="group2"></td> </tr></table> </body> </html>
その他の回答 (2)
以下はゴミでした .imglist { list-style-type:none; margin:0px; padding:0px;} .imglist li { display:inline; margin:0px; padding:0px;line-height:normal;} .imglist li img { margin:0px; padding:0px; filter:'Alpha(opacity=100)'; opacity:1; } 削除してください。
まったく毛色がちがいますが・・。どうでしょう？ <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"> <title>サンプル</title> <style> #ps0 { background-color:#200; } #ps1 { background-color:#002; } .imglist { list-style-type:none; margin:0px; padding:0px;} .imglist li { display:inline; margin:0px; padding:0px;line-height:normal;} .imglist li img { margin:0px; padding:0px; filter:'Alpha(opacity=100)'; opacity:1; } </style> <body> <br> <div id="ps0"> <img src="./img/0.gif" width="111" height="50" alt="p0" class="hov"> <img src="./img/1.gif" width="111" height="50" alt="p1" class="hov"> <img src="./img/2.gif" width="111" height="50" alt="p2" class="hov"> <img src="./img/3.gif" width="111" height="50" alt="p3" class="hov"> <img src="./img/4.gif" width="111" height="50" alt="p4" class="hov"> <img src="./img/5.gif" width="111" height="50" alt="p5" class="hov"> </div> <div id="ps1"> <img src="./img/0.gif" width="111" height="50" alt="q0" class="hov"> <img src="./img/1.gif" width="111" height="50" alt="q1" class="hov"> <img src="./img/2.gif" width="111" height="50" alt="q2" class="hov"> <img src="./img/3.gif" width="111" height="50" alt="q3" class="hov"> <img src="./img/4.gif" width="111" height="50" alt="q4" class="hov"> <img src="./img/5.gif" width="111" height="50" alt="q5" class="hov"> </div> <script type="text/javascript"> //@cc_on; //全角空白は半角にでも /*@if(1)attachEvent('on'+ @else@*/addEventListener(/*@end@*/'load', function(){ var rr0 = new RegExp('\\b'+'hov'+'\\b'); var mm0; document./*@if(1)attachEvent('on'+ @else@*/addEventListener(/*@end@*/'mouseover', function (evt) { var o = evt./*@if(@_jscript) srcElement @else@*/ target /*@end@*/; if (mm0) { setOpacity.call(mm0.style, 100); m = null; } if (o.className && o.className.match(rr0)) {mm0 = o; setOpacity.call(mm0.style, 60);} }, false); function setOpacity(opacity) { /*@if (@_jscript) this.filter = 'Alpha(opacity=' + opacity + ')'; @else@*/ this.opacity = opacity / 100; /*@end@*/ } function MemoryClicker() { this.init.apply(this,arguments); } MemoryClicker.prototype.init = function(groupId, tagname, bgcol, alpha) { var n = document.createElement('div'); var s = n.style; this.gParent = document.getElementById(groupId); this.tagname = tagname.toUpperCase(); this.memory = null; setOpacity.call(s, alpha); s.backgroundColor = bgcol; s.position = 'absolute'; s.display = 'none'; this.screen = document.body.appendChild(n); document./*@if(1)attachEvent('on'+ @else@*/addEventListener(/*@end@*/'click', (function (cb_){ return function(evt){ cb_.checker(evt);};})(this), false); }; MemoryClicker.prototype.checker = function (evt) { var o = evt./*@if(@_jscript) srcElement @else@*/ target /*@end@*/; var p = (function(o, p){ return o ? o == p ? o: arguments.callee(o.parentNode,p): null;})(o, this.gParent); if(!p) return; if (this.memory) { this.screen.style.display = 'none'; this.memory = null; } if (o.tagName != this.tagname) return; with(this.screen.style) { top = getOffsetPosition(o,'Top') + 'px'; left = getOffsetPosition(o,'Left') + 'px'; width = o.offsetWidth + 'px'; height = o.offsetHeight + 'px'; display = 'block'; } return this.memory = o; function getOffsetPosition(element, par){ var ret = 0; while (element) { ret += element['offset'+par]|0; element = element.offsetParent; } return ret; } }; new MemoryClicker('ps0', 'img', 'red', 20); new MemoryClicker('ps1', 'img', 'blue', 20); }, false); </script>
お礼
ありがとうございました！ なんとか自力でできました。 でもソースが汚かったり、もっと整理できたりできるみたいでした＞＜ 回答ありがとうございます。
お礼
がんばってこのように作ったんですが 一応動作しました。ただ、ソースが汚いですよね？ ありがとうございました。参考にさせていただきます。 <style type="text/css"> <!-- img.group {width: 111px; height:50px;} --> <!-- img.grape {width: 111px; height:50px;} --> </style> var img=['ここに画像をいっぱい並べる']; var elm=[]; var o_idx=-1; var img2=['ここに画像をいっぱい並べる']; var elm2=[]; var o_idx2=-1; window.onload=function(){ var e=document.getElementsByTagName('IMG'); for (var i=0,j=0,k=0; i<e.length; i++) { if (e[i].className=='group1'){ elm[j++] =e[i];} else if (e[i].className=='grape1'){ elm2[k++]=e[i];} } for (i=0; i<elm.length; i++){ elm[i].onmouseover=change(i,1); elm[i].onmouseout=change(i,0); elm[i].onclick=change(i,2); } for (j=0; j<elm2.length; j++){ elm2[j].onmouseover=change2(j,1); elm2[j].onmouseout=change2(j,0); elm2[j].onclick=change2(j,2); } } function change(idx,n){ return function(){ if (n > 1){ if (o_idx > -1){elm[o_idx].src=img[o_idx].split(',')[0];} elm[idx].src=img[idx].split(',')[1]; o_idx=idx; }else{ if (idx != o_idx){elm[idx].src=img[idx].split(',')[n];} } } } function change2(idx2,n2){ //alert(elm.length);//警告文を出す（）の中身を出力()内には""を使用しない return function(){ if (n2 > 1){ if (o_idx2 > -1){elm2[o_idx2].src=img2[o_idx2].split(',')[0];} elm2[idx2].src=img2[idx2].split(',')[1]; o_idx2=idx2; }else{ if (idx2 != o_idx2){ elm2[idx2].src=img2[idx2].split(',')[n2];} } } }