• ベストアンサー
  • すぐに回答を!

サムネイル画像の拡大

サムネイル画像がオンマウス時に拡大するようにしたいと思い、色々調べました。 画像をtableタグ(表!?)の中に表示させようとすると、デザインが崩れるものばかりでした。 ようやく下記のサイトに辿り着き、デザインも崩さずに画像を拡大させることが出来たのですが・・・・・・ 複数の画像を同じように拡大できるようにしようとした所、拡大した画像が他の画像(拡大するように設定しているサムネイル画像)の下に表示されてしまいます。 これをサムネイル画像の下にならないようにするにはどうしたら良いのでしょうか??? また、この方法以外でも、比較的簡単でデザインを崩さない拡大のやり方があれば教えて下さい。 お願いします。 私が試したサイオトは下記のものです↓ http://tonecontrol.mods.jp/memo/css_thumbnail.html

共感・応援の気持ちを伝えよう!

  • 回答数1
  • 閲覧数269
  • ありがとう数8

質問者が選んだベストアンサー

  • ベストアンサー
  • 回答No.1

a.thumbnail { display: block; float: left; margin: 0.3em 10px 0.3em 0; } a.thumbnail img{ position: absolute; } この辺りを削除すればいいのですけど、画像を拡大したら他の画像が押し出されて、それこそデザインが崩れると思うのですが。

共感・感謝の気持ちを伝えよう!

質問者からのお礼

そうですね・・・・・・ 押し出されるようになってしまいました。。。 他のやり方を探してみます。 ありがとうございました!!

関連するQ&A

  • アメブロで画像の上にマウスオンで拡大させたい

    他のブログでは自分のブログ記事に使用した画像の上に、 マウスを上に持ってくると下記アドレスのように拡大されるのですが、 アメブロではできないです。 アメブロでは禁止になるのでしょうか? もし可能ならやり方を教えていただければありがたいです。 http://tonecontrol.mods.jp/memo/css_thumbnail.html

  • サムネイル画像にマウスカーソルが触れると拡大画像になる~その応用について

    JavaScript初心者です。どうぞよろしくお願いします。 サムネイルにオンマウスすると拡大画像が現われるよう「myBigImage」を使い記述し、これは実行できました。 そこで質問なのですが、同じ一つのhtml内で、下記のように二つのプログラムを並列させる事は可能でしょうか。 例) A(myBigImage)、A1(サムネイルの1)、A2(サムネイルの2) B(myBigImage)、B1(サムネイルの1)、B2(サムネイルの2) ※「サムネイルにオンマウスすると拡大画像が現われる」、  それを2グループ表示させたい、という事です。  例えば2つ目のグループ、Bを(myBigImage2)などとして  実行する事はできるのでしょうか。 初心者につきわかりにくい表現になってしまっているとしたら申し訳ありません。 この応用ができるかどうか、また万一可能な場合はどのように記述すればいいのか、教えていただけると大変助かります。 何とぞよろしくお願いします。

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

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

    • 締切済み
    • CSS
  • サムネイルをクリックすると画像が拡大表示されるようにするには?

    下記のページの「SAMPLE」を、サムネイルをクリックすると、選択した画像が真ん中の段の陰付き白枠の中に拡大表示されるようにしたいです。 インラインフレームは使いたくないのでJavaScriptでできないかと思っています。 ちなみに当方はJavaScript初心者です。 白枠はcssで#subcon2というボックスの背景に設定しています。 画像については、サムネイルの画像はs01.jpg、s02.jpg・・・という名前で、拡大表示用の画像はサムネイルの名前からsを取って、01.jpg、02.jpg・・・と、名前を付けて、このhtmlと同じ階層にある「images」フォルダの中の「sample_nail」フォルダに入ってます。 この情報で足りますか? どのようにすればいいでしょうか?よろしくお願い致します。 http://www.ac.auone-net.jp/~mrs/sample.html

  • highslideで拡大画像・サムネイルが表示されない

    こんにちは、いつもお世話になっています。 こちらで紹介して頂いたhighslide(http://vikjavev.no/highslide/)からサンプルをダウンロードしました。 サンプルの画像フォルダに自分の表示したい画像(拡大画像とサムネイル)をサンプルファイルと同名(full-image.jpg, thumbnail.jpg)で上書きしたのですが、画像が表示されません。 highslideを利用するには、あとどうすればよろしいのでしょうか? どなたかご教授お願いします。

  • table内の画像を中央寄せ、のせると拡大、方法?

    画像にマウスポインタをのせると画像が拡大される機能を備えた 画像の表を作りたいです。 テーブルの各セルに入る画像の配置を縦横両方中央揃えにしたいです。 CSSのマージンで調整しましたが、セルによって微妙に配置がずれてしまいました。 あと、画像は拡大されるのですが、拡大されていない画像が前面に出てきてしまいます。 各セルの画像の縦横中央揃え、画像が正しく拡大される方法を教えて下さい。 下記は自分が入力したHTMLとCSSです。それをFirefoxで表示したものを添付しました。 アドバイスをお願いいたします。 ~~~ HTML ~~~ <link rel="stylesheet"type="text/css" href="a.css"> <table border="1" width="500" cellpadding="5" bordercolor="#333333" /> <tr> <th bgcolor="#FFA07A">あいう <th bgcolor="#FFA07A">えおか <th bgcolor="#FFA07A">きくけ </tr> <tr> <td><a class="thumbnail" href="画像.jpg"><img src="画像.jpg" width="130" height="170" alt="" /></a></td> <td><a class="thumbnail" href="画像.jpg"><img src="画像.jpg" width="130" height="170" alt="" /></a></td> <td><a class="thumbnail" href="画像.jpg"><img src="画像.jpg" width="130" height="170" alt="" /></a></td> </tr> <tr> <td align="left">ああああああああああああああああ</td> <td align="left">いいいいいいいいいいいいいいい</td> <td align="left">うううううううううううううううう</td> </tr> </table> <br> <br> <table border="1" width="500" cellpadding="5" bordercolor="#333333" /> <tr> <th bgcolor="#FFA07A">こさし <th bgcolor="#FFA07A">すせそ <th bgcolor="#FFA07A">なにぬ </tr> <tr> <td><a class="thumbnail" href="画像.jpg"><img src="画像.jpg" width="130" height="170" alt="" /></a></td> <td><a class="thumbnail" href="画像.jpg"><img src="画像.jpg" width="130" height="170" alt="" /></a></td> <td><a class="thumbnail" href="画像.jpg"><img src="画像.jpg" width="130" height="170" alt="" /></a></td> </tr> <tr> <td align="left">ええええええええええええええええええええええ</td> <td align="left">おおおおおおおおおおおおおおおおおおおお</td> <td align="left">かかかかかかかかかかかかかかかかかか</td> </tr> </table> ~~~ CSS ~~~ a.thumbnail { display: block; float: left; } a.thumbnail img{ position: relative; } a.thumbnail, a.thumbnail img{ width: 130px; height: 170px; margin: 0px 0px 0px 5px; } a.thumbnail:hover { border: none; cursor: default; } a.thumbnail:hover img { width: auto; height: auto; }

    • ベストアンサー
    • HTML
  • サムネイルクリックで別ウィンドウに拡大画像表示

    javascriptにて画像のようなな形を作りたいのですが初心者で困っています。 ページAの画像をクリックすると別ウィンドウで拡大画像とその他のサムネイルが 表示され、そのウィンドウで各画像を切り替えて観覧できるようにしたいです。 元のページでの画像切替はよくありますが、別ページを開いて観覧する場合がわからず困っています。ページAと同じようなページを複数つくり、拡大のページBは共通で使えるようにしたいと思っています。 ページAのhtml部分は <li><a href=><img src="test.jpg" title="拡大時に表示する文"></a></li> <li><a href=><img src="test_a.jpg" title="拡大時に表示する文"></a></li> <li><a href=><img src="test_b.jpg" title="拡大時に表示する文"></a></li> この画像をクリックでページB拡大画像を表示し、画像と一緒にtitleに入れた文章を表示させたいと思っています。 用意する画像は各拡大画像1枚で、サムネイルのところはcssで小さくしています。 このような形は実現可能でしょうか? よろしくお願いします。

  • サムネイル画像のことで

    初めまして。ホームページにあるサムネイル画像がいきなり拡大表示されるようになり動かなくました。一つのホームページだけだったのですがいつの間にか他のホームページでも拡大表示されるようになりました。(拡大表示されない所も有ります)どうしたらいいかわかりません。よろしくお願いします。{動かなくなるのは一つだけ今の所}

  • 小さい画像にマウスを合わせると小さい画像の右上(右下)に拡大画像が表示される

    ホームページ作成で教えて欲しいのですが、小さなマンションのサムネイル画像の上にマウスを持って行くと、大きな画像がサムネイル画像の右下か右上に表示されるような仕組みを作りたいのですが、どのようにしたらいいのでしょうか?ヤフー不動産などで実際にあるのですが、小さな間取り図にオンマウスで拡大間取りが見れるようにしたいのです。 javaスクリプトで作成しているのでしょうか?javaは当方分からないのですが、アドバイスをお願い致します。

  • サムネイルからの画像の拡大表示の際について

    画像がたくさんあるサイトがあるのですが、サムネイルから画像を選んでクリックすると拡大表示されるのですが、その際にIEの一番下のバーにダウンロード中と出るのですがダウンロードは、ページを開くより不正なプログラムがダウンロードされているようで怖いのですが不正行為をされる心配ないのでしょうか?