- ベストアンサー
ブログのタイトル画像を複数枚でランダム表示させる方法
- JUGEMでブログをやっている方が、タイトル画像に複数枚の写真をランダム表示させたいと考えています。現在は手動で画像を切り替えていますが、自動で切り替わる方法を知りたいとのことです。ランダム表示は数秒毎に切り替わるタイプやアクセスする度に切り替わるタイプがあり、後者にチャレンジしたいとのことです。初心者ですが、アドバイスをお願いしたいとのことです。
- ブログを運営している方が、タイトル画像に複数枚の写真をランダムに表示させたいと考えています。現在は手動で画像を切り替えているが、自動で切り替わる方法を知りたいとのことです。ランダム表示は数秒毎に切り替わるタイプやアクセスする度に切り替わるタイプがあり、後者にチャレンジしたいとのことです。初心者であり、アドバイスをお願いしたいとのことです。
- JUGEMでブログを運営している方が、タイトル画像に複数枚の写真をランダムに表示させたいと考えています。現在は手動で画像を切り替えていますが、自動で切り替わる方法を知りたいとのことです。ランダム表示は数秒毎に切り替わるタイプやアクセスする度に切り替わるタイプがあり、後者にチャレンジしたいとのことです。初心者ですが、アドバイスをお願いしたいとのことです。
- ブログ
- 回答数3
- ありがとう数4
- みんなの回答 （3）
- 専門家の回答
質問者が選んだベストアンサー
JavaScriptでやればよいのでは。 「ランダム画像」ってGoogle検索したら、 最初の１ページ目のサイトはほとんどそうです。 だからってそのまま参考になるわけじゃありませんが。 たとえば、 <script type="text/javascript"> <!-- //@cc_on window./*@if(@_jscript_version<=5.8) attachEvent('on'+ @else @*/ addEventListener(/*@end @*/ 'load',function(){ var imgs = [ "hoge.jpg", "fuga.png", "piyo.png", "foo.gif"]; var len = imgs.length;//画像の数:4 document.getElementById('header').style.backgroundImage = 'url("' + imgs[ Math.floor(Math.random() * len) ].src + '")'; }, false ); //--> </script> </head> <body> <div id="header"> <h1>タイトル</h1> </div> </body> </html> Math.floor(Math.random() * len) がランダム整数を生成する雛形みたいなものです。 0以上len未満の整数を返す。この場合だと0,1,2,3です。 （配列（imgs）は0番目から開始する） そして、 <div id="header">の背景画像を動的に書き換える、と。 参考になりそうなページ発見： http://shimoyanweb.jugem.jp/?eid=629 http://cooperate.jugem.cc/?eid=148 数秒ごとに切り替わるのは、 setInterval() setTimeout() を調べてください。
その他の回答 (2)
- zeff
- ベストアンサー率69% (137/198)
あーー、１ヶ所間違えました、ごめんなさい； imgs[ Math.floor(Math.random() * len) ].src の.srcが不要でした。 document.getElementById('header').style.backgroundImage = 'url("' + imgs[ Math.floor(Math.random() * len) ] + '")'; こうでした。ケアレス；
お礼
お返事が大変遅くなってしまいました<(_ _)> ありがとうございます。 見事にランダムで表示する事が出来ましたっ(^^♪ 本当に助かりました。 とてもわかり易かったです☆ とりあえず今のままにしておいて、秒数毎のランダム表示への挑戦はゆっくり チャレンジしようと思います。 （今もう勉強してますが(^_^;)） 長い間答えの出なかった問題が解決してスッキリしております☆ 本当にありがとうございました。
- takuranke
- ベストアンサー率31% (3923/12455)
gifアニメーションが使用できるサイトでしたら、gifアニメーションを作成したほうが早いと思います。 フリーソフト http://homepage3.nifty.com/furumizo/giamd.htm エフェクトつけるのでしたら有料のソフトの方がいいと思います。 フラッシュは作成したことがないので、アドバイスできません。
お礼
takurankeさん、回答ありがとうございます<(_ _)> このようなフリーソフトがあるんですね！ とっても興味が湧いてきました☆ 色々と調べてみたいと思いますｌ flashも自分でもう少し頑張ってみますね。 お忙しいとこと、早速の情報ありがとうございました。
お礼
zeffさん、回答ありがとうございます<(_ _)> いくつかは試してみたのですが、私がそのまままる写しでやったので ダメだったのでしょうか？ （画像部分は勿論自分のを使いましたが。。。） ＞Math.floor(Math.random() * len) がランダム整数を生成する雛形みたいなものです。 0以上len未満の整数を返す。この場合だと0,1,2,3です。 （ 配列（imgs）は0番目から開始する） の部分でカッコ内に整数を入れると言う事ですね？ この場合は４点の画像を使うから（0,1,2,3）となりますか？ もしとんちんかんな事を言ってたらすみません。。。 自分の数値などを入力すべきところで入力せずにいたから出来なかったのでしょうか。。。 それがどの部分なのかがまず完全にわかってないので。。。情けないデス。。。 基本カッコ内には何らかの数値などが入ると思えばいいですか？ 参考ページの紹介もありがとうございます。 とっても助かります！ 数秒毎に切り替わる部分も仰ったように調べてみようと思います。 早速試してみますね。 詳しいアドバイス、感謝しております。 ありがとうございました<(_ _)>