1ヶ所の指定場所に拡大画像が表示された状態で、下段にいくつかのサムネイルを設置し、マウスをそのサムネイルに乗せると拡大画像がチェンジして、マウスを外すと元画像に戻るみたいな事をCSSだけで表現したいのですが可能でしょうか?感じとしては http://curucuru-select.com/?pid=7429014 のCSS版みたいなものをのぞんでいるのですが・・・多分このサイトはjavascriptでやってるみたいなんですけど・・できたら、サンプルソースをいただけるとありがたいのですが・・どうかよろしくお願いします。
No.6ベストアンサー
- 回答日時:
> 自分の質問で言う「拡大画像が表示された状態で」と言うのは、このサイトで言う#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
- 回答日時:
できますとだけ。
自分で考えて努力する方のお手伝いはしたいですが、丸投げ質問に、コピペソースが降ってくるのを待つ方のお手伝いはどこがわからないかもわからず、教えてあげようがありません。
見本のサイトをたたき台にご自分で改良されたソースとそのソースでの不具合を教えてください。
No.4
- 回答日時:
画像でなく文章でのリモートロールオーバーで説明されてますが、要は、「文字」の場所を<img src="">にすればいいと思います。1個だけ画像の見本もありますので、感じはわかると思います。拡大するのでなくて、2つの画像を用意されてます。大きな画像を用意して最初は小さなサイズで表示させればお望みのことができるかと。
簡単にいうと、最初にspanでかくしておいた画像をhoverで絶対位置指定で表示する。hoverが外れれば非表示で、別の場所の画像のhoverも同じ場所に指定する感じですね。
こっちも、結構古いアップみたいなので検証がいまどきのブラウザでないのでチェックしてみてはどうでしょう?
liで作られているので縦でも横でもなりますよ。
この回答への補足
Nine-nineさん回答有難う御座います。参考サイト確認いたしました。確かに自分の望んでいる事に近いのですが、自分の質問で言う「画像が表示された状態」と言う事で、ページを開いた時に一枚の画像が既に表示されている状態(スタート元画像として)でいくつかのサムネイルにマウスを乗せると拡大画像がチェンジするって事になるとこの参考サイト上どう指定する事になるのでしょうか?この感じでマウスOFF時は元のスタート拡大画像に戻るみたいのができれば良いのですけど・・・やはり構成上無理なのでしょうか?
補足日時:2008/05/17 16:31No.3
- 回答日時:
> CSS+HTMLでって事なんですけど・・・やはり無理なんでしょうか?
レイアウトによっては…可能です。下記など参考になるのでは。
http://www.lucky-bag.com/appendix/css-photo-gall …
<a>の疑似クラスを利用してpositionとz-indexを組み合わせる事で実現しています。
ただし、レイアウトは有る程度制限されると思いますし、上記にも「Opera と Safari では拡大画像が固定されない」と書いてあります通り、環境を選びます。
この回答への補足
ご回答ありがとう御座います。早速abrilさんの参考サイトのソースをこっちの状況に置き換えて試してみました。自分の質問で言う「拡大画像が表示された状態で」と言うのは、このサイトで言う#gallery {background:ってところですかね。ここに画像を指定すればマウスoff時や別の場所をクリックすることでここの画像に戻るんですかね?それとこのサイトはサムネイルが拡大画像の左側縦指定してあるのですけど、それを拡大画像の下横並びに指定するにはタグ上どうすればよいのでしょうか?また、下横並びのサムネイルの行数を増やすにはどう指定すればよいのでしょうか?度々申し訳ありませんが宜しくお願いします。
補足日時:2008/05/17 14:02No.2
- 回答日時:
>CSS+HTMLでって事なんですけど・・・やはり無理なんでしょうか?
残念ながら、無理です。
JavaScriptがダメだと、参考リンク先もダメですね。
htmlも文書構造でしかないですから、動的なことはできません。
大きな画像を普通にリンクで表示(リンク先に指定)するしかないかと。
No.1
- 回答日時:
無理です。
cssはあくまでも装飾のためにあるものですから、
カーソルを乗せると別の場所の画像が変わる、という「動的」なことはできません。
hoverでの背景画像の場合は、その場の背景(装飾)が変わるだけですね。
JavaScriptでよければ、参考サイトを。
http://www.tagindex.com/javascript/link/change3. …
この回答への補足
回答ありがとうございます。質問にCSSだけって記載しましたけど、あくまでもCSS+HTMLでって事なんですけど・・・やはり無理なんでしょうか?JavaScriptが使えればgoldfoxさんが教えてくれサイトを参考にして適用してみようと思いましたが、ショップの構成上(楽天)JavaScriptは禁止されていて使えません。以前も部分的にonmouseoverとかonclickなどのタグを入れてみたら禁止タグに引っかかってしまいました。でも、なぜかCSSはOKなんですよねあそこは・・・どうにかうまくできなんでしょうか?それもどきでもかまいませんが・・・
補足日時:2008/05/16 01:01お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう!
似たような質問が見つかりました
- Excel(エクセル) エクセルにサムネイル画像組み込み 2 2022/09/02 17:13
- Windows 10 Windows10の画像ファイルのサムネールがアイコン表示になってしまいました。 3 2022/07/09 13:01
- HTML・CSS スクロールすると追従する画像のコードを書いているのですが、追従する画像の大きさの調節が上手くいきませ 2 2022/04/18 12:52
- 画像編集・動画編集・音楽編集 エクスプローラー サムネイル表示されない 1 2022/12/22 10:14
- その他(ソフトウェア) IrfanView で画像のスクロール?できますか 1 2022/08/31 13:57
- YouTube ユーチューブへの動画投稿にサムネイルを付ける方法は? 1 2022/07/21 23:45
- AJAX 自作の地図をグーグルマップのようにしたい 3 2022/11/15 11:53
- X(旧Twitter) ツィッターの画像表示について 1 2023/08/17 09:28
- HTML・CSS CSSでサイトの背景に画像を組み込みたいのですが反映されません 2 2022/11/22 16:21
- HTML・CSS 下にスクロールしても、追従するボタンのコードを書いたのですが、ボタンの中の画像が半分しか表示されない 1 2022/04/16 21:31
関連するカテゴリからQ&Aを探す
おすすめ情報
デイリーランキングこのカテゴリの人気デイリーQ&Aランキング
-
<hr>の縦バージョンはありますか?
-
WEB上でディレクトリ内の画像を...
-
particles.jsの背景の上にテキ...
-
CSSでテキストのリストの・...
-
【至急お助け!】チェックボッ...
-
CSSのリスト 背景画像が表示さ...
-
IEで<div>の下の<img>がずれる
-
ホームページ背景の、透過率設...
-
インラインフレームでの背景画...
-
HTML・CSSコーディングが上手く...
-
ページごとに背景画像を変更し...
-
文字列の下に点線を出す
-
テーブルセルの背景画像のサイ...
-
背景画像をくりかえさないhtml
-
テキストの横にアイコンを並べたい
-
テキストのフェードインの方法
-
CSSで背景画像の比率保持、拡大...
-
見出しの複数行の対応について
-
ホームページの背景画像を画面...
-
CSSでの動画のマスク処理
マンスリーランキングこのカテゴリの人気マンスリーQ&Aランキング
-
画像の上にテキスト配置で、拡...
-
画像とその下にあるテキストの...
-
<hr>の縦バージョンはありますか?
-
【至急お助け!】チェックボッ...
-
【Webサイト】画像が小さく表示...
-
background-repeat CSS で切れ...
-
htmlかcssで背景の白い枠をなく...
-
background-sizeの背景で最小値...
-
lightbox2で画像を天地左右中央...
-
ページごとに背景画像を変更し...
-
LightBoxの矢印の出し方
-
WEB上でディレクトリ内の画像を...
-
IMGタグで画像の繰り返し使用は…
-
iframe内をクリックさせない方...
-
同じ画像 複数回使用
-
画像上に文字を表示するとiPhon...
-
background-sizeでcontainする...
-
ページの上下に白い横線が入る
-
コーディング中、右側に謎の余...
-
画像を複数横に並べ、かつそれ...
おすすめ情報