締切済み

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

2013/11/15 09:01

はじめまして。サムネイル画像をマウスオーバーすると、特定の場所に画像が表示される方法を教えて頂きたいです。以下がイメージに近いです。が、サムネイル画像は自分で別に用意したいです。 http://mizuame.sakura.ne.jp/jquery.tgImageChange/demo/index2.html これを実現させる為には、どのjqueryを利用すれば良いのでしょうか？色々とググってみたのですが、ぴったりと希望のものが見つからなく…。あまり知識も無いので、丁寧に説明されているものですと助かります…(すみません。) わかりやすい説明画像も添付しました。ぜひ教えて頂きたいです。緊急で困っています。よろしくお願い致します！

rondonnippon
お礼率0% (0/2)

CSS
回答数2
ありがとう数8

みんなの回答 （2）
専門家の回答

みんなの回答

tkmojo
ベストアンサー率50% (105/207)

2013/11/15 10:24 回答No.2

ご自身で挙げているサイトのjQueryでいいと思いますが、何故それを使わないのでしょう…？ http://wataame.sumomo.ne.jp/archives/1841 そのサイトで紹介しているのも、サムネイルは拡大画像の縮小版ではなく、別の画像ですよ。

ログインすると、全ての回答が全文表示されます。

ORUKA1951
ベストアンサー率45% (5062/11036)

2013/11/15 09:57 回答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/HTML/nav/navigation1.html ) 　でブラウザの表示メニュー(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>

ログインすると、全ての回答が全文表示されます。