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');
}
おわかりになる方、ぜひアドバイスください。お願いします。
