世田谷社のネタ帖

「小さい画像を貼っておき、クリックすると大きい画像を表示する設定にしたい」
とのご質問にお答えします。

記事の投稿画面で「画像の挿入」ボタンをクリックします。




アップロードする写真を「２）オプション設定」の「表示方法」で「サムネイル」を選択して、画像を記事に挿入します。

すると、サムネイル画像（＝小さな画像）に、オリジナル画像をリンクする形で、画像が表示されます。サムネイル画像は幅100ピクセルになります。

以下のような感じです。


さらに「ついでにロールオーバーもできるといいのですが、できますか？？」というご質問もいただいておりますので、お答えします。

「ロールオーバー」とは、画像にカーソルを乗せるときに、画像が入れ替わることを言います（画像にカーソルを乗せるので、マウスオーバーとも言いますね）。

例えば、こんな感じ。


いろいろやり方はありますが、ここではjavascriptを使った方法をご紹介します。

記事の入力欄に、以下のようなコードを記述すればロールオーバーが実現できます。
<img src="始めに表示している画像のURL" alt="" onmouseover="this.src='カーソルを合わせたときの画像のURL' "onmouseout="this.src='カーソルを外したときに画像のURL（通常始めに表示していた画像）'">

ちょっと解説すると、これは画像を表示させるときのHTMLタグ「<img>」で、「src=」以下で画像を指定します。「img」=「image（イメージ）」「src」=「source（ソース）」という意味です。「onmouseover」＝「マウスを乗せた時」の画像を「this.src＝このソース」で指定しています。