CSSだけでサムネイルから拡大画像チェンジ

質問

1ヶ所の指定場所に拡大画像が表示された状態で、下段にいくつかのサムネイルを設置し、マウスをそのサムネイルに乗せると拡大画像がチェンジして、マウスを外すと元画像に戻るみたいな事をCSSだけで表現したいのですが可能でしょうか？感じとしては　http://curucuru-select.com/?pid=7429014　のCSS版みたいなものをのぞんでいるのですが・・・多分このサイトはjavascriptでやってるみたいなんですけど・・できたら、サンプルソースをいただけるとありがたいのですが・・どうかよろしくお願いします。

回答No.6

abril

> 自分の質問で言う「拡大画像が表示された状態で」と言うのは、このサイトで言う#gallery {background:ってところですかね。ここに画像を指定すればマウスoff時や別の場所をクリックすることでここの画像に戻るんですかね？

そう思われたのであれば、まずは実際に試してみてはいかがでしょう？
背景色ではなく背景画像を指定する場合は、位置やリピートの指定も追加しなければなりませんが。

> このサイトはサムネイルが拡大画像の左側縦指定してあるのですけど、それを拡大画像の下横並びに指定するにはタグ上どうすればよいのでしょうか？
> 下横並びのサムネイルの行数を増やすにはどう指定すればよいのでしょうか？

このサイトのソースには、CSSのそれぞれのプロパティが「どの様な働きをしているか」が具体的にコメントされていますので、それらを読み解けば応用はできる筈です。サムネイルを横並びにする事自体はfloatを定義に組み込めば簡単にできますが、このサンプルではサムネイルと拡大画像は同じ一枚の画像を使用（拡大画像に見えているのが実寸、サムネイルは同じ画像をCSS上で幅・高さを指定して縮小して見せている）している事もありますので、サムネイル（左）＋拡大画像右→拡大画像（上）＋サムネイル（下）というレイアウトに変更し、かつサムネイルの行数を増やす為には、関連する幅・高さ・位置関係等の定義を全て辻褄に合う様に変更しなければなりません。
上記がヒントです。もし、これらを読んでもピンと来ない、わからない、という事であればレイアウト変更は現在の質問者様には手に余る作業という事になるかと思いますので、サンプルのレイアウト・パターンをそのまま使用される事をお奨めします。レイアウトのパターンを変更しなければ、現在の縦並びのサムネイル画像を増やて行くのはかなり簡単な作業だと思いますので。

ちなみに、Nine-nine様と同様、こちらのサンプルでも編集次第で質問者様の仰る様なレイアウトは実現可能です。

補足

abril様度々ご回答ありがとうございます。ご指摘の通り参考ページをもとに自分の解かる範囲でタグをサイトの構成に合わせ反映させてみました。それで、例の#gallery { background:のところに元画像を指定し、#gallery li{ のところで、float: left;にして縮小サムネイル画像を横並びにできたのは良いのですが、位置的に拡大画像の下に配置する事いまいちわからず、参考サイトの元となった　http://www.cssplay.co.uk/menu/gallery4.html#nogo　のリンクがあったので、ここのレイアウト・ソースを参考に縮小画像をなんとか下げました。（この下指定方法で良いのでしょうか？）が、これだと#gallery li { background の画像が上記の#gallery { background:元画像の上に表示されてしまいます。（オンマウス時には隠れますが・・）
z-index で優先順位を下げたりしましたが変わりません。今現在は強引に
<ul id="gallery">と<li>の間に元画像を指定して /* マウスオーバーやクリック時に現れる背景画像 */を表示させないようにしています。#gallery li { background の画像を　no-repeat none にしてしまうとサムネイル・オンマウス時も表示されなくなってしまいます。どうしたら正道な方法で元画像の上に表示されなるかよろしくお願いします。無知で申し訳ありませんが現在のソースを記載します。

<style type="text/css">
<!--

/*---- ギャラリー ----*/
#gallery {
width: 500px; /* サムネール画像と拡大画像を足した幅 */
height: 600px;
list-style-type: none;
position: relative; /* 子要素の位置を absolute させるために指定 */
background: url(image.jpg) no-repeat;
padding-left: 0px;
margin-left: 50px;

}
#gallery a img {
width: 100px; /* サムネール用に縮小 */
height: 100px; /* サムネール用に縮小 */
border: none;
position: relative; /* z-index を指定するため */
z-index: 3; /* 常に最前面のレイヤーへ表示 */

}
#gallery li {
width: 100px;
height: 100px;
background: url(click.jpg) bottom left no-repeat;
/* マウスオーバーやクリック時に現れる背景画像 */
z-index: 2; /* 常に最前面のレイヤーへ表示 */
font-size: 0;
line-height: 0; /* 同上 */
float: left;
list-style-type:none;
vertical-align: bottom ; /*同上 */
margin-top: 5px;

}
#gallery a {
display: block;
width: 100px;
height: 100px;
position:relative; /* z-index を指定するため */
z-index: 3; /* 最前面のレイヤーへ表示 */

}
#gallery a:hover {
width: 500px; /* マウスオーバーで画像拡大 */
height: 500px; /* マウスオーバーで画像拡大 */
padding-bottom: 100px; /* 下のサムネール分余白をとる */
position: absolute;
top: 0;
left: 0px;
z-index: 2; /* レイヤー階層をひとつ下に落とす */
}
#gallery a:hover img {
width: 500px; /* マウスオーバーで画像拡大 */
height: 500px; /* マウスオーバーで画像拡大 */
position: relative; /* z-index を指定するため */
z-index: 2; /* レイヤー階層をひとつ下に落とす */
left: 0px;
}
#gallery a:active,
#gallery a:focus {
width: 500px;
height: 500px;
padding-bottom: 100px; /* 下のサムネール分余白をとる */
position: absolute;
top: 0;
left: 0;
z-index: 1; /* レイヤー階層を更にひとつ下に落とす */
}

#gallery a:active img,
#gallery a:focus img {
width: 500px;
height: 500px;
position: relative; /* z-index を指定するため */
z-index: 1; /* レイヤー階層を更にひとつ下に落とす */
}

#gallery li.pad {
height:500px;
display:block;
margin-top: 0px;
width:500px;
font-size:0;
}
/*---- ギャラリー END ----*/
-->
</style>

<ul id="gallery">
<li class="pad"></li>
<!--
<img　src="gouin-jadou.jpg">
-->
<li><a href="#item1"><img src="item1.jpg"></a></li>
<li><a href="#item2"><img src="item2.jpg"></a></li>
<li><a href="#item3"><img src="item3.jpg"></a></li>
<li><a href="#item4"><img src="item4.jpg"></a></li>
<li><a href="#item5"><img src="item5.jpg"></a></li>
</ul>

回答No.5

Nine-nine

できますとだけ。
自分で考えて努力する方のお手伝いはしたいですが、丸投げ質問に、コピペソースが降ってくるのを待つ方のお手伝いはどこがわからないかもわからず、教えてあげようがありません。

見本のサイトをたたき台にご自分で改良されたソースとそのソースでの不具合を教えてください。

回答No.4

Nine-nine

http://www.k5.dion.ne.jp/~i-araki/css/onmouse.html
画像でなく文章でのリモートロールオーバーで説明されてますが、要は、「文字」の場所を<img src="">にすればいいと思います。１個だけ画像の見本もありますので、感じはわかると思います。拡大するのでなくて、２つの画像を用意されてます。大きな画像を用意して最初は小さなサイズで表示させればお望みのことができるかと。

簡単にいうと、最初にspanでかくしておいた画像をhoverで絶対位置指定で表示する。hoverが外れれば非表示で、別の場所の画像のhoverも同じ場所に指定する感じですね。

こっちも、結構古いアップみたいなので検証がいまどきのブラウザでないのでチェックしてみてはどうでしょう？

liで作られているので縦でも横でもなりますよ。

補足

Nine-nineさん回答有難う御座います。参考サイト確認いたしました。確かに自分の望んでいる事に近いのですが、自分の質問で言う「画像が表示された状態」と言う事で、ページを開いた時に一枚の画像が既に表示されている状態（スタート元画像として）でいくつかのサムネイルにマウスを乗せると拡大画像がチェンジするって事になるとこの参考サイト上どう指定する事になるのでしょうか？この感じでマウスOFF時は元のスタート拡大画像に戻るみたいのができれば良いのですけど・・・やはり構成上無理なのでしょうか？

回答No.3

abril

> CSS+HTMLでって事なんですけど・・・やはり無理なんでしょうか？

レイアウトによっては…可能です。下記など参考になるのでは。

http://www.lucky-bag.com/appendix/css-photo-gallery/gallery.html

<a>の疑似クラスを利用してpositionとz-indexを組み合わせる事で実現しています。
ただし、レイアウトは有る程度制限されると思いますし、上記にも「Opera と Safari では拡大画像が固定されない」と書いてあります通り、環境を選びます。

補足

ご回答ありがとう御座います。早速abrilさんの参考サイトのソースをこっちの状況に置き換えて試してみました。自分の質問で言う「拡大画像が表示された状態で」と言うのは、このサイトで言う#gallery {background:ってところですかね。ここに画像を指定すればマウスoff時や別の場所をクリックすることでここの画像に戻るんですかね？それとこのサイトはサムネイルが拡大画像の左側縦指定してあるのですけど、それを拡大画像の下横並びに指定するにはタグ上どうすればよいのでしょうか？また、下横並びのサムネイルの行数を増やすにはどう指定すればよいのでしょうか？度々申し訳ありませんが宜しくお願いします。

回答No.2

goldfox

＞CSS+HTMLでって事なんですけど・・・やはり無理なんでしょうか？
残念ながら、無理です。
JavaScriptがダメだと、参考リンク先もダメですね。
htmlも文書構造でしかないですから、動的なことはできません。
大きな画像を普通にリンクで表示（リンク先に指定）するしかないかと。

回答No.1

goldfox

無理です。
cssはあくまでも装飾のためにあるものですから、
カーソルを乗せると別の場所の画像が変わる、という「動的」なことはできません。
hoverでの背景画像の場合は、その場の背景（装飾）が変わるだけですね。

JavaScriptでよければ、参考サイトを。
http://www.tagindex.com/javascript/link/change3.html

補足

回答ありがとうございます。質問にCSSだけって記載しましたけど、あくまでもCSS+HTMLでって事なんですけど・・・やはり無理なんでしょうか？JavaScriptが使えればgoldfoxさんが教えてくれサイトを参考にして適用してみようと思いましたが、ショップの構成上（楽天）JavaScriptは禁止されていて使えません。以前も部分的にonmouseoverとかonclickなどのタグを入れてみたら禁止タグに引っかかってしまいました。でも、なぜかCSSはOKなんですよねあそこは・・・どうにかうまくできなんでしょうか？それもどきでもかまいませんが・・・