jQueryクリックデータの渡し方とは？
- jQueryのクリックデータの渡し方について説明します。
- 特定のHTML要素をクリックすると、新しいサブウィンドウが生成されて表示される仕組みを実装しています。
- 上記のスクリプトは、クリックされた画像のデータを取得し、表示する役割を持っています。
- ベストアンサー
jquery クリックデータの渡し？
元htmlの <li><img src="●●" title="●●"></li> をクリックするとそのデータを新規サブウィンドウを生成し表示することをしています。 そこで、使用している以下のスクリプト部分の役割や意味など説明できる方がいらっしゃいましたら教えてください。お願いします。 var Class = function ( elem, options ) { elem.data ( p, this ); elem.find('img').each ( function(index) { $(this).click ( function() { openThumbnail ( options, elem.find('img'), $(this) ) var adn = $(this).attr('src') }).mouseover ( function() { $(this).css ( 'cursor', 'pointer' ); }); }); };
- eeiina
- お礼率50% (27/54)
- JavaScript
- 回答数3
- ありがとう数2
- みんなの回答 （3）
- 専門家の回答
質問者が選んだベストアンサー
こんにちは。 安易な考え方ですが以下のように実装してみました。 writeln ( '<img src="' + iniSrc + '" id="srcon" onload="this.style.display=\'block\'" onerror="this.style.display=\'none\'" />' ); _on画像表示のタグの部分を以上のようにしてみてください。 動作原理は読み込みしてエラーだった場合は非表示としています。
その他の回答 (2)
- LancerVII
- ベストアンサー率51% (1060/2054)
こんにちは。 遅くなりました。 新しいウィンドウを生成している部分を抜き出して回答します。 function openThumbnail ( options, $obj, $selectImage ) { var postfix = '_on'; var ulLeft = options.wid + 10; var winOptions = 'status=yes,width=' + options.winW + ',height=' + options.winH + ',scrollbars=' + (options.winS ? 'yes' : 'no'); if ( win !== undefined && !win.closed ) { win.close(); } win = window.open ( '', 'subwinthumbnail', winOptions ); var selSrc = $selectImage.attr('src'); var iniSrc = selSrc.substr(0, selSrc.lastIndexOf('.')); iniSrc += postfix; iniSrc += selSrc.substring(selSrc.lastIndexOf('.')); with ( win.document ) { open(); writeln ( '<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">' ); writeln ( '<html xmlns="http://www.w3.org/1999/xhtml">' ); writeln ( '<head>' ); writeln ( '<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />' ); writeln ( '<meta http-equiv="Content-Script-Type" content="text/javascript" />' ); writeln ( '<meta http-equiv="Content-Style-Type" content="text/css" />' ); writeln ( '<title>' + options.title + '</title>' ); writeln ( '<link rel="stylesheet" href="./subwinthumbnail.css" type="text/css" />' ); writeln ( '<script type="text/javascript">' ); writeln ( 'function changeImage(src,title,srcon) {' ); writeln ( 'document.getElementById("selimg").src = src;' ); writeln ( 'document.getElementById("seltitle").innerHTML = title;' ); writeln ( 'document.getElementById("srcon").src = srcon;') writeln ( '}' ); writeln ( '</script>' ); writeln ( '<style type="text/css">' ); writeln ( 'body#subwin #thumbnail ul { position:absolute;top:0px;left:' + ulLeft + 'px; }' ); writeln ( 'body#subwin #thumbnail p#seltitle { width:' + options.wid + 'px; }' ); writeln ( '</style>' ); writeln ( '</head>' ); writeln ( '<body id="subwin">' ); writeln ( '<div id="thumbnail">' ); writeln ( '<div class="main">' ); writeln ( '<img src="' + $selectImage.attr('src') + '" id="selimg">' ); writeln ( '<p id="seltitle">' + $selectImage.attr('title') + '</p>' ); writeln ( '<img src="' + iniSrc + '" id="srcon" />' ); writeln ( '</div>' ); writeln ( '<ul>' ); $obj.each ( function(index) { var src = $(this).attr('src'); var title = $(this).attr('title'); var srcon = src.substr(0, src.lastIndexOf('.')); srcon += postfix; srcon += src.substring(src.lastIndexOf('.')); var clickStr = "changeImage('" + src + "','" + title + "','" + srcon + "');"; writeln ( '<li>' ); writeln ( '<img src="' + src + '" width="' + options.twid + '" onclick="' + clickStr + '">' ); writeln ( '</li>' ); }); writeln ( '</ul>' ); writeln ( '</div>' ); writeln ( '</body>' ); writeln ( '</html>' ); close(); } } やりたいことはこういうことでしょうか。 違っていたら補足ください。
補足
まさにこの通りです、的確なご回答ありがとうございます。 補足ですが、すべての画像に_onが用意されているわけではないので、無い場合ブラウザで×表示されてしまいます。 そこで、_on画像がある場合のみ処理を行う、または_on画像がない場合はその領域を非表示にするといったことは可能でしょうか。
- LancerVII
- ベストアンサー率51% (1060/2054)
こんにちは。 なんか見覚えがあるソースです。 このソースはjQueryのプラグインとして作っています。 elemには.html側で指定した要素が入ってきます。 optionsには.html側で指定したオプションが入ってきます。 $('#thumbnail').subwinthumbnail ({ title:'サムネイル別ウィンドウ', // サブウィンドウのタイトル(デフォルト:'') wid:480, // メイン画像の横サイズ(デフォルト:480) hei:360, // メイン画像の縦サイズ(デフォルト:360) winW:710, // サブウィンドウの横サイズ(デフォルト:800) winH:700, // サブウィンドウの縦サイズ(デフォルト:600) winS:false, // スクロールバーの表示(デフォルト:false trueで表示,falseで非表示) twid:200 // サムネイル画像の横サイズ(デフォルト:120) }); この部分がoptionsに入ってきます。 この部分はelemのなかにあるimgタグについてすべて処理を行います。 elem.find('img').each ( function(index) { // elem内にあるimg分のループ $(this).click ( function() { // imgのclickイベントにopenThumbnailが実行されるように設定 openThumbnail ( options, elem.find('ul li img'), $(this) ); }).mouseover ( function() { // imgのmouseoverイベントでカーソルが指になるように設定 $(this).css ( 'cursor', 'pointer' ); }); }); すなわち、$('#thumbnail')内にあるimgに対してクリックされたらopenThumbnailを実行するように、 オンマウス時にカーソルが指になるようにという処理をしています。
お礼
ありがとうございます！LancerVII様にぜひご質問したいと思っていました！ その節はお世話になりました。 実は以前いただいたスクリプトに改良を加えた別パターンを作りたく、四苦八苦していました。 質問にだした部分が関わっているのではないかと思い今回質問させて頂きました。 形は同じなのですが、htmlのほうでred.jpgをクリックしたときにサブウィンドウに表示される拡大画像の下に別に用意しておいたサブ画像red_on.jpgを追加で表示したいのです。 サブウィンドウのサムネイルをクリックしたときも同じく拡大画像に応じた_onの付いた画像に切り替えたいのです。 自分で手を加えてみたのですが、間違えているかもしれないですがサブウィンドウ上の切替は動きました。ですが最初にサブウィンドウが開いた画面でサブ画像が表示されず、行き詰ってしまいました。 切替のところまでやってみたソースです↓（手を加えた部分のみ抜粋） ---------------------------------------------------------------- writeln ( 'function changeImage(src,title,srcon) {' ); ←srconを加えました writeln ( 'document.getElementById("selimg").src = src;' ); writeln ( 'document.getElementById("seltitle").innerHTML = title;' ); writeln ( 'document.getElementById("sizeimg").src = srcon;' ); ←追加 writeln ( '<div class="main">' ); writeln ( '<img src="' + $selectImage.attr('src') + '" id="selimg">' ); writeln ( '<p id="seltitle">' + $selectImage.attr('title') + '</p>' ); writeln ( '<img src="' + $selectImage.attr('srcon') + '" id="sizeimg">' ); ←追加 writeln ( '</div>' ); writeln ( '<ul>' ); $obj.each ( function(index) { var src = $(this).attr('src'); var title = $(this).attr('title'); var postfix = '_on'; ←追加 var srcon = src.substr(0, src.lastIndexOf('.')) ←追加 + postfix ←追加 + src.substring(src.lastIndexOf('.')); ←追加 var clickStr = "changeImage('" + src + "','" + title + "','" + srcon +"');"; ←srcon追加 writeln ( '<li>' ); writeln ( '<img src="' + src + '" width="' + options.twid + '" onclick="' + clickStr + '">' ); writeln ( '</li>' ); }); writeln ( '</ul>' ); html（そのままです） <body> <div id="thumbnail"> <div class="main"><img src="red.jpg" title="赤"></div> <ul> <li><img src="blue.jpg" title="青"></li> <li><img src="winter.jpg" title="冬"></li> <li><img src="green.jpg" title="緑"></li> </ul> </div> そして別に画像のみ用意（red_on.jpg/blue_on.jpg/winter_on.jpg/green_on.jpg） --------------------------------------------------------------- elemかopenThumbnailの部分にサブ画像も表示させる何かを追加する形になるのでしょうか？ お忙しい所申し訳ないのですがヒントをいただけないでしょうか、よろしくお願いします。
関連するQ&A
- jqueryサブウィンドウにて画像切替サブ画像表示
質問お願いします。 元ページのサムネイル画像をクリックすると サブウィンドウが開き、この中でクリックした先ほどサムネイルの拡大画像を表示、他のサムネイル画像も表示し、サムネイルをクリックで拡大画像を切り替え、それぞれの画像に応じたサブ画像も表示させたいと思っています。 一番はクリックデータをサブウィンドウにもっていく方法がわかりません。 イメージで元ページ内での切替をやってみました <style> li img{width:100px;height:100px;} </style> ----jquery----- <script type="text/javascript"> $(function(){ $('li img').click( function(){ $('#main img').attr('src',$(this).attr('src')); $('#sub').text($(this).attr('title')); var postfix = '_on'; var src = $(this).attr('src'); var src_on = src.substr(0, src.lastIndexOf('.')) + postfix + src.substring(src.lastIndexOf('.')); $('#sub2 img').attr('src',src_on); }); }); </script> ---html---- <ul> <li><img src="red.jpg" title="赤"></li> <li><img src="blue.jpg" title="青"></li> <li><img src="winter.jpg" title="冬"></li> <li><img src="green.jpg" title="緑"></li> </ul> <div id="main"><img src="red.jpg" id="mainimg"></div> <p id="sub">赤</p> <p id="sub2"><img src="red_on.jpg"></p> 質問が分かりづらいかもしれませんが、よろしくお願いします。
- ベストアンサー
- JavaScript
- jQueryのclickイベントハンドラ
最近jQueryを勉強中でして、練習の意味で自分で以下のようなページを作ってみました。 【ページの内容】 犬、猫、鳥の画像ボタンを配置して、クリックすると各ボタンのalt属性をアラート表示する 【実際のhtml】 <div class="header"> <ul class="menu"> <li><a href="index.html" id="btn1"><img src="dog.png" alt="Dog"></a></li> <li><a href="index.html" id="btn2"><img src="cat.png" alt="Cat"></a></li> <li><a href="index.html" id="btn3"><img src="bird.png" alt="Bird"></a></li> </ul> </div> 【実際のscript】 $(function(){ var btn1 = $('#btn1'); var photo1 = btn1.find('img'); var name1 = photo1.attr('alt'); btn1.click(function(){ alert(name1); }); var btn2 = $('#btn2'); var photo2 = btn2.find('img'); var name2 = photo2.attr('alt'); btn2.click(function(){ alert(name2); }); var btn3 = $('#btn3'); var photo3 = btn3.find('img'); var name3 = photo3.attr('alt'); btn3.click(function(){ alert(name3); }); }); 上記で一応やりたいことは再現はできるのですが、scriptが冗長なのでもっと短くしたいです。 しかしどんなスクリプトにすればよいかわかりません。 宜しければアドバイスお願いいたします。
- ベストアンサー
- JavaScript
- JQueryを使ってcssを書き換え
何となくコードを見てさわる程度の初心者です。 以下のようなソースを組みました。 <div id="slide"> <a href="01.htm"><img src="01.jpg" alt="01" id="alttxt" /></a> </div> <div id="slidenavi"> <ul> <li><a href="01.html"><img src="s_01.jpg" alt="01" class="b_01.jpg" /></a><span class="active"></span></li> <li><a href="02.htm"><img src="s_02.jpg" alt="02" class="b_02.jpg" /></a><span class="active"></span></li> <li><a href="03.html"><img src="s_03.jpg" alt="03" class="b_03.jpg" /></a><span class="active"></span></li> </ul> </div> #slideがメインエリアで、#slidenaviがメインエリアの画像とリンク先を切り替えるナビゲーションボタンになっています。 ナビに連動したメインエリア用の画像ファイル名は #slidenavi の img の classに入れておいて、それを読み込んで代入するというおかしなやり方で呼び出していますが、ここまではうまくいきました。 問題はここからです。 最初の状態では<span class="active"></span>はcssの設定でdisplay: noneとしてあります。 そして#slidenaviのボタンにマウスが乗ると、その部分の<span class="active"></span>をdisplay: blockとして表示したいのですが、これがどうしてもうまくいきません。 この部分も含めて、おかしな書き方になっている部分があれば教えてもらえないでしょうか。 jsファイルは以下の通りです。 $(function(){ $('#slidenavi ul li a').fadeTo(0,0.4); $('#slidenavi ul li a').hover(function(){ $(this).fadeTo(300,1.0); }, function(){ $(this).fadeTo(300,0.4); }) $('#slidenavi ul li img').mouseover(function(){ var bglink = $(this).attr("class"); var altTxt = $(this).attr("alt"); $("#slide img").attr("src","images/home/main/"+bglink); $("#slide img").attr("alt",altTxt); $("#slide span.active").css("display","block"); }); $('#slidenavi ul li a').mouseover(function(){ var Href = $(this).attr('href'); var Tget = $(this).attr('target'); $("#slide a").attr("href", Href); $("#slide a").attr("target", Tget); $("#slide a").click(function() { window.open(Href,'_self'); return false; }); }); });
- ベストアンサー
- JavaScript
- jqueryについて
jqueryについて こんな内容のjqueryをひとつにまとめて、なおかつ01～99（実績数）までのidを割り振る設定したいのですが可能でしょうか？ 例えば $(function(){ $("#navi01-99 a").click(function(){ $("#main01-99 img").attr("src",$(this).attr("href")); return false; }); みたいな感じであとはidに番号を付ければいいみたいな・・・出来ませんでしょうか？ 用途は仕事の制作実績で使用したいのですが、どなたか教えていただけますでしょうか？ $(function(){ $("#navi01 a").click(function(){ $("#main01 img").attr("src",$(this).attr("href")); return false; }); }); $(function(){ $("#navi02 a").click(function(){ $("#main02 img").attr("src",$(this).attr("href")); return false; }); }); $(function(){ $("#navi03 a").click(function(){ $("#main03 img").attr("src",$(this).attr("href")); return false; }); }); $(function(){ $("#navi04 a").click(function(){ $("#main04 img").attr("src",$(this).attr("href")); return false; }); }); $(function(){ $("#navi05 a").click(function(){ $("#main05 img").attr("src",$(this).attr("href")); return false; }); });
- ベストアンサー
- AJAX
- 初心者です jQueryのマウスオーバーについて
jQueryを使った画像を使ったメニューを作成しています。 <ul class="drop2">をマウスオーバーしたときに親の位置にある画像１.gifが画像１_o.gifに 切り替わるようにしたいと思っています。 調べながら作ってみたのですが、画像の切替がうまくいきません。 parentを使わずに画像1.gifをdivで囲って指定すれば切り替わったのですが、2つ以上メニューを 作ると、他のulにマウスオーバーしたときも切り替わってしまいます。 ご教授して頂けると嬉しいです。 よろしくお願いいたします。 ■スクリプト部分 jQuery(function ($) { $('ul.drop2').mouseover(function () { // console.log('mouseover'); デバック用 var onSrc = $（this).parent('ul.drop1 a img').attr('src').replace('.gif', '_o.gif'); $（this).parent('ul.drop1 a img').attr('src', onSrc); }); $('ul.drop2').mouseout(function () { var onSrc =$（this).parent('ul.drop1 a img').attr('src').replace('_o.gif', '.gif'); $（this).parent('ul.drop1 a img').attr('src', onSrc); }); }); ■html部分 <ul class="drop1"> <li><a href="/"><img src="画像1.gif" alt="HOME" /></a> <ul class="drop2"> <li><a href="#"><img src="画像1-1.gif" alt="HOME" /></a></li> <li><a href="#"><img src="画像1-2.gif" alt="HOME" /></a></li> </ul> </li> </ul>
- ベストアンサー
- JavaScript
- jqueryの質問です
jqueryで .tes01と.tes02は同じ番目をセットと考え .tes01 の画像をクリックした時に .tes02のリンクをクリックした状態にしたいと思っています。 .tes02のURLの取得は出来たのですがそれ以降が出来ないので教えてもらえますでしょうか。 $(function(){ $("ul.tes01 li").click(function(){ var tes01li = $(this).index(); var tes02li = $(".tes02 li").find("a").eq(tes01li).attr("href"); tes02li.click(); }); }); <ul class="tes01"> <li><img src="img01"></li> <li><img src="img02"></li> <li><img src="img03"></li> <li><img src="img04"></li> </ul> <ul class="tes02"> <li><a href="#link01">link01</a></li> <li><a href="#link02">link02</a></li> <li><a href="#link03">link03</a></li> <li><a href="#link04">link04</a></li> </ul>
- ベストアンサー
- JavaScript
- jQueryの$(this)について
閲覧ありがとうございます。 初歩的な質問で申し訳ないのですがthisのことがすこし混乱してしまい、わからなくなってしまったので下記の場合のthisはどこを読み込むか教えてもらえると助かります。 目的：aをクリックしたときimgのsrcにaのhrefに指定してあるものを埋め込む処理 $(function(){ $("a").click(function(){ $("ul li img").fadeOut(function(){ $(this).attr(src,$("a").attr("href")).fadeIn(); }); return false; });
- ベストアンサー
- JavaScript
- jQuery マウスオーバーのたびに処理を繰り返す
よろしくお願いします。 jQueryを使用して、「サムネイルにマウスを乗せると別のDiv内に大きい画像とtitle属性のテキストを表示させる」というものを作ろうとしています。 別のDiv要素には上下左右中央に画像を表示させたいと思い、見よう見まねで下記のようなコードを作成したのですが、表示される画像がサムネイル時の大きさに縮小されてしまい、元の大きさの画像として表示されません。（サムネイルには元画像をcssで縮小して表示しています） やりたいことは以下の２つです。 ・Div要素には元画像の大きさで表示させたい。 ・できれば、フェードイン・アウトで画像を切り替えたい。 色々調べてみたのですが行き詰ってしまい、こちらに質問させて頂きました。 お分かりになる方がいらっしゃいましたら、お知恵をお貸し頂けませんでしょうか。 ////スクリプト//// $(function(){ $('#contents li a').click(function(){ return false; }); $('#contents li a').mouseover(function(){ var $title = $(this).children('img').attr('title'); var w = $(this).children('img').width(); var h = $(this).children('img').height(); $('#photo img').attr('src',$(this).attr("href")); $('#photo span').text($title); var mtop = (h/2)*(-1); var mleft = (w/2)*(-1); $('#photo img').css({"width": + w + "px" ,"height": + h + "px" , "top": "50%" , "left": "50%" , "margin-top": + mtop + "px" , "margin-left": + mleft+ "px"}); }); }); ////HTML//// <div id="contents"> <ul> <li><a href="1.jpg"><img src="1.jpg" title="あああああああああああああああ" /></a></li> <li><a href="2.jpg"><img src="2.jpg" title="いいいいいいいいいいいいいいい" /></a></li> <li><a href="3.jpg"><img src="3.jpg" title="ううううううううううううううう" /></a></li> </ul> </div> <div id="photo"> <img src="1.jpg" /> <span>テキストテキスト</span> </div>
- ベストアンサー
- JavaScript
- jQueryでの画像切り替え処理について
前回の質問の続きになります。 一列に配置したボタンを、マウスオーバー時、クリック時にそれぞれ別の画像に切り替えたいと思っています。 （元画像A_offを、マウスオーバー時はA_on、クリック時はA_off_s3へと変更する。 A_off_s3の状態でマウスオーバーされた場合、A_offにはならず、A_off_s3のままとする。 A_off_s3が表示されている時に他のボタンB_offがクリックされたら、B_offはB_off_s3を、A_off_s3はA_offを表示する。） 色々なページを参考に、以下のようなスクリプトを書きました。 ---------- <head> <script type="text/javascript" src="script/jquery-1.11.0.min.js"></script> <script> $(function(){ var handler = $('ul#nav li a'); var url = document.URL; var urlId = url.substr(url.lastIndexOf('#')); var urlIdJudgment = urlId.lastIndexOf('#'); $('ul#nav').each(function(){ $('#tab-box > div:first').show(); var imgSrc = $('ul#nav li:first img').attr('src'); var imgDot = imgSrc.lastIndexOf('.'); var onSrc = imgSrc.substr(0, imgDot) + '_s3' + imgSrc.substr(imgDot, 4); $('ul#nav li:first img').attr('src',onSrc).addClass('tab-on'); }); handler.click(function() { var imgSrc = $(this).children('img').attr('src').replace(/_s3/g, ""); var imgDot = imgSrc.lastIndexOf('.'); var onSrc = imgSrc.substr(0, imgDot) + '_s3' + imgSrc.substr(imgDot, 4); $(this).children('img').attr('src',onSrc); var imgOff = $('ul#nav li img.tab-on').attr('src').replace(/_s3/g, ""); $('ul#nav li img.tab-on').attr('src',imgOff); $('ul#nav li img').removeClass('tab-on'); $(this).children('img').addClass('tab-on'); var imgSrc = $(this).children('img').attr('src').replace(/_s3/g, ""); var imgDot = imgSrc.lastIndexOf('.'); var onSrc = imgSrc.substr(0, imgDot) + '_s3' + imgSrc.substr(imgDot, 4); $(this).children('img').attr('src',onSrc); return false; }) }); $(function(){ $('a img').hover(function(){ $(this).attr('src', $(this).attr('src').replace('_off', '_on')); }, function(){ if (!$(this).hasClass('currentPage')) { $(this).attr('src', $(this).attr('src').replace('_on', '_off')); } }); }); </script> </head> <body onload="MM_preloadImages('img/A_off.jpg','img/A_on.jpg','img/A_off_s3.jpg','img/B_off.jpg','img/B_on.jpg','img/B_off_s3.jpg','img/C_off.jpg','img/C_on.jpg','img/C_off_s3.jpg')"> <div id="tab-box"> <ul id="nav" class="clearFix"> <li><a href="xxx"><img src="img/A_off.jpg" width="134" height="36" alt="" id="A" /></a></li> <li><a href="yyy"><img src="img/B_off.jpg" width="134" height="36" alt="" id="B" /></a></li> <li><a href="zzz"><img src="img/C_off.jpg" width="134" height="36" alt="" id="C" /></a></li> </ul> </div> ---------- 上記のスクリプトで実行をすると、クリック時に？マークが表示され、カーソルが離れると○_off_s3の画像が表示されます。 また、○_off_s3の画像が表示されている時に、○_off_s3にカーソルを合わせると、？マークが表示され、カーソルが離れると○_off_s3が表示されます。 また、○_off_s3の名称をわかりやすいものにしようと思い、○_off_cに変更し、スクリプトの"_s3"を”_c”に変更したところ、スクリプトが正常に実行されなかったのも気になっています。 原因がわかる方がいらっしゃれば、アドバイスをお願いいたします。
- 締切済み
- JavaScript
- $(this)を変数に入れないと動作しない理由
「WebデザイナーのためのjQuery入門」という書籍でjQueryの勉強をしています。 リンク先 http://gihyo.jp/book/2012/978-4-7741-4856-4 この書籍の中のロールオーバーボタンのスクリプトで質問があります。 以下のスクリプトは書籍に載っているスクリプトですが、これにより画像ボタンにポインタがのる・のらないでボタン画像が切り替わります。 --------------- $(function(){ $('.rollover').each(function(){ var a = $(this); var img = a.find('img'); var src_off = img.attr('src'); var src_on = src_off.replace('_off','_on'); $('<img />').attr('src','src_on'); a.hover(function(){ img.attr('src',src_on); },function(){ img.attr('src',src_off); }); }); }); --------------- htmlは以下になります。※<body>内のみ抜粋 --------------- <body> <div class="header"> <ul class="menu"> <li><a href="index.html" class="rollover"><img src="menu01_off.png" alt="Home"></a></li> <li><a href="index.html" class="rollover"><img src="menu02_off.png" alt="Products"></a></li> <li><a href="index.html" class="rollover"><img src="menu03_off.png" alt="Company"></a></li> </ul> </div> </body> --------------- 質問したいのは、スクリプトの上から3行目の「var a = $(this);」です。 var a = $(this); var img = a.find('img'); 上記を、 var img = $(this).find('img'); とした場合、なぜか画像が切り替わりません。 どちらも同じような気がするのですが、不具合の原因が分かりません。 お分かりの方がいっらしゃいましたら、お手数ですがご回答よろしくお願いいたします。
- ベストアンサー
- JavaScript
お礼
こういったやり方があるのですね。 今回もいろいろご教授いただき本当にありがとうございました。 引き続き勉強していきたと思います。