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

解決済

質問者：momorika
質問日時：2012/02/29 12:35
回答数：2件

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. …
で、スクリプトの内容は以下の通りでした。

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');
}

おわかりになる方、ぜひアドバイスください。お願いします。

通報する

この質問への回答は締め切られました。

質問の本文を隠す

回答 (2件)

ベストアンサー優先
最新から表示
回答順に表示

No.2ベストアンサー

回答者： LancerVII
回答日時：2012/02/29 14:44

こんにちは。

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が存在することとなり、大きさ等変更できると思います。

- 0
- 件

通報する

この回答へのお礼

ご回答ありがとうございます！

試したところ、ちゃんと動きました。
よく理解しないまま使おうとしていたのがいけなかったです。

勉強になりました。
どうもプログラムは苦手で、躓いてばかりです。
もっと勉強していきます。

本当にありがとうございました。

通報する

お礼日時：2012/02/29 17:44

No.1

回答者： fujillin
回答日時：2012/02/29 13:19

よくわかってませんが…

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

この回答への補足

早速のご回答ありがとうございます。

> ＞'h1>img'
> は、h1要素直下の画像要素を意味すると思いますが、ご提示のソースには該当するものが
> ないのでは？

との事ですが、<a>タグが邪魔だということでしょうか？
なお、実際には以下の通りでした。間違えておりました。すみません。

<h1><img src="images/bbb.gif" width="700" height="100" alt="hoge" /></h1>

試してみましたが、残念ながら動きませんでした。
javascriptは詳しい方ではないので、見当違いな事を書いていたらすみません。

引き続き何かアドバイスいただけたらお願いいたします。