こんにちはゲストさん。会員登録(無料)して質問・回答してみよう!

解決済みの質問

ブログのタイトル画像を複数枚でランダム表示させたいのですが。

ブログのタイトル画像を複数枚でランダム表示させたいのですが。

今JUGEMでブログをやっているのですが。。。
タイトル画像に複数枚の写真をランダム表示させたいと考えております。
随分前からチャレンジしてるモノの。。。全く解決する兆しがありません(^_^;)
どんな事でもいいので助けていただけたら。。。と思っています。
今はとりあえず定期的にタイトル画像をその都度別の画像に替えています。
大した手間ではないですが、自動で切り替わってくれたら楽だし
見に来て下さるブロ友の方達もちょっとは新鮮な気分になるかなぁ~と思いまして(^^ゞ
他にも本を片手にCSSやHTMLを勉強してますがランダム表示に関してはまだ
詳しい説明を見た事がありません。
で、検索かけて色々調べ、HTMLをいじり、その通りにしてみるも結果はダメ。
(その通りにしてるつもりでも理解力が足らず何かが足りないのかもしれませんが。。。)
画像ファイルが同じ階層に無いと表示されないとかを良く聞きますが
どういう意味でしょうか?

ランダム表示は数秒毎に表示が切り替わるタイプと、
アクセスする度にランダムで表示が替わるタイプが浮かびますが、
どちらかと言うと後者の方にチャレンジしたいです。
基本が同じなら応用として前者も試してみたいとは思っております。

多少のカスタマイズは経験有りますが、初心者に毛が生えた程度です。
ランダム表示されてるページのソースを見て参考にしたり真似したりもしてますが
なかなか上手くいきません。

難しくてもいいのでアドバイスお願いします。

あと、flashの場合はもっと大変でしょうか?
それですと残像を残しながら次の画像に切り替わるようにすることも可能ですか?
(この場合は数秒毎に表示が切り替わるタイプですね)

この情報だけではわかり難い場合、補足説明もしますので
どなたかご協力いただけたら助かります。

子育ての合間にPC開いてるのでお返事が若干遅くなるかもしれませんが
必ずお礼はしますのでよろしくお願い致します<(_ _)>

投稿日時 - 2010-09-03 04:11:55

QNo.6154927

困ってます

質問者が選んだベストアンサー

JavaScriptでやればよいのでは。
「ランダム画像」ってGoogle検索したら、
最初の1ページ目のサイトはほとんどそうです。
だからってそのまま参考になるわけじゃありませんが。

たとえば、

<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()
を調べてください。

投稿日時 - 2010-09-03 11:05:01

お礼

zeffさん、回答ありがとうございます<(_ _)>

いくつかは試してみたのですが、私がそのまままる写しでやったので
ダメだったのでしょうか?
(画像部分は勿論自分のを使いましたが。。。)

>Math.floor(Math.random() * len)
 がランダム整数を生成する雛形みたいなものです。
 0以上len未満の整数を返す。この場合だと0,1,2,3です。
( 配列(imgs)は0番目から開始する)

の部分でカッコ内に整数を入れると言う事ですね?
この場合は4点の画像を使うから(0,1,2,3)となりますか?
もしとんちんかんな事を言ってたらすみません。。。
自分の数値などを入力すべきところで入力せずにいたから出来なかったのでしょうか。。。
それがどの部分なのかがまず完全にわかってないので。。。情けないデス。。。
基本カッコ内には何らかの数値などが入ると思えばいいですか?

参考ページの紹介もありがとうございます。
とっても助かります!

数秒毎に切り替わる部分も仰ったように調べてみようと思います。

早速試してみますね。
詳しいアドバイス、感謝しております。
ありがとうございました<(_ _)>

投稿日時 - 2010-09-03 16:09:06

ANo.2

このQ&Aは役に立ちましたか?

1人が「このQ&Aが役に立った」と投票しています

回答(3)

ANo.3

あーー、1ヶ所間違えました、ごめんなさい;
imgs[ Math.floor(Math.random() * len) ].src
の.srcが不要でした。

document.getElementById('header').style.backgroundImage =
'url("' + imgs[ Math.floor(Math.random() * len) ] + '")';

こうでした。ケアレス;

投稿日時 - 2010-09-03 17:22:29

お礼

お返事が大変遅くなってしまいました<(_ _)>

ありがとうございます。
見事にランダムで表示する事が出来ましたっ(^^♪
本当に助かりました。

とてもわかり易かったです☆
とりあえず今のままにしておいて、秒数毎のランダム表示への挑戦はゆっくり
チャレンジしようと思います。
(今もう勉強してますが(^_^;))

長い間答えの出なかった問題が解決してスッキリしております☆
本当にありがとうございました。

投稿日時 - 2010-09-11 17:46:12

ANo.1

gifアニメーションが使用できるサイトでしたら、gifアニメーションを作成したほうが早いと思います。

フリーソフト
http://homepage3.nifty.com/furumizo/giamd.htm

エフェクトつけるのでしたら有料のソフトの方がいいと思います。

フラッシュは作成したことがないので、アドバイスできません。

投稿日時 - 2010-09-03 08:22:51

お礼

takurankeさん、回答ありがとうございます<(_ _)>

このようなフリーソフトがあるんですね!
とっても興味が湧いてきました☆

色々と調べてみたいと思いますl

flashも自分でもう少し頑張ってみますね。

お忙しいとこと、早速の情報ありがとうございました。

投稿日時 - 2010-09-03 15:57:00

あなたにオススメの質問