サムネイルをマウスオーバーすると画像を表示

締切済

質問者：rondonnippon
質問日時：2013/11/15 09:01
回答数：2件

はじめまして。

サムネイル画像をマウスオーバーすると、特定の場所に画像が表示される方法を教えて頂きたいです。
以下がイメージに近いです。が、サムネイル画像は自分で別に用意したいです。
http://mizuame.sakura.ne.jp/jquery.tgImageChange …

これを実現させる為には、どのjqueryを利用すれば良いのでしょうか？
色々とググってみたのですが、ぴったりと希望のものが見つからなく…。
あまり知識も無いので、丁寧に説明されているものですと助かります…(すみません。)

わかりやすい説明画像も添付しました。
ぜひ教えて頂きたいです。緊急で困っています。よろしくお願い致します！

通報する

この質問への回答は締め切られました。

質問の本文を隠す

回答 (2件)

最新から表示
回答順に表示

No.2

回答者： tkmojo
回答日時：2013/11/15 10:24

ご自身で挙げているサイトのjQueryでいいと思いますが、

何故それを使わないのでしょう…？
http://wataame.sumomo.ne.jp/archives/1841

そのサイトで紹介しているのも、
サムネイルは拡大画像の縮小版ではなく、別の画像ですよ。

- 0
- 件

通報する

No.1

回答者： ORUKA1951
回答日時：2013/11/15 09:57

普通に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">

＿</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>