画像の切り替えを行うJavaScriptが、ローカル環境(自分のパソコン)で動くのに、サーバーにアップして確認すると動かない・・・。
もちろん、HTML、CSS、JavaScrpit等のファイル構成は全く同じ。
いつもこの手のトラブルは手こずるのだが、今回はすぐわかった。
サイトへのアクセスは、SSL(暗号化/HTTPS)で接続しているのに、jqueryを呼び出しているのが、SSL非対応で行っていた（HTTPSとHTTPが混在）。具体的には下記の通り。
<script src=”http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js”></script>
「http」を「https」に直せばＯＫ。
暗号化されているページ内から暗号化されていないデータを読み込もうとしたので、ブラウザでブロックされていたわけです。そりゃ動かんです。
ひと昔前のWeb制作の参考本は、サンプルのソースで「http」と書いてあるものが多いので、初心者は引っかかるミスだと思う。
ブラウザも「SSL非対応コンテンツが含まれているので完全に表示できません」って、警告してくれればいいのに(あれ、昔は警告あったよね？)。
今は、問答無用だもんなぁ。
コメントをどうぞ