imgPreviewのエラー

2023/08/10 15:43

このQ&Aのポイント

jQueryを使用してimgPreviewを実装した際に、'undefined' は Null またはオブジェクトではありませんというエラーメッセージが表示される。
imgpreview.jsの問題で、サムネイル画像のマウスオーバーでプレビューさせる部分が原因と考えられる。
サムネイル画像のロールオーバーは必要ないが、改善方法が分からないので、アドバイスを求めている。

ベストアンサー

imgPreviewのエラー

2010/11/19 17:34

jQueryでマウスオーバー時に画像を表示する imgPreviewを使用してホームページを作成しました。表示はうまくいったのですが、「'undefined' は Null またはオブジェクトではありません。」というエラーメッセージが出てしまいます。問題はimgpreview.jsのようで、サムネイル画像のマウスオーバーでプレビューさせる部分が原因？のようです。今回、サムネイル画像のロールオーバーは不要ですが改善方法が分かる方がいらっしゃいましたら、教えてください。ちなみに、以下のサイトを参考にして作成しました。 http://dispersalblog.blog90.fc2.com/blog-entry-206.html 【imgpreview.js】の中身 (function(c){c.expr[':'].linkingToImage=function(a,g,e){return!!(c(a).attr(e[3])&&c(a).attr(e[3]).match(/\.(gif|jpe?g|png|bmp)$/i))};c.fn.imgPreview=function(j){var b=c.extend({imgCSS:{},distanceFromCursor:{top:10,left:10},preloadImages:true,onShow:function(){},onHide:function(){},onLoad:function(){},containerID:'imgPreviewContainer',containerLoadingClass:'loading',thumbPrefix:'',srcAttr:'href'},j),d=c('<div/>').attr('id',b.containerID).append('<img/>').hide().css('position','absolute').appendTo('body'),f=c('img',d).css(b.imgCSS),h=this.filter(':linkingToImage('+b.srcAttr+')');function i(a){return a.replace(/(\/?)([^\/]+)$/,'$1'+b.thumbPrefix+'$2')}if(b.preloadImages){(function(a){var g=new Image(),e=arguments.callee;g.src=i(c(h[a]).attr(b.srcAttr));g.onload=function(){h[a+1]&&e(a+1)}})(0)}h.mousemove(function(a){d.css({top:a.pageY+b.distanceFromCursor.top+'px',left:a.pageX+b.distanceFromCursor.left+'px'})}).hover(function(){var a=this;d.addClass(b.containerLoadingClass).show();f.load(function(){d.removeClass(b.containerLoadingClass);f.show();b.onLoad.call(f[0],a)}).attr('src',i(c(a).attr(b.srcAttr)));b.onShow.call(d[0],a)},function(){d.hide();f.unbind('load').attr('src','').hide();b.onHide.call(d[0],this)});return this}})(jQuery);

joie
お礼率56% (25/44)

JavaScript
回答数1
ありがとう数1

みんなの回答 （1）
専門家の回答

質問者が選んだベストアンサー

ベストアンサー

yyr446
ベストアンサー率65% (870/1330)

2010/11/19 18:11 回答No.1

問題はimgpreview.jsのようで、本当にそうですか？ imgpreview.jsの中身を載せるよりあなたのおつくりになったHTMLとjavascript を載せた方が解決への近道だったりして、

質問者

お礼 2010/11/22 18:40

if (s.preloadImages) {　…　}を削除してみたら、エラーメッセージが出なくなりました。質問した時は慌てていたため… お騒がせしました。

質問者

補足 2010/11/19 18:45

文章が適切ではありませんでしたね。ネットサーフィンしていて、同じようなエラーメッセージが出ていた方がいて、よく分かりもせず原因はこれか？などと書いてしまいました。締切が迫っているのですが、また、時間をとって検証してみます。

関連するQ&A

個別では動く、javascriptのエラー
こちらで良いのか悩みましたが..... blogやHPを作った事があるというだけで、webshopの作りを友人にお願いされた初心者です。更新履歴用にFeed2JS、商品画像を表示する為にmootools、lightbox2をお借りして設置までは何とか行う事が出来、個別ではちゃんと動いているのですが、同じページではどちらかが動かなくなってしまいました。ブラウザにエラーコンソールを付けてみた所、mootoolsとrssにエラーがあると表示されていて、どの行がエラーなのかは分かりましたが、情けない話ですが何がエラーなのかが分かりません。 javascriptは見よう見まねで設置しており、コードの書き換えなどは画像サイズを変更するぐらいがやっとです。ネットや辞書で調べてみましたが、分からないまま弄ると余計におかしな事になり、怖くなってきました。周りに詳しい人もおらず、困ってしまいましたので、検索でみつけたこちらでお伺いする事にした次第です。エラー表示されるのは $(document).ready( function(){ $('.rss-items').innerfade({ animationtype: 'slide', speed: 750, timeout: 6000, type: 'sequence', containerheight: '1em' }); $('ul#portfolio').innerfade({ speed: 1000, timeout: 5000, type: 'sequence', containerheight: '220px' }); $('.fade').innerfade({ speed: 1000, timeout: 6000, type: 'random_start', containerheight: '1.5em' }); $('.adi').innerfade({ speed: 'slow', timeout: 5000, type: 'random', containerheight: '150px' }); }); の3行目 $('.rss-items').innerfade({ 長いので直接アドレスを貼ります http://pretto.kilo.jp/cos-pretto/js/mootools-1.2-core.js 345行目 Fx.Slide=new Class({Extends:Fx,options:{mode:'vertical'},initialize:function(a,b){this.addEvent('complete',function(){this.open=(this.wrapper['offset'+this.layout.capitalize()]!=0);if(this.open&&Browser.Engine.webkit419)this.element.dispose().inject(this.wrapper)},true);this.element=this.subject=$(a);this.parent(b);var c=this.element.retrieve('wrapper');this.wrapper=c||new Element('div',{styles:$extend(this.element.getStyles('margin','position'),{'overflow':'hidden'})}).wraps(this.element);this.element.store('wrapper',this.wrapper).setStyle('margin',0);this.now=[];this.open=true},vertical:function(){this.margin='margin-top';this.layout='height';this.offset=this.element.offsetHeight},horizontal:function(){this.margin='margin-left';this.layout='width';this.offset=this.element.offsetWidth},set:function(a){this.element.setStyle(this.margin,a[0]);this.wrapper.setStyle(this.layout,a[1]);return this},compute:function(a,b,c){var d=[];var x=2;x.times(function(i){d[i]=Fx.compute(a[i],b[i],c)});return d},start:function(a,b){if(!this.check(arguments.callee,a,b))return this;this[b||this.options.mode]();var c=this.element.getStyle(this.margin).toInt();var d=this.wrapper.getStyle(this.layout).toInt();var e=[[c,d],[0,this.offset]];var f=[[c,d],[-this.offset,0]];var g;switch(a){case'in':g=e;break;case'out':g=f;break;case'toggle':g=(this.wrapper['offset'+this.layout.capitalize()]==0)?e:f}return this.parent(g[0],g[1])},slideIn:function(a){return this.start('in',a)},slideOut:function(a){return this.start('out',a)},hide:function(a){this[a||this.options.mode]();this.open=false;return this.set([-this.offset,0])},show:function(a){this[a||this.options.mode]();this.open=true;return this.set([0,this.offset])},toggle:function(a){return this.start('toggle',a)}}); です。マヌケな質問かもしれませんが、参考になるページだけでも教えて頂けると凄く嬉しいです。
- ベストアンサー
- JavaScript
クリックを自動化
クリックを自動化ソースのクリック自動化を求めています。以下のソース（js）があります。 $(function() { $('a').click(function(e) { e.preventDefault(); var $this = $(this); var horizontalPadding = 30; var verticalPadding = 30; $('<iframe id="externalSite" class="externalSite" src="' + this.href + '" />').dialog({ title: ($this.attr('title')) ? $this.attr('title') : 'External Site', autoOpen: true, width: 1100, height: 2500, modal: true, resizable: true, autoResize: true, overlay: { opacity: 0.5, background: "black" } }).width(1100 - horizontalPadding).height(2500 - verticalPadding); }); }); aタグの文字をクリックしたときに行える処理なのですが…これをクリックされた時に呼び出されるのではなく、onloadなどで呼び出せれるようにしたいのですが、はっきり言って分かりません。大変困っております。ご助言をよろしくお願い致します。
- 締切済み
- JavaScript
jqueryについて
サムネイルをマウスオーバーすると#targetに拡大画像を表示するものなのですがマウスオーバーで切り替わりマウスアウトで元に戻るとこまではいいのですがフェードが全く効きません。いろいろ試したところ$(".thumbnail a img")に変えるとフェードはするのですが今度は画像が切り変わらなくなってしまいす。両者実装するにはどのように書き換えればいいのでしょうか？ $(document).ready(function() { var originSrc = $("#target").attr("src"); $(".thumbnail a") .fadeTo(1,1) .hover( function() { var changeSrc = $(this).attr("href"); $("#target").attr("src", changeSrc); $(this).fadeTo(200, 0.5); }, function() { $("#target").attr("src", originSrc); $(this).fadeTo(500, 1); } ) });
- 締切済み
- JavaScript
jQueryでの記述をjavascriptに
下記のjQueryの記述をライブラリ無しのjavascriptでの記述にしていただきたいです。 imgタグのsrc属性とaタグのhref属性を相対パスから絶対パスに動的に変換させる必要があるのですが、ある事情でjQueryを使えないとの事で困っています。どうかよろしくお願い致します。 <script type="text/javascript"> $(function(){ $('#hoge').children('img:not([src^=http])').each(function (){ var imgSrc = $(this).attr('src'); $(this).attr('src','http://xxxxxxxxxxxx' + imgSrc); }); $('#hoge').children('a[href^=○○○]').each(function (){ var aHref = $(this).attr('href'); $(this).attr('href','http://xxxxxxxxxxxx' + aHref); }); }); </script>
- 締切済み
- JavaScript
removeEventListenerの必要性
参考にしているJavaScriptのソースで下記のような部分があったのですが、 (画面に描画をするプログラムの一部です。動きとしてはマウスの動きに合わせて模様が描かれて残像が残って消えていきます。) j(b)関数の中の一行目でdocument.removeEventListener("mousemove", j, !1); としてmousemoveのイベントリスナーを削除しているのが何故なのか解らず困っています。メモリリークが発生するとかそういう問題なのでしょうか？ ----------------------------------------------------------------------- <script type="text/javascript"> (function() { function j(b) { document.removeEventListener("mousemove", j, !1); document.removeEventListener("touchstart", j, !1); y(b); var g = l - p * 0.5, f = m - q * 0.5, a = Math.sqrt(g * g + f * f), b = l + g / a * 150, a = m + f / a * 150, g = Math.atan2(f, g); g += Math.PI * (0.5 + Math.random() * 0.5) * (Math.random() > 0.5 ? 1 : -1); for (f = 0; f < z; f++) { for (var e = A[f].f, c = 0; c < r; c++) { var d = e[c], h = Math.PI * 0.15 / r * c + g, k = Math.cos(h) * (r - c) * 2, h = Math.sin(h) * (r - c) * 2; d.x = b; d.y = a; d.d = k; d.e = h } j = !1 } document.addEventListener("mousemove", y, !1); document.addEventListener("touchmove", y, !1); document.addEventListener("touchstart", K, !1); setInterval(L, 1E3 / 30) } ------------------------------------------------------------------------- 同じソースの中で window.onload = function(){ ・・・　　document.addEventListener("mousemove", j, !1); というようにイベントリスナーに登録しているところは見つかったので、これを削除しているのかとは思うのですが、何分未熟なもので、それがどういう意図によるものなのか理解できません。どなたか、知恵を貸して頂けないでしょうか？
- ベストアンサー
- JavaScript
画像を使用したタブを複数設置
下記、サイトを参考にタブ切り替え式のjQueryを設置しました。 http://web.showjin.me/2011/05/jquery_tab_image.html これを同じファイル内に複数設置したく同じscriptをjsファイルに3つコピーし設置しましたが、エラーで動かなくなったので各、ul.btn_tab li aのtab部分tab01、tab02、tab03とし、 .container_tabをcontainer_tab01～03、 a.selectedをa.selected01～03とそれぞれ変更してみました。上記の方法で動作は実現できたのですが、これをもっとスマートなscriptにする方法があればご教授頂けないでしょうか。どうぞ宜しくお願い致します。 id、classを修正し、以下を3パターン設置しています。 javascript ================ /* クリックしたときに出る点線を防ぐ（IE対策）*/ $(function(){ $("ul.btn_tab li a").focus(function(){ $(this).blur(); }); }) /* タブボタンのon/offとタブの内容を切り替える */ $(function(){ /* 初期設定 */ $("a.selected img").attr("src",$("a.selected img").attr("src").replace(/^(.+)(\.[a-z]+)$/,"$1_on$2")); $(".container_tab div:not("+$("ul.btn_tab li a.selected").attr("href")+")").hide(); /* クリック時の処理 */ $("ul.btn_tab li a").click(function(){ // 今のul.btn_tab li a.selectedのhrefの値を保持しておく var name1=$("ul.btn_tab li a.selected").attr("href"); $("a.selected img").attr("src",$("a.selected img").attr("src").replace(/^(.+)_on(\.[a-z]+)$/,"$1$2")); $("ul.btn_tab li a").removeClass("selected"); $(this).addClass("selected"); /* クリックした画像はmouseoverで_onが付けられているので、そのままだと_on_onとなり、画像へのパスが通らなくなる。なので、今付いている_onをいったん削除してから再度_onを付け直す */ $("img",this).attr("src",$("img",this).attr("src").replace(/^(.+)_on(\.[a-z]+)$/,"$1$2")); $("img",this).attr("src",$("img",this).attr("src").replace(/^(.+)(\.[a-z]+)$/,"$1_on$2")); // 保持しておいたhrefの値のdivの内容がフェードアウトしたら、クリックされたボタンのhrefの値のdivの内容をフェードインする $(name1).fadeOut(500,function(){ // クリックされたul.btn_tab li a.selectedのhrefの値を保持 var name2=$("ul.btn_tab li a.selected").attr("href"); $(name2).fadeIn(500); }); return false; }) }) /* マウスオーバー時の処理 */ $(function(){ $("ul.btn_tab a").mouseover(function(){ /* セレクタがついているかどうかの条件判断はマウスオーバーとマウスアウトのそれぞれに対して設定する。マウスオーバー時だけだと、クリックした後、マウスアウトするときに_onが外されて通常時の画像になってしまうため */ var className = $(this).attr('class'); if(className!='selected'){ $("img",this).attr("src",$("img",this).attr("src").replace(/^(.+)(\.[a-z]+)$/, "$1_on$2")) } }).mouseout(function(){ var className2 = $(this).attr('class'); if(className2!='selected'){ $("img",this).attr("src",$("img",this).attr("src").replace(/^(.+)_on(\.[a-z]+)$/,"$1$2")) } }) })
- ベストアンサー
- JavaScript
マウスオーバーとポップアップウィンドウを同時に行いたい
いつもお世話になっています。画像Ａにマウスオーバーすると、(画像Ａは表示されたまま)画像ＢとＣがある場所にそれぞれ表示され、さらに画像Ｃをクリックするとポップアップウィンドウが開く、という動作を行いたいです。下記ソースにてＡにマウスオーバー時Ｂが表示されることは実現できたのですが、Ｃを表示＆ポップアップウィンドウを開くための記述をどうすればいいのか分かりません。おそらくとんちんかんなことをしてしまっているのだと思いますが、お助けいただけないでしょうか？長くなり恐縮ですが記述させていただきます。 ───────────────────────────── <style type="text/css">  } </style> <script> window.onload = function() { var elm=document.getElementsByTagName('div'); for (var i=0; i<elm.length; i++){ if (elm[i].className=='photo'){ elm[i].onmouseover = function(){disp(this,1);} elm[i].onmouseout = function(){disp(this,0);} } } } function disp(el,d) { var f0=d?'画像B':'画像B_disp'; var f1=d?'画像B_disp':'画像B'; var e = el.firstChild; while (e){ if (e.className==f0) {e.className=f1; break;} e = e.nextSibling; } } function OpenWin(){ win=window.open("ポップアップウィンドウページ.html","new","width=200,height=500"); } </script> </head> <body> <div class="画像A"><img src="画像A.jpg"/> <div class="画像B"><img src="画像B.jpg"/></div> </div> </div> </body> ──────────────────────────── 上記ソースはhttp://oshiete1.goo.ne.jp/qa4725180.htmlで教えていただいたものを利用させていただいた結果です。お恥ずかしい限りですが、どうぞよろしくお願い致します。
- ベストアンサー
- JavaScript
ソース上に出てくる理解不能なコードについて
<script language="javascript" src="js/jquery.js" type="text/javascript"></script> <script language="javascript" src="js/jquery.rollover.js" type="text/javascript"></script> <script type="text/javascript" src="js/thickbox.js"></script> を利用してサイトを作成したら <head/>と<body>の間に <script language=javascript></script><script language=javascript></script> というコードが表示されます。これは何でしょうか？消す方法はあるでしょうか？
- ベストアンサー
- JavaScript
JavaScriptエラーが出ます…
2つのJavaScriptエラーが出て大変困っております。どなたか分かる方いらっしゃいませんでしょうか？ ※当方はJavaScriptは分かりません。検索にて調査いたしましたが、情けないですがもうお手上げ状態です。 ▼1つめ----------------------------------------------▼ メッセージ: 'null' は Null またはオブジェクトではありません。ライン: 8 文字: 3 コード: 0 コード内容　以下 var accordion=function(){ var tm=10; var sp=10; function slider(n){ this.nm=n; this.arr=[]; this.sel='' } slider.prototype.init=function(t,c,k){ var a,h,s,l,i; a=document.getElementById(t); h=a.getElementsByTagName('dt'); s=a.getElementsByTagName('dd'); l=h.length; for(i=0;i<l;i++){ var d=h[i]; this.arr[i]=d; d.onclick=new Function(this.nm+".process(this)"); if(k!=null&&c==i){this.sel=d.className=k} } l=s.length; for(i=0;i<l;i++){ var d=s[i]; d.maxh=d.offsetHeight; if(c!=i){d.style.height='0'; d.style.display='none'} } } slider.prototype.process=function(d){ var i,l; l=this.arr.length; for(i=0;i<l;i++){ var h=this.arr[i]; var s=h.nextSibling; if(s.nodeType!=1){s=s.nextSibling} clearInterval(s.timer); if(h==d&&s.style.display=='none'){ s.style.display=''; setup(s,1); h.className=this.sel} else if(s.style.display==''){setup(s,-1); h.className=''} } } function setup(c,f){c.timer=setInterval(function(){slide(c,f)},tm)} function slide(c,f){ var h,m,d; h=c.offsetHeight; m=c.maxh; d=(f==1)?Math.ceil((m-h)/sp):Math.ceil(h/sp); c.style.height=h+(d*f)+'px'; c.style.opacity=h/m; c.style.filter='alpha(opacity='+h*100/m+')'; if(f==1&&h>=m){clearInterval(c.timer)} else if(f!=1&&h==1){c.style.display='none'; clearInterval(c.timer)} } return{slider:slider} }(); ▲1つめここまで----------------------------------------------▲ ▼2つめ----------------------------------------------▼ メッセージ: 'obj.length' は Null またはオブジェクトではありません。ライン: 238 文字: 10 コード: 0 コード内容　以下 http://www.myulond.com/js.txt ▲1つめここまで----------------------------------------------▲ どうぞ、ご教授よろしくお願いいたします。
- 締切済み
- JavaScript
引数のない関数
何度もすいませんが教えてください。 function MM_preloadImages() { //v3.0 var d=document; if(d.images){ if(!d.MM_p) d.MM_p=new Array(); var i,j=d.MM_p.length,a=MM_preloadImages.arguments; for(i=0; i<a.length; i++) if (a[i].indexOf("#")!=0){ d.MM_p[j]=new Image; d.MM_p[j++].src=a[i];}} } 上記の関数ですが、 <body onLoad="MM_preloadImages('img/aaa.gif','img/bbb.gif','img/ccc.gif')> という使い方をしています。引数が宣言されていなくても成り立つのはなぜでしょうか。教えてください。
- ベストアンサー
- JavaScript