--
--/--
--
--/--
--
webページに複数の画像とエントリーのリンクを重複しないでランダムに複数表示するスクリプト
Category : javascript
webページに複数の画像とエントリーのリンクを
重複しないでランダムに表示するスクリプトの表示数可変バージョンです。
（まずは上のリンゴ画像の１つをクリックしてみてください。）
※画像は全部で6種類用意してます。
twitpic の脇にあるような正方形サムネイルが作りたくて、まずはランダム表示できるスクリプトを探してたのですが、 任意の数をランダムに重複しないで表示するスクリプトが 思った以上に見つからなかったので記事にしておきます。
no-titleさんで紹介されていた『ランダム広告表示 - 2』を参考に、CSSレイアウト版をつくってみました。（javascriptは専門外なので間違いがあればご指摘いただけると助かります。）（※動作確認はIE8、Firefox3.5.6のみ）
（他、参考にした記載）
→ 複数の画像のランダム表示をさせるJavascriptやCGIを知りませんか？
→ 画像が重複しない複数のランダム画像表示
→ 【javascript】webページに画像をランダムに（重複しないように、あとそれぞれにリンクもつけて）表示させたいです。
JavaScriptのコードはこんな感じ。
横に並べた画像がボックスの領域を超えると自動的に改行して表示されます。
（<br style="clear:both;">は指定方法としては間違いですが、floatの回り込み解除にclearプロパティが必要なので入れてます。）
CSSはこんな感じ。
twitpic の脇にあるような正方形サムネイルが作りたくて、まずはランダム表示できるスクリプトを探してたのですが、 任意の数をランダムに重複しないで表示するスクリプトが 思った以上に見つからなかったので記事にしておきます。
no-titleさんで紹介されていた『ランダム広告表示 - 2』を参考に、CSSレイアウト版をつくってみました。（javascriptは専門外なので間違いがあればご指摘いただけると助かります。）（※動作確認はIE8、Firefox3.5.6のみ）
（他、参考にした記載）
→ 複数の画像のランダム表示をさせるJavascriptやCGIを知りませんか？
→ 画像が重複しない複数のランダム画像表示
→ 【javascript】webページに画像をランダムに（重複しないように、あとそれぞれにリンクもつけて）表示させたいです。
JavaScriptのコードはこんな感じ。
for(i = 0; i < 表示数; i++) // この部分で表示する数を調整。
webページに表示させたい数を『表示数』の部分に入力します。横に並べた画像がボックスの領域を超えると自動的に改行して表示されます。
（<br style="clear:both;">は指定方法としては間違いですが、floatの回り込み解除にclearプロパティが必要なので入れてます。）
CSSはこんな感じ。
今回は予め正方形の画像を用意しましたが、縦×横の比率が異なる画像を正方形に見せたい場合は別途、同じ比率の画像を用意する必要があります。出来れば一度アップロードした画像はそのまま流用して正方形のサムネイルを作りたいので、次ではCSSを使った画像の切り抜き方法を紹介したいと思います。
（Photo by clearweather） 
Comment
管理人のみ閲覧できます
このコメントは管理人のみ閲覧できます
Re: タイトルなし
> 画像の上にマウスを乗せると、グレーの枠が出ますね。これってどうやったらいいのでしょうか？
上のご質問ですが作り方は簡単なので下記を参考にしてみてください。
スタイルシートに以下の要素を付け加えます。（細かい部分は調整してください。）
<style type="text/css">
a:link img {/* 未読 */
border: 2px solid #F5F5F5;
}
a:visited img {/* 既読 */
border: 2px solid #F5F5F5;
}
a:hover img {/* マウスオーバー */
border: 2px solid #B9B9B9;
}
a:active img {/* アクティブ */
border: 2px solid #B9B9B9;
}
</style>
一部分（エントリーページのみとか）の場合はdiv.class名をaの前に付けます。
例）div.content a:link img {/* 未読 */}
（上記はお借りしているテンプレートでの例になります）
上のご質問ですが作り方は簡単なので下記を参考にしてみてください。
スタイルシートに以下の要素を付け加えます。（細かい部分は調整してください。）
<style type="text/css">
a:link img {/* 未読 */
border: 2px solid #F5F5F5;
}
a:visited img {/* 既読 */
border: 2px solid #F5F5F5;
}
a:hover img {/* マウスオーバー */
border: 2px solid #B9B9B9;
}
a:active img {/* アクティブ */
border: 2px solid #B9B9B9;
}
</style>
一部分（エントリーページのみとか）の場合はdiv.class名をaの前に付けます。
例）div.content a:link img {/* 未読 */}
（上記はお借りしているテンプレートでの例になります）
急な質問にお答えいただきありがとうございました。
おかげでうまくいきました。
ありがとうございました。
おかげでうまくいきました。
ありがとうございました。
Trackback
