はじめまして。
サムネイル画像をマウスオーバーすると、特定の場所に画像が表示される方法を教えて頂きたいです。
以下がイメージに近いです。が、サムネイル画像は自分で別に用意したいです。
http://mizuame.sakura.ne.jp/jquery.tgImageChange …
これを実現させる為には、どのjqueryを利用すれば良いのでしょうか?
色々とググってみたのですが、ぴったりと希望のものが見つからなく…。
あまり知識も無いので、丁寧に説明されているものですと助かります…(すみません。)
わかりやすい説明画像も添付しました。
ぜひ教えて頂きたいです。緊急で困っています。よろしくお願い致します!
A 回答 (2件)
- 最新から表示
- 回答順に表示
No.2
- 回答日時:
ご自身で挙げているサイトのjQueryでいいと思いますが、
何故それを使わないのでしょう…?
http://wataame.sumomo.ne.jp/archives/1841
そのサイトで紹介しているのも、
サムネイルは拡大画像の縮小版ではなく、別の画像ですよ。
No.1
- 回答日時:
普通にCSSでよいのでは??HTMLさえちゃんと書いてあったらどのようにでも・・
<div id="album">
<ul>
<li><img src="./images/thumbnail/1.jpg" width="80" height="60" alt="なんたら">
<p><img src="./images/photo/1.jpg" width="480" height="360" alt=""></p>
</li>
<li><img src="./images/thumbnail/2.jpg" width="80" height="60" alt="なんたら">
<p><img src="./images/photo/2.jpg" width="480" height="360" alt=""></p>
</li>
<li><img src="./images/thumbnail/3.jpg" width="80" height="60" alt="なんたら">
<p><img src="./images/photo/3.jpg" width="480" height="360" alt=""></p>
</li>
・・だったら、下記サンプルのように・・
参考)
⇒ナビゲーションリストを様々にデザインしてみよう。( http://www.ichiya.com/WebService/Howto/sample/HT … )
でブラウザの表示メニュー(Chromeを除く)でスタイルシート⇒{画像下}を選択した形かと思います。
全体
★Another HTML-lint 5( http://www.htmllint.net/html-lint/htmllint.html# )
のDATA入力でチェック済みのWeb標準です。HTML4.01strict+CSS2.1
★画像は./photoと./tumbnail/にそれぞれ保存する。
★印刷時は全部印刷されるようにしてます。
★タブは_に置換してあるので戻す。
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html lang="ja">
<head>
_<meta http-equiv="content-type" content="text/html; charset=Shift_JIS">
_<title>サンプル</title>
_<meta name="author" content="ORUKA1951">
_<meta http-equiv="Content-Style-Type" content="text/css">
_<link rev="made" href="mailto:oruka1951@hoge.com" title="send a mail" >
_<link rel="START" href="../index.html">
_<style type="text/css" media="screen">
<!--
#album{/* アルバムの表示位置 */
width:480px;height:420px;
margin:0 auto;
position:relative;
}
#album ul,#album ul li{
list-style:none;
margin:0;padding:0;
}
#album ul{/* リストの表示位置 */
height:60px;
position:absolute;bottom:0;left:0;
}
#album ul li{/* リスト項目を並べて */
display:block;
float:left;
width:80px;
}
#album ul li p{
position:absolute;/* 画像の表意位置 */
top:-380px;left:0;
display:none;/* 普段は隠す */
}
#album ul li:hover p{/* liに載ると見せる */
display:block;
}
-->
_</style>
</head>
<body>
_<div class="header">
__<h1>タイトル</h1>
__<p>このページでは・・・・</p>
_</div>
_<div class="section">
__<h2>見出し</h2>
__<div id="album">
___<ul>
____<li><img src="./images/thumbnail/01.jpg" width="80" height="60" alt="なんたら">
______<p><img src="./images/photo/01.jpg" width="480" height="360" alt=""></p>
____</li>
____<li><img src="./images/thumbnail/04.jpg" width="80" height="60" alt="なんたら">
______<p><img src="./images/photo/04.jpg" width="480" height="360" alt=""></p>
____</li>
____<li><img src="./images/thumbnail/05.jpg" width="80" height="60" alt="なんたら">
______<p><img src="./images/photo/05.jpg" width="480" height="360" alt=""></p>
____</li>
____<li><img src="./images/thumbnail/01.jpg" width="80" height="60" alt="なんたら">
______<p><img src="./images/photo/01.jpg" width="480" height="360" alt=""></p>
____</li>
___</ul>
__</div>
_</div>
_<div class="footer">
__<h2>文書情報</h2>
__<dl class="documentHistry">
___<dt id="FIRST-PUBLISHED">First Published</dt>
___<dd>2012-08-10</dd>
___<dt id="LAST-MODIFIED">Last Modified</dt>
___<dd>2012-08-10 12:00:00 (JST)</dd>
__</dl>
__<address>© ORUKA1951 2012 - 2016 All Rights Reserved mailto:*****</address>
_</div>
</body>
</html>
お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう!
似たような質問が見つかりました
- Windows 10 Windows10の画像ファイルのサムネールがアイコン表示になってしまいました。 3 2022/07/09 13:01
- 画像編集・動画編集・音楽編集 エクスプローラー サムネイル表示されない 1 2022/12/22 10:14
- AJAX 自作の地図をグーグルマップのようにしたい 3 2022/11/15 11:53
- YouTube ユーチューブへの動画投稿にサムネイルを付ける方法は? 1 2022/07/21 23:45
- Excel(エクセル) エクセルにサムネイル画像組み込み 2 2022/09/02 17:13
- Windows 10 フォルダ内の全ての画像を矢印キーでスライドできるようにしたい 1 2022/10/21 12:53
- フリーソフト 倍率自動調整して全画面表示できるフリーの画像ビューアー 1 2023/08/24 10:55
- フリーソフト 画像貼り付け、URLに飛べる軽いメモ帳 3 2022/05/12 07:42
- 教えて!goo 教えてgooに要望有りますか? 5 2023/01/18 11:41
- YouTube youtube 画像のサイズを少し小さくするには 1 2023/02/14 08:55
関連するカテゴリからQ&Aを探す
デイリーランキングこのカテゴリの人気デイリーQ&Aランキング
-
リンクを知らせる手のマークが...
-
画像アイコンにリンクつけたい...
-
レスポンシブデザインで space....
-
ボタンをセル内一杯に表示させ...
-
FC2カートのテンプレートでの商...
-
HTMLは、シングルクォートかダ...
-
CSS での画像サイズの上限設定...
-
HTMLコードを教えてください。...
-
ウインドウを狭めてもレイアウ...
-
バナーの貼り方が、わかりません…
-
CSSで自動改行させたくない。
-
画像を、横並びにするには!?
-
画像の配置について(table?)
-
水面の波紋
-
UDP通信を使うチャットプログラ...
-
メニュー
-
画像のスライスiモードサイトで...
-
リンクまわりの枠
-
table で画像をピッタリとくっ...
-
レスポンシブでブロック内要素...
マンスリーランキングこのカテゴリの人気マンスリーQ&Aランキング
-
リンクを知らせる手のマークが...
-
ボタンをセル内一杯に表示させ...
-
htmlで画像を2個ずつ並べていき...
-
機種依存文字、m2(平方メート...
-
HTMLタグのDL DT DDを使ってli...
-
画像の場合のみ、下線を消す方...
-
画像を縦に並べたら隙間ができ...
-
画像のサイズが変わらない
-
ポップアップウィンドウのサイ...
-
inputタグでサーバにデータを送...
-
HTMLでボタンを横に2つ並べる方法
-
【HTML/CSS】ボタンの枠が伸び...
-
リンクをつけた画像をクリック...
-
XML画像データををHTMLで簡単に...
-
レスポンシブ対応のHTML・CSS(...
-
UDP通信を使うチャットプログラ...
-
HTMLのIMAGEに。。
-
ホームページで画像を横に並べ...
-
画像をクリックして元に戻すには
-
リンクを選択したときの青い枠...
おすすめ情報