jQueryで画像置換が上手くいかない理由と解決法

このQ&Aのポイント
  • PCサイトをスマホで表示する際、特定の画像を小さいサイズに置換したいが、jQueryで画像置換がうまくできない。
  • スマホ専用サイトを作成するわけではないため、一部の画像のみを置換したいが、サンプルスクリプトが正常に動作しない。
  • スクリプトに構文エラーはなく、スクリプトの出所は http://ascii.jp/elem/000/000/561/561127/index-3.html である。
回答を見る
  • ベストアンサー

jQueryで画像置換が上手くいきません

PCサイトをスマホで読み込んだ場合に、特定の画像を小さいサイズに置換して表示したいのですが、色々調べたところ、jQueryで画像置換ができるというサンプルがあったので用いたのですが、上手くいきません。 都合上、スマホ専用サイトを作成するという方針ではありません。 よって、所どころ画像置換する必要があり、どうしても実現させたいのです。 サンプルスクリプトは以下の通りです。 if文は他のスクリプトでも使用しており動いているので、合っていると思っています。 何がいけないのでしょうか? -------------------------------------------------------------------- <!DOCTYPE html> <html lang="ja"> <head> <meta charset="utf-8"> <title>画像置換</title> <script src="js/jquery.js"></script> <script> if ((navigator.userAgent.indexOf('iPhone') > 0 && navigator.userAgent.indexOf('iPad') == -1) || navigator.userAgent.indexOf('iPod') > 0 || navigator.userAgent.indexOf('Android') > 0) { $('h1>img').attr('src', 'images/aaa.jpg').attr('width', '320').attr('height', '50'); } </script> </head> <body> <header> <h1><a href="index.html"><img src="images/bbb.gif" width="700" height="100" alt="hoge" /></a></h1> <header> </body> </html> -------------------------------------------------------------------- ちなみに、構文エラーは出ません。 サンプルスクリプトの出所は http://ascii.jp/elem/000/000/561/561127/index-3.html で、スクリプトの内容は以下の通りでした。 if ((navigator.userAgent.indexOf('iPhone') > 0 && navigator.userAgent.indexOf('iPad') == -1) || navigator.userAgent.indexOf('iPod') > 0 || navigator.userAgent.indexOf('Android') > 0)) { $('h1>img').attr('src', '_images/ttl_main_mini.png').attr('width', '665').attr('height', '217'); } おわかりになる方、ぜひアドバイスください。お願いします。

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

  • ベストアンサー
  • LancerVII
  • ベストアンサー率51% (1060/2054)
回答No.2

こんにちは。 DOM構築前に画像の設定を変えようとしているから動かないんだと思います。 ようはh1の直下にあるimgが無い状態。 $().ready ( function() { if ( (navigator.userAgent.indexOf('iPhone') > 0 && navigator.userAgent.indexOf('iPad') == -1) || navigator.userAgent.indexOf('iPod') > 0 || navigator.userAgent.indexOf('Android') > 0) { $('h1>img').attr('src', 'images/aaa.jpg').attr('width', '320').attr('height', '50'); } }); こうすることにより全て構築後に呼び出されますのでh1>imgが存在することとなり、大きさ等変更できると思います。

momorika
質問者

お礼

ご回答ありがとうございます! 試したところ、ちゃんと動きました。 よく理解しないまま使おうとしていたのがいけなかったです。 勉強になりました。 どうもプログラムは苦手で、躓いてばかりです。 もっと勉強していきます。 本当にありがとうございました。

その他の回答 (1)

  • fujillin
  • ベストアンサー率61% (1594/2576)
回答No.1

よくわかってませんが… >'h1>img' は、h1要素直下の画像要素を意味すると思いますが、ご提示のソースには該当するものがないのでは? 'h1 img' とかにすれば一応動作すると思いますが…

momorika
質問者

お礼

ご回答ありがとうございました。 LancerVIIさんと同じようなことを仰られていたのですね。 理解が足らずすみませんでした。 本当にありがとうございました。

momorika
質問者

補足

早速のご回答ありがとうございます。 > >'h1>img' > は、h1要素直下の画像要素を意味すると思いますが、ご提示のソースには該当するものが > ないのでは? との事ですが、<a>タグが邪魔だということでしょうか? なお、実際には以下の通りでした。間違えておりました。すみません。 <h1><img src="images/bbb.gif" width="700" height="100" alt="hoge" /></h1> 試してみましたが、残念ながら動きませんでした。 javascriptは詳しい方ではないので、見当違いな事を書いていたらすみません。 引き続き何かアドバイスいただけたらお願いいたします。

関連するQ&A

  • 効果付きの画像変化

    画像を効果を付けて変化をさせて、三回変化したら、変化を終了させたいんですけど、下の記述に何を加えたら良いか分かりましたら教えて下さい。お願いします。 img#img1 { filter: progid:DXImageTransform.Microsoft.RandomDissolve(Duration=2.0); } --> </style> <script language="JavaScript"> <!-- function SymError() { return true; } window.onerror = SymError; var SymRealWinOpen = window.open; function SymWinOpen(url, name, attributes) { return (new Object()); } window.open = SymWinOpen; //--> </script> <script type="text/javascript"> <!-- var ie = navigator.userAgent.indexOf("MSIE "); var verIE = 0, winIE = -1; if(ie >= 0) { verIE = parseFloat(navigator.userAgent.substr(ie + 5)); winIE = navigator.userAgent.indexOf("Windows"); } var photo = new Array("aki1.jpg", "aki2.jpg", "aki3.jpg"); var i = 0; function transImage2 () { var trans = 0; var img = document.images['img1']; if(verIE >= 5.5 && winIE >= 0) { if(img.filters) trans = img.filters[0]; } if(img.complete) { i++; if(i >= photo.length) i = 0; if(trans) trans.apply(); img.src = photo[i]; if(trans) trans.play(); } setTimeout("transImage2()", 4000); } //--> </script> </head> <body onload="setTimeout('transImage2()', 4000);"> <table> <tr> <td> <img name="img1" id="img1" src="aki1.jpg" width="240" height="180" alt=""> </td> </body>

  • 一瞬画像が

    現在、jQueryを使って、以下のようなフラッシュもどきのギャラリー表示を作っていますが このソースをSleipnirというブラウザで実行し、リロードをすると、一瞬画像が縦に並んでしまい 一瞬とはいえ、見た目がくずれてしまいます。 これをくずれないように表示するにはどうしたらよいのでしょうか? どなたか、よいお知恵をお願いいたします。 <!doctype html> <html> <head> <title>JQuery Cycle Plugin - Example Slideshow</title> <!-- include jQuery library --> <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.1/jquery.min.js"></script> <!-- include Cycle plugin --> <script type="text/javascript" src="jquery.cycle.all.min.js"></script> <!-- initialize the slideshow when the DOM is ready --> <script type="text/javascript"> $(document).ready(function() { $('.slideshow').cycle({ fx: 'fade' , timeout: 8000 , speed: 500 // choose your transition type, ex: fade, scrollUp, shuffle, etc... }); $('.slideshow2').cycle({ fx: 'fade' , timeout: 4000 , speed: 4000 // choose your transition type, ex: fade, scrollUp, shuffle, etc... }); $('.slideshow3').cycle({ fx: 'fade' , timeout: 2000 , speed: 8000 // choose your transition type, ex: fade, scrollUp, shuffle, etc... }); }); </script> </head> <body> <div style="width:900px;"> <div class="slideshow2" style="float:left;"> <img src="images/common/a1.jpg" width="300" height="300" /> <img src="images/common/a2.jpg" width="300" height="300" /> <img src="images/common/a3.jpg" width="300" height="300" /> <img src="images/common/a4.jpg" width="300" height="300" /> <img src="images/common/a5.jpg" width="300" height="300" /> <img src="images/common/a6.jpg" width="300" height="300" /> <img src="images/common/a7.jpg" width="300" height="300" /> <img src="images/common/a8.jpg" width="300" height="300" /> <img src="images/common/a9.jpg" width="300" height="300" /> <img src="images/common/a10.jpg" width="300" height="300" /> <img src="images/common/a11.jpg" width="300" height="300" /> </div> <div class="slideshow" style="float:left;"> <img src="images/common/b1.jpg" width="300" height="300" /> <img src="images/common/b2.jpg" width="300" height="300" /> <img src="images/common/b3.jpg" width="300" height="300" /> <img src="images/common/b4.jpg" width="300" height="300" /> <img src="images/common/b5.jpg" width="300" height="300" /> <img src="images/common/b6.jpg" width="300" height="300" /> <img src="images/common/b7.jpg" width="300" height="300" /> <img src="images/common/b8.jpg" width="300" height="300" /> <img src="images/common/b9.jpg" width="300" height="300" /> <img src="images/common/b10.jpg" width="300" height="300" /> <img src="images/common/b11.jpg" width="300" height="300" /> <img src="images/common/b12.jpg" width="300" height="300" /> </div> <div class="slideshow3" style="float:right;"> <img src="images/common/c1.jpg" width="300" height="300" /> <img src="images/common/c2.jpg" width="300" height="300" /> <img src="images/common/c3.jpg" width="300" height="300" /> <img src="images/common/c4.jpg" width="300" height="300" /> <img src="images/common/c5.jpg" width="300" height="300" /> <img src="images/common/c6.jpg" width="300" height="300" /> <img src="images/common/c7.jpg" width="300" height="300" /> <img src="images/common/c8.jpg" width="300" height="300" /> <img src="images/common/c9.jpg" width="300" height="300" /> <img src="images/common/c10.jpg" width="300" height="300" /> <img src="images/common/c11.jpg" width="300" height="300" /> </div> </div> </body> </html>

  • 二重の画像切り替え

    以下のようなJavaScriptを作りたいと考えております。 非常にレベルの低い内容で申し訳ないのですが、どうかみなさんの知恵を貸していただけば幸いです。 (ちなみにJavaScriptで処理品ければいけない成約がありますので、他の方法は今回はすみません。) 見せるのも恥ずかしいレベルのソースですが、ソースも載せます。 CのいずれかをクリックするとBの3つのサムネイル画像がすべて切替り、 更にBのいずれかをクリックすると拡大画像のAが切替るJavaScriptを作りたいと考えております。 ┌──┐ │拡大│←A(Bの拡大画像) └──┘ ┌─┐┌─┐┌─┐ │前││横││後│←B(車の各方向からの写真画像) └─┘└─┘└─┘ ┌─┐┌─┐┌─┐ │赤││青││黒│←C(車のカラーバリエーション) └─┘└─┘└─┘ ◆◆◆現在のソース◆◆◆ <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.2/jquery.min.js"></script> <!--A(Bの拡大画像)--> <div id="main_img"><img id="target_main" src="images/red_head.jpg" width="450" height="190" alt="image"></div> <!--B(車の各方向からの写真画像)--> <div class="thumbnail"> <ul> <li><a href="images/red_head.jpg"><img id="target_thumbnail_01" src="images/red_head.jpg" width="100" height="41" alt="gold_01"></a></li> <li><a href="images/red_side.jpg"><img id="target_thumbnail_02" src="images/red_side.jpg" width="100" height="41" alt="gold_02"></a></li> <li><a href="images/red_back.jpg"><img id="target_thumbnail_03" src="images/red_back.jpg" width="100" height="41" alt="gold_03"></a></li> </ul> </div> <!--C(車の各方向からの写真画像)--> <div class="color">   <ul>     <li><a href="○○○"><img src="images/wheat.jpg" width="78" height="26" alt="sample01"></a></li> <li><a href="○○○"><img src="images/images/java.jpg" width="78" height="26" alt="sample01"></a></li> <li><a href="○○○"><img src="images/images/graphite.jpg" width="78" height="26" alt="sample01"></a></li> </ul> </div> <!--メインイメージ切り替えスクリプト--> <script type="text/javascript"> $(document).ready( function() { $(".thumbnail a").click( function() { var changeSrc = $(this).attr("href"); $("#target_main").fadeOut("slow", function() { $(this).attr("src", changeSrc); $(this).fadeIn(); } ); return false; }); }); </script> <!--カラー切り替えスクリプト-->  ・  ・  ・

  • jquery1.4で画像とリンクの切り替えを行おうとしています。

    jquery1.4で画像とリンクの切り替えを行おうとしています。 ひとまず動き的にはうまくは行っているのですが、切り替え対象の複数の画像をfloat:left;等で 横並びにすると、切り替えるたい画像をクリック後に規定の場所に画面が移動してしまいます。 対処法があれば教えていただけますでしょうか? 【javascript】 $(document).ready( function() { $(".thumbnail p").click( function() { var changeSrc = this.src; var changeHref = this.href; $("#target img").fadeOut("fast", function() { $(this).attr("src", changeSrc); $(this).fadeIn(); } ); $("#target a").attr("href", changeHref); }); $(".thumbnail2 img").click( function() { var changeSrc = this.src; $("#target2").fadeOut( "slow", function() { $(this).attr("src", changeSrc); $(this).fadeIn(); } ); }); $(".thumbnail3 img").click( function() { var changeSrc = this.src; $("#target3").slideUp( "slow", function() { $(this).attr("src", changeSrc); $(this).slideDown(); } ); }); }); </script> 【HTML】 <div> <p id="target"><a href="./main.cgi?mode=details2&sid=1&gid=1S000046"><img src="./g_images/IMG_1457.jpg" width="240" height="320" alt="ブランドカテゴリー" /></a></p> </div> <div class="thumbnail"> <p href="./main.cgi?mode=details2&sid=1&gid=1S000043" src="./g_images/IMG_1457.jpg" class="item"> <img src="./g_images/IMG_1457.jpg" width="90" height="150" alt="ブランドカテゴリー" /> <br /><a href="./main.cgi?mode=details2&sid=1&gid=1S000043">詳細</a></p> <p href="./main.cgi?mode=details2&sid=1&gid=1S000047" src="./g_images/IMG_1469.jpg" class="item"> <img src="./g_images/IMG_1469.jpg" width="90" height="150" alt="ブランドカテゴリー" /> <br /><a href="./main.cgi?mode=details2&sid=1&gid=1S000047">詳細</a></p> </div> 【css】 .thumbnail { height:200px; text-align:center; } .item { float:left; padding-left:10px; margin-left:10px; }

  • jqueryで置換を行いたいです。

    natsunastu_iguさん jqueryで置換を行いたいです。 http://shop.titles.tokyo/img/new/icons1.gif を http://file001.shop-pro.jp/PA01294/594/images/i_new2.png に置き換えたいのですが以下の書き方だとうまく動いてくれませんでした。 どう記載すればいいでしょうか? <div id="myToolTip0" class="display_none"> <h3>電気スタンド新作<img class="new_mark_img2" src="http://shop.titles.tokyo/img/new/icons1.gif" style="border:none;display:inline;margin:0px;padding:0px;width:auto;"></h3> </div> <Script> $(function(){ $('.new_mark_img2').replace('http://shop.titles.tokyo/img/new/icons1.gif','http://file001.shop-p... }); </script>

  • jQuery LightBox Plugin動かず

    複数の画像をLightBoxで表示したくて http://shanabrian.com/web/library/jlightbox.php#option のページ参考にテストしてみました。紹介されてるダウンロードページからデータを取得し、 解凍後、css、images、jsディレクトリを適用するファイルと同じディレクトリに設置しました。 そしてJavaScriptおよびCSSをhead内にコピーし a要素にrel="lightbox"を追加 これで完了のはずですが、しかし動作しません。 画像のページが開いてしまいます。なぜ動かないのでしょうか? <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <title>テスト</title> <link rel="stylesheet" type="text/css" href="css/jquery.lightbox-0.5.css" media="screen" /> <script type="text/javascript" src="js/jquery.js"></script> <script type="text/javascript" src="js/jquery.lightbox-0.5.js"></script> <script type="text/javascript"> $(function() { $('#gallery a').lightBox(); }); </script> </head> <body> <a href="images/sample1.jpg" rel="lightbox"><img src="photos/image1.jpg" width="200" height="300"></a> <a href="images/sample2.jpg" rel="lightbox"><img src="photos/image2.jpg" width="200" height="300"></a> <a href="images/sample3.jpg" rel="lightbox"><img src="photos/image3.jpg" width="200" height="300"></a> </body> </html> お願いします。

  • Webの表で画像を並べたい

    テーブルを使って画像を並べているのですが、どうしても空白ができてしまいます。ソースを見ても何が原因だかわかりません。 左側に145*89のセルが一つあり、右上に604*54のセル、右下には35*35、60*35、509*35の3つのセル(今後増やす予定です)を作り、画像を並べたいと思っています。 が、左の画像と右下(2つ)の画像、右下(2つ)の画像と右上の画像との間にそれぞれ少しだけ空白ができてしまいます。 何が原因だか分かりますか?どうかよろしくお願いします。 ソースは以下の通りです。 <table width="749" height="89" border="0" cellspacing="0" cellpadding="0"> <tr> <td rowspan="3" width="145" height="89"><IMG SRC="images/main_up_01.gif" width="145" height="89"> </td> </tr> <tr> <td width="604" height="54" colspan="10"><IMG SRC="images/main_up_02.gif" width="604" height="54"> </td> </tr> <tr> <td width="35" height="35"> <img src="images/top.gif" width="35" height="35"> </td> <td width="60" height="35"> <img src="images/top2.gif" width="60" height="35"> </td> <td width="509" height="35"> </td> </tr> </table>

    • ベストアンサー
    • HTML
  • 同HTML内で複数のjQueryを設置したいです

    買ってきたjQueryの本を元に複数のjQueryを使用し、 タブメニュータイプのものと自動スライドショータイプのを 同じHTML内に入れたいのですが両方ともうまくいきません。 いろいろ自分なりに調べたのですが、わからないです。 うまくいく方法をどうか教えてもらえないでしょうか? 宜しくお願いします。 <!doctype html> <html> <head> <meta charset="utf-8"> <title>細かなCSS設定なしに、画像をロールオーバーさせる</title> <link rel="stylesheet" href="css/base.css" type="text/css" media="all" /> <script src="js/jquery.rollover.js" type="text/javascript"></script> <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js" type="text/javascript" charset="UTF-8"></script> <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js"></script> <script src="js/jquery.easing.1.3.js" type="text/javascript"></script> <script src="js/jquery.slideviewer.1.2.js" type="text/javascript"></script> <script type="text/javascript"> jquery(function() { jquery('div#gallery').slideView({ easeFunc: 'easeInOutBack',//少しバックするアニメーション easeTime: 1200,//アニメーションの時間 toolTip: true,//ツールチップの表示 ttOpacity: 0.5//ツールチップの透明度 }); }); </script> </head> <body> <div id="wrap"> <div id="gnav"> <ul> <li><a href="#"><img src="images/btn_01.jpg" alt="トップページ"></a></li> <li><a href="#"><img src="images/btn_02.jpg" alt="会社概要"></a></li> <li><a href="#"><img src="images/btn_03.jpg" alt="制作実績"></a></li> <li><a href="#"><img src="images/btn_04.jpg" alt="お問い合わせ"></a></li> <li><a href="#"><img src="images/btn_05.jpg" alt="お問い合わせ"></a></li> </ul> </div> <!-- END #gnav --> <div id="wrap"> <h1><img src="images/douga/logo.jpg" alt="PHOTO GALLERY" width="439" height="81" /></h1> <div id="gallery" class="svw"> <ul> <li><img src="images/douga/img_01.jpg" alt="PHOTO GALLERY 01" width="655" height="430" /></li> <li><img src="images/douga/img_02.jpg" alt="PHOTO GALLERY 02" width="655" height="430" /></li> <li><img src="images/douga/img_03.jpg" alt="PHOTO GALLERY 03" width="655" height="430" /></li> <li><img src="images/douga/img_04.jpg" alt="PHOTO GALLERY 04" width="655" height="430" /></li> <li><img src="images/douga/img_05.jpg" alt="PHOTO GALLERY 05" width="655" height="430" /></li> <li><img src="images/douga/img_06.jpg" alt="PHOTO GALLERY 06" width="655" height="430" /></li> <li><img src="images/douga/img_07.jpg" alt="PHOTO GALLERY 07" width="655" height="430" /></li> </ul> </div> </div><!-- END wrap --> <img src="images/arimura_ocean3.jpg" class="ocean"> <img src="images/arimura_ocean3.jpg"> <p class="pagetop"><a href="#"><img src="images/btn_pagetop.jpg" alt="上へ戻る" class="rollover"></a></p> </div> <!-- END #wrap --> </body> </html>

  • jQuery 記述方法

    今、webサイトを作っていてjQueryを使用しようとしています。 しかし、うまくできません。外部にjavascriptファイルを置いています。 やりたいことは、ナビゲーションのロールオーバーです。 javascriptは初心者なのでどこが間違っているまたは足りないのかわかりません。以下に必要だと思うものを記述しますので分かる方がおりましたら教えてください。 javascriptファイルとjquery-1.6.4.min.jsはhtmlと同フォルダ内にあります。またimgフォルダ内に画像と拡張子の前に_onを付けた画像を入れています。 HTML <head> <script type="text/javascript" src="./jquery-1.6.4.min.js"></script> <script type="text/javascript" src="park.js"></script> </head> <body> <p><a href="index.html"> <img alt="top" height="50" class="navi" src="img/top.gif" width="100" /></a></p> </body> javascript $(function(){ $ ("img.navi").mouseover(function(){ $(this).attr("src",$(this).attr("src") .replace(/^(.+)(¥.{a-z]+)$/,"$1_on$2")); }).mouseout(function(){ $(this).attr("src",$(this).attr("src") .replace(/^(.+)_on(¥.{a-z]+)$/,"$1$2")); }).each(function(){ $("<img>").attr("src",$(this).attr("src") .replace(/^(.+)(¥.{a-z]+)$/,"$1_on$2")); }); ]); です。 よろしくお願いします。

  • jqueryについて(v 1.4.2)

    jqueryについて(v 1.4.2) <script type="text/javascript"> $(function() { $("h1").append('<em></em>') $(".thumbs a").click(function() { var largePath = $(this).attr("href"); var largeAlt = $(this).attr("title"); $(".largeImage").attr({ src: largePath, alt: largeAlt }); $("h1 em").html(" (" + largeAlt + ")"); return false; }); }); </script> 【html↓】 <div> <h1>ギャラリータイトル</h1> <p class="thumbs"> <a href="images/img2-lg.jpg" title="タイトル 2"> <img src="images/img2-thumb.jpg" /> </a> <a href="images/img3-lg.jpg" title="タイトル 3"> <img src="images/img3-thumb.jpg" /> </a> <a href="images/img4-lg.jpg" title="タイトル 4"> <img src="images/img4-thumb.jpg" /> </a> <a href="images/img5-lg.jpg" title="タイトル 5"> <img src="images/img5-thumb.jpg" /> </a> <a href="images/img6-lg.jpg" title="タイトル 6"> <img src="images/img6-thumb.jpg" /> </a> </p> <p><img class="largeImage" src="images/img1-lg.jpg" alt="タイトル 1" /></p> </div> 上記と同じ構造のdivが他にもいくつかあるのですが、個々のdiv全てに同じようにjqueryを 適用したいと思っています。 .each()を使ってみたのですが、.thumbsのaをクリックすると全てのdivの.largeImageが 反応してしまいます。 .click()の前に.each()を記述した場合も、後に記述した場合もうまくいきません。 個々のdivに適用するにはどうすればいいのでしょうか。 .each()を使う事自体が間違っているのでしょうか。 初心者なので分かりやすく教えていただければ幸いです。

    • ベストアンサー
    • AJAX