こんにちはゲストさん。会員登録(無料)して質問・回答してみよう!

締切り済みの質問

jQuery:マウスオーバーで画像が切り替わる

下記のサイトのような事が実装できるjQueryプラグインを探しています。
http://www.sumitomo-rd-mansion.jp/shuto/shinjuku/private.html

実装したい事
==================================
1)メイン画像の切り替えは
矢印をクリックするか
サムネイルをマウスオーバーすると切り替わるようにしたい。
(スライドショーはなし)

2)メイン画像にはテキスト(説明文)も入れられる

3)メイン画像の下には、サムネイル画像も表示できる

==================================

参考になるサイト等、ご存知でしたら教えていただけば幸いです。

投稿日時 - 2011-10-10 10:20:11

QNo.7062405

困ってます

このQ&Aは役に立ちましたか?

0人が「このQ&Aが役に立った」と投票しています

回答(2)

ANo.2

すみません。サンプルを書いておこうと思ったのですが、出かけてしまいまして・・
IE7以降対応です。
★Another HTML-lint gateway ( http://openlab.ring.gr.jp/k16/htmllint/htmllint.html )
★W3C CSS 検証サービス ( http://jigsaw.w3.org/css-validator/#validate_by_input )
でチェック済み。
 添付画像は、Googleお勧め( http://www.google.com/support/webmasters/bin/answer.py?answer=35769&hl=jp#2 )のLynx( http://lynx-win32-pata.sourceforge.jp/index-ja.html )です。
 IE7以降、Firefox,googleChrome,Opera,Safari等は同じ。IE6以前はマウスオーバー時の画像こそ表示されませんが、リンクは有効です。
★タブは_に置換してあるので戻すこと。
★画像は指定サイズのものを用意してください。(thumbNaolは60×45,背景画像は480×360)

 HTMLは、スタイルシートを用いるため極めて簡潔です。
 スタイルシートもHTMLさえきちんと出来ていればわかりやすいはずです。
 そのため、検索エンジンは無論、読み上げソフト、点字出力端末などスタイルシートやjavascriptが無効なユーザーエージェントも理解できます。そして何と言っても自分自身でのメンテナンスが楽です。

<!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">
<!--
div.nav ul,div.nav ul li{display:block;list-style:none;margin:0;padding:0;}
div.nav a span{color:yellow;}
div.nav{
_width:486px;height:413px;margin:0 auto;
_position:relative;
_border:ridge gray 3px;background-color:black;
}
div.nav ul{
_height:48px;width:100%;bottom:0;
_position:absolute;
_background-color:black;
}
div.nav ul li{width:60px;margin:1px;float:left;}
div.nav ul li span{display:none;}
div.nav ul li a:hover span{
_display:block;width:480px;height:360px;
_position:absolute;top:-360px;left:3px;
_background-image:url(photo/01.jpg);
}
div.nav ul li a[href="./product1"]:hover span{background-image:url(photo/02.jpg);}
div.nav ul li a[href="./product2"]:hover span{background-image:url(photo/03.jpg);}
div.nav ul li a[href="./product3"]:hover span{background-image:url(photo/04.jpg);}
div.nav ul li a[href="./contactUs"]:hover span{background-image:url(photo/05.jpg);}
-->
_</style>
</head>
<body>
_<div class="nav">
__<ul>
___<li><a href="./books"><img src="photo/thumbnail/01.jpg" width="60" height="45" alt="書籍紹介"><span>説明文1</span></a></li>
___<li><a href="./product1"><img src="photo/thumbnail/02.jpg" width="60" height="45" alt="製品紹介1"><span>説明文2</span></a></li>
___<li><a href="./product2"><img src="photo/thumbnail/03.jpg" width="60" height="45" alt="製品紹介2"><span>説明文3</span></a></li>
___<li><a href="./product3"><img src="photo/thumbnail/04.jpg" width="60" height="45" alt="製品紹介3"><span>説明文4</span></a></li>
___<li><a href="./contactUs"><img src="photo/thumbnail/05.jpg" width="60" height="45" alt="コンタクト"><span>説明文5</span></a></li>
__</ul>
_</div>
</body>
</html>

投稿日時 - 2011-10-10 15:55:20

ANo.1

 jQueryを使うまでも無く、普通にHTML4.01strictとCSS2.1(いわゆるウェブ標準)で出来ると思いますが????

 個人の趣味の範囲ならともかく、多少でも一般に公開するものならjavascriptを使わなくても、検索エンジンを含む、どのようなユーザーエージェントからも情報が伝わるようにしましょう。
<div class="nav">
 <ul>
  <li><a href="./books"><img><span>説明文1</span></a></li>
  <li><a href="./product1"><img><span>説明文2</span></a></li>
  <li><a href="./product2"><img><span>説明文3</span></a></li>
  <li><a href="./product3"><img><span>説明文4</span></a></li>
  <li><a href="./contactUs"></a></li>
 </ol>
</div>
 ぐらいで必要十分でしょう。

投稿日時 - 2011-10-10 12:11:16

あなたにオススメの質問