サイトで毎回違う画像をランダムに表示する


*


*
もじ文字 有意義な労働 健康と衛生 執筆への道標 そもそも学 更新情報

創作活動歴 | 作品紹介 | 小説投稿サイト | ホームページ | おすすめ小説 | サウンドアドベンチャーゲーム

執筆への道標

* *
*
創作ホームページ

サイトで毎回違う画像をランダムに表示する

ホームページを閲覧するたびに
画像やリンク先をランダムに表示したい場合の方法です。
インラインフレームを利用します。

ランダムなので同じ画像やリンクが表示される事もありますが
設定した画像やリンクの量によっては毎回違うものが表示されます。

ランダムに表示されるものが画像であれば割と簡単です。

まずは画像を用意します。
拡張子を「jpg」とするのであれば
「1.jpg」という画像ファイル名にします。
2枚目の画像は「2.jpg」とします。

リンクもできる画像や文章であれば
「1.html」「2.html」などHTMLのページを作成します。

画像を保存している場所にすでに「1.jpg」がある場合は
ランダム用のフォルダを新しく作成します。
すでに「1.html」などのページがある場合も
ランダム用のフォルダを新しく作成します。

表示したいページのhead内に次のコードを設置します。
の説明文章は無くても大丈夫です。『』なども不要です)


<script type="text/javascript">
』cnt1= 5 //
ファイル数が現在「5」になってます。ファイル数を三つにしたい場合は「3」とする。
』page1 = Math.floor(Math.random() * cnt1)+1;
』のコードが「cnt1」なら『』も「cnt1」。
window.onload=function(){
』window.parent.■ ■ ■.location.href="http://●●●/"+page1+".〇〇〇"
』のコードが「page1」なら『』も「page1」。
●●●はファイル名より直前までのURL。〇〇〇は画像なら拡張子「jpg」など。HTMLなら「html」。
ファイル名の「1.html」や「1.jpg」の「1」や「2」は入力しません。「page1」がその役割となってます。
■ ■ ■は任意の「id」である半角英数字を入力します。
}
</script>


ここまで


上記のコードからや『』を除いた状態は以下のようになります。

<script type="text/javascript">
cnt1= 5 //
page1 = Math.floor(Math.random() * cnt1)+1;
window.onload=function(){
window.parent.■ ■ ■.location.href="http://●●●/"+page1+".〇〇〇"
}
</script>


ここまで

表示したい箇所に次のコードを入力します。


<iframe src="about:blank" name="■ ■ ■" width="300" height="300" frameborder="0" scrolling="no"></iframe>
■ ■ ■には『』の「id」を入力します。
横幅は「 width="300" 」「 height="300" 」の数字を好きな大きさに変えます。

ここまで


ランダムで表示する場所が二箇所必要な場合は以下のようにします。
の説明文章は無くても大丈夫です。『』や『』なども不要です)


<script type="text/javascript">
』cnt1= 5 //
』cnt2= 3 //
』の「cnt1」が重複しないように『』は「cnt2」とします。
』page1 = Math.floor(Math.random() * cnt1)+1;
』page2 = Math.floor(Math.random() * cnt2)+1;
』が「cnt2」であれば『』も「cnt2」にします。
window.onload=function(){
』window.parent.■ ■ ■.location.href="http://●●●/"+page1+".〇〇〇"
』window.parent.□ □ □.location.href="http://●●●/"+page2+".〇〇〇"
』の■ ■ ■と『』の□ □ □は違う「id」を任意で入力します。
』が「page2」であれば『』も「page2」にします。
}
</script>


ここまで


上記のコードからや『』を除いた状態は以下のようになります。

<script type="text/javascript">
cnt1= 5 //
cnt2= 3 //
page1 = Math.floor(Math.random() * cnt1)+1;
page2 = Math.floor(Math.random() * cnt2)+1;
window.onload=function(){
window.parent.■ ■ ■.location.href="http://●●●/"+page1+".〇〇〇"
window.parent.□ □ □.location.href="http://●●●/"+page2+".〇〇〇"
}
</script>


ここまで


』と同じコードをもうワンセット設置して「id」を□ □ □と同じにします。

』『』『』『』をワンセット増やすたびに
ランダムに表示できる箇所を増やす事ができます。

表示したい画像やHTMLを
「FFFTP」にアップロードする事を
忘れないように気をつけます。

』や『』のファイル数が
用意している画像やHTMLより多い場合は
存在していないページなので「404」となります。

ホームページが少しでも彩られる事を願います。



   ■創作ホームページ 一覧へ戻る
   *


 ■類似タイトル
 
 
 ■類似タイトル
 
 
 ■類似タイトル
 
 
 ■類似タイトル
 
 
*




     




*その他コンテンツ











プロフィール&創作作品
もじ文字
サイトマップ
もじ文字 更新情報



健康と衛生
そもそも学
執筆への道標
有意義な労働



With the exception of the work that has been provided with the consent,
all of the copyright is owned by the administrator of もじ文字 _since2013_
同意を得て提供されている作品や紹介されている不特定多数の作品を除いて
当サイトに掲載されている著作権の全てをもじ文字の運営者が所有しています。