マウスが乗った写真を拡大表示する商品レイアウト

ファンブログにアップロードした画像URLの調べ方は「ファンブログでアップロードした画像の場所」に書いてあります。

Amazonなんかでやっている商品レイアウトで小さな写真を並べておいて、どれかにマウスを乗せると、その写真の拡大図を表示するという手法があります。その実現方法です。この下に６つ並んだダースベイダーのどれかにマウスを合わせると、その写真が下に大きく表示されます。

レゴ（LEGO）スターウォーズダースベイダー Star Wars Darth Vader Alarm Clock 目覚まし時計 9002113

LEGOとスターウォーズがコラボレーションしたアラームクロック

手足が可動式なのでお気に入りのスタイルで飾れます。
頭の部分を押してアラームストップ＆ライト点灯。
デスクサイド、ベッドサイドを演出してくれるクロックです。

【メーカー名】LEGO
【品番・型番】9002113

サイズ：（約）前長23cm、幅15cm / 重量：（約）535g
材質：プラスチック / 生産国：中国
スペック：アラーム（スヌーズ機能付き）ライト付き
　　　　　単4乾電池×2本使用（付属）
箱・保証書：有り（6ヶ月）
特記事項：実際の商品とは若干異なる場合がございます。
　　　　　予めご了承ください。

3,675円（税抜：3,500円）

送料525円（お買い上げ金額合計8,000円以上で送料無料）

スターウォーズ LEGO ストーム・トルーパーアラームクロック/Storm Trooper ALARM CLOCKと
LEGO レゴ/スターウォーズヨーダ目覚まし時計♪はAmazonにあります！

ケンコーコム爽快ドラッグ LOHACO
Amazon R 楽天市場 Yahoo!ショッピングセブンネットショッピング

ちなみにこれは「カートに入れる」と本当に買うことができます

え！欲しいですか？困ったなぁ。そんなつもりじゃなくて、ただのサンプルなんだけど！いやぁ困った！でも仕方がない。どうしても欲しい方はをクリックしてお買い上げください。

ソースコード

今回説明するのは、左上のダースベーダーの写真だけのブロックです。その右の「説明文」や「カートに入れる」ボタンがあるブロックと、写真の下の「ストーム・トルーパー」や「Amazon」「楽天」等へのリンクがまとまっているブロック、この２つは説明には含めません。

先にソースだけをまとめて書きます。これをまるごとブログの記事にコピペして、画像URL1から6に表示したい画像のURLを入れるだけでも上のようになります。ただし、編集画面のオプションで改行を有効にしていると動かないと思います。改行を有効にしていても動くソースは記事の最後です。

<!--スタイルシート-->

<style type="text/css">
div#outer{
  float:left;
  width:50%;
  border:1px solid #dddddd;
  -webkit-border-radius:10px;
  -moz-border-radius:10px;
  border-radius:10px;
  padding:2%;
  margin-right:1em;
}
p.photos{
  text-align:center;
  margin:0;
  padding:0;
}
p.photos img{
  width:15%;
  height:auto;
}
img#print{
  width:100%;
  height:auto;
}
</style>

<!--JavaScript-->

<script type="text/javascript">
<!--
var show=function(src){
	document.querySelector('img#print').src=src;
}
//-->
</script>

<!--HTML-->

<div id="outer">

<p class="photos">
<img src="画像URL1" onmouseover="show(this.src);" />
<img src="画像URL2" onmouseover="show(this.src);" />
<img src="画像URL3" onmouseover="show(this.src);" />
<img src="画像URL4" onmouseover="show(this.src);" />
<img src="画像URL5" onmouseover="show(this.src);" />
<img src="画像URL6" onmouseover="show(this.src);" />
</p>

<img id="print" src="画像URL1" />

</div>

<br style="clear:left;" />

ソースコードの説明

説明の都合で書いてある順番とは違う順序で説明します。まず最初はHTMLです。

HTML


<div id="outer">

<p class="photos">
<img src="画像URL1" onmouseover="show(this.src);" />
<img src="画像URL2" onmouseover="show(this.src);" />
<img src="画像URL3" onmouseover="show(this.src);" />
<img src="画像URL4" onmouseover="show(this.src);" />
<img src="画像URL5" onmouseover="show(this.src);" />
<img src="画像URL6" onmouseover="show(this.src);" />
</p>

<img id="print" src="画像URL1" />

</div>

<br style="clear:left;" />

<div id="outer"> から </div> までが上の薄いグレーの枠線で囲まれた写真だけのブロックです。この中の上部に写真を6個並べて配置します。

src="画像URL1" となっているところには、画像ファイルのURLを入れます。

onmouseover="show(this.src);" 画像にマウスが乗ると（onmouseover）　show(this.src); を実行します。 showというのはこの後説明する、自作関数です。ここに出てくる this.src というのは、この場合は「画像URL1」になります。

ここが大きく表示される部分です。最初に何も表示されないのは分かりづらいので、初期値として「画像URL1」を入れています。そのため、ページを開いたときには「画像1」が表示されます。

JavaScript

<script type="text/javascript">
<!--
var show=function(src){
	document.querySelector('img#print').src=src;
}
//-->
</script>

先程出てきた自作関数 show がこれです。やっていることはidがprintのimgタグを探して、そのimgタグのsrcを、指定された物に差し替えるだけです。

上の小さい画像にはそれぞれ onmouseover="show(this.src);" が指定されているので、マウスが乗った画像それぞれの、this.src に差し替えられます。 this.src とは、つまりクリックされたimg(=this)のsrc（=画像のURL）です。

スタイルシート

スタイルシートは全部説明しません。

<style type="text/css">
div#outer{
  float:left;
  width:50%;
  border:1px solid #dddddd;
  -webkit-border-radius:10px;
  -moz-border-radius:10px;
  border-radius:10px;
  padding:2%;
  margin-right:1em;
}
p.photos{
  text-align:center;
  margin:0;
  padding:0;
}
p.photos img{
  width:15%;
  height:auto;
}
img#print{
  width:100%;
  height:auto;
}
</style>

青文字部分が上の6個の写真に対する部分で、それぞれの大きさを15%に指定しています。また、赤字部分が、下に大きく表示される箇所の指定で大きさを100%にしています。15%と100%の基準は細いグレーの枠で囲った部分です。このグレーの枠の部分は幅を50%に指定しています。50%なので画面全体ではなく、半分に表示されています。その50%に対する100%なので、大きい画像も画面の半分の大きさになります。

参考記事：絶対はみ出さない画像！自動でサイズ調節するスタイルシート

編集画面で改行を有効にしていても使えるソース

下のソースを張り付ければ、動くと思いますが、私は改行を無効にしているので試していません。なぜ改行があると動かないかは、別の記事「表テーブルが下がる原因と対処法」に書いてあります。

このソースを使う場合は、コメント欄に「使う」と書き残してください。

<!--スタイルシート-->
<style type="text/css">div#outer{float:left;width:50%;border:1px solid #dddddd;-webkit-border-radius:10px;-moz-border-radius:10px;border-radius:10px;padding:2%;margin-right:1em;}p.photos{text-align:center;margin:0;padding:0;}p.photos img{width:15%;height:auto;}img#print{width:100%;height:auto;}</style>

<!--JavaScript-->
<script type="text/javascript">var show=function(src){document.querySelector('img#print').src=src;}</script>

<!--HTML-->

<div id="outer">

<p class="photos">
<img src="画像URL1" onmouseover="show(this.src);" />
<img src="画像URL2" onmouseover="show(this.src);" />
<img src="画像URL3" onmouseover="show(this.src);" />
<img src="画像URL4" onmouseover="show(this.src);" />
<img src="画像URL5" onmouseover="show(this.src);" />
<img src="画像URL6" onmouseover="show(this.src);" />
</p>

<img id="print" src="画像URL1" />

</div>

<!--この下に書いたことが写真の右に表示される-->

ここに書いていることが写真の右に表示される

<!--この上に書いたことが写真の右に表示される-->

<br style="clear:left;" />

<!--この下に書いたことが写真の下に表示される-->
ここからは写真の下に表示される

関連記事：ファンブログでアップロードした画像の場所

新ブログ「Big Bang」で続きを読む →

ここにブログの名前を入れます

広告