- 締切済み
jQuery：マウスオーバーで画像が切り替わる
下記のサイトのような事が実装できるjQueryプラグインを探しています。 http://www.sumitomo-rd-mansion.jp/shuto/shinjuku/private.html 実装したい事 ＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝ １）メイン画像の切り替えは 矢印をクリックするか サムネイルをマウスオーバーすると切り替わるようにしたい。 （スライドショーはなし） ２）メイン画像にはテキスト（説明文）も入れられる ３）メイン画像の下には、サムネイル画像も表示できる ＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝ 参考になるサイト等、ご存知でしたら教えていただけば幸いです。
- _rin
- お礼率71% (25/35)
- CSS
- 回答数2
- ありがとう数0
- みんなの回答 （2）
- 専門家の回答
みんなの回答
- ORUKA1951
- ベストアンサー率45% (5062/11036)
すみません。サンプルを書いておこうと思ったのですが、出かけてしまいまして・・ 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>
- ORUKA1951
- ベストアンサー率45% (5062/11036)
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> ぐらいで必要十分でしょう。
関連するQ&A
- jQueryのプラグイン（画像処理）を探していま
下記のサイトのような事が実装できるjQueryプラグインを探しています。 http://www.sumitomo-rd-mansion.jp/shuto/shinjuku/private.html 実装したい事 ＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝ １）メイン画像の切り替えは 矢印をクリックするか サムネイルをマウスオーバーすると切り替わるようにしたい。 ２）サムネイルはマウスオーバーで画像と文字が切り替わるようにしたい ＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝ 参考になるサイト等、ご存知でしたら教えていただけば幸いです。
- 締切済み
- JavaScript
- jQueryスライドプラグイン
jQueryスライドプラグイン FLASHを使用せずにjQueryのプラグインで以下のような表現は可能でしょうか？ http://www.starcat.co.jp/ 以下が実現したいです。 ・メイン画像がフェードまたは、スライドで切り替わる ・メイン画像クリックで別のページへリンク ・サムネイルクリックでメイン画像が切り替わる ・ランダムで表示できる ・自動で遷移する。
- 締切済み
- JavaScript
- jQueryのスライドショーのカスタマイズについて
仕事であるサイトを作っているのですが、製品ページの所で製品画像をスライドショーにして実装しようと思っており、jQueryで理想に近いプラグイン(galleriaというものです)を発見したのですが、スライドショーの領域内でさらに拡大画像ができるようにしてほしいと言われ自分でカスタマイズしようとやってみましたがうまくできません。 皆様のお力をお貸しいただけないでしょうか。 ■galleriaのプラグインを使ってカスタマイズする内容 galleriaのサイトからファイルをダウンロードし(http://galleria.aino.se/download/)メイン画像(サムネイルの上にある画像)内、もしくは外に「拡大画像」というボタンを設置し、クリックするとモーダルウィンドウで拡大画像が表示されるようにしたい。 ■自分でうまくできないところ このプラグインはサムネイル、もしくは左右にある矢印をクリックすると画像が変わる仕様になっており、「拡大画像」ボタンに今表示されているメイン画像を判別させて拡大画像を表示させる処理が必要となると思うのですが、うまくいきません。 モーダルウィンドウはthick.box(http://jquery.com/demo/thickbox/)を使って表示させています。 その他に、もっと簡単にできる方法など教えていただければ助かります。 よろしくお願いいたします。
- 締切済み
- JavaScript
- マウスオーバーで横に反転するjqueryについて
マウスオーバーで横に画像が反転するjqueryのプラグインを探しています。 http://lab.smashup.it/flip/ このサイトのように画像Aから画像Bに反転するのですが、下のサムネイルをクリックするのではなく、画像自体にマウスオーバーすることでその画像が反転するものを探しています。 ※左から右にスライドするものは省きます。 もし同様のものがあるのであれば、jqueryに限らず情報をお待ちしています。 お力添えよろしくお願いします。
- ベストアンサー
- JavaScript
- jQueryで教えてください＞＜；
画像にマウスを置いたときに、下にテキストが表示され、なおかつ両端の矢印をクリックするとスライドするようなjQueryを教えてください＞＜；宜しくお願いします！！
- 締切済み
- JavaScript
- Jqueryの超初心者です
いつもはコピペで作業しています。 こちらのサイトを参考にサムネイル画像をクリックするとメイン画像が切り替わるページを作成しています。 http://memocarilog.info/jquery/7477 表示されたメイン画像に外部リンクを設定するにはどう記述したら良いでしょうか？ お願いします。
- 締切済み
- JavaScript
- jqueryスライドのズレ修正
jqueryのスライドショーを実装しました。 現在、添付画像のようにスライドのズレが直せません。 左端に一つ前の画像が残ってしまう状態です。。 参考にコピーさせてもらったのは下記サイトです。 http://black-flag.net/jquery/20120215-3671.html どう修正が必要でしょうか。 宜しくお願い致します。
- 締切済み
- JavaScript
- jquery(js)にて実装したいスライドショー
jquery(js)にて実装したいスライドショー機能があります。 参考サイト http://j-sen.jp/kanto/city_411_1.htm サムネイル画像下の "他の写真を見る"の左右の矢印をクリックでサムネイルが 切り替わる機能です。 写真のＵＲＬはシステムにより吐き出すため, 枚数は決め打ちではないので、配列に画像URLを入れていくとは思うのですが、 うまくソースがかけません。 地頭のある方、何卒力添え宜しくお願いいたします。
- ベストアンサー
- JavaScript
- WordPressのプラグインとjQueryのそれ
jQueryの存在を知り、WordPressでスライド画像表示なんかが簡単に実現できることを知りました。さらには、WordPressのプラグインとして直接実装も可能なようですが、両方可能な場合、どちらを選べばよいのでしょうか？ Nivo Slider, ColorBox, FancyBoxを手始めに候補としています。 例えば、jQueryプラグインとして実装したほうが重くならない、などといった違いがあるのでしょうか？比較しつつ教えていただけると助かります。
- ベストアンサー
- ブログ
