- ベストアンサー
jQueryで画像置換が上手くいかない理由と解決法
- PCサイトをスマホで表示する際、特定の画像を小さいサイズに置換したいが、jQueryで画像置換がうまくできない。
- スマホ専用サイトを作成するわけではないため、一部の画像のみを置換したいが、サンプルスクリプトが正常に動作しない。
- スクリプトに構文エラーはなく、スクリプトの出所は http://ascii.jp/elem/000/000/561/561127/index-3.html である。
- momorika
- お礼率66% (33/50)
- JavaScript
- 回答数2
- ありがとう数2
- みんなの回答 （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が存在することとなり、大きさ等変更できると思います。
その他の回答 (1)
- fujillin
- ベストアンサー率61% (1594/2576)
よくわかってませんが… ＞'h1>img' は、h1要素直下の画像要素を意味すると思いますが、ご提示のソースには該当するものがないのでは？ 'h1 img' とかにすれば一応動作すると思いますが…
お礼
ご回答ありがとうございました。 LancerVIIさんと同じようなことを仰られていたのですね。 理解が足らずすみませんでした。 本当にありがとうございました。
補足
早速のご回答ありがとうございます。 > ＞'h1>img' > は、h1要素直下の画像要素を意味すると思いますが、ご提示のソースには該当するものが > ないのでは？ との事ですが、<a>タグが邪魔だということでしょうか？ なお、実際には以下の通りでした。間違えておりました。すみません。 <h1><img src="images/bbb.gif" width="700" height="100" alt="hoge" /></h1> 試してみましたが、残念ながら動きませんでした。 javascriptは詳しい方ではないので、見当違いな事を書いていたらすみません。 引き続き何かアドバイスいただけたらお願いいたします。
お礼
ご回答ありがとうございます！ 試したところ、ちゃんと動きました。 よく理解しないまま使おうとしていたのがいけなかったです。 勉強になりました。 どうもプログラムは苦手で、躓いてばかりです。 もっと勉強していきます。 本当にありがとうございました。