jQueryを使ったブロック外の画像変化

前へ 次へ
このQ&Aのポイント
  • jQueryを使用して、ブロック外の画像を変化させることができる方法について質問します。
  • 町名の一覧と地図画像の２つのブロックがあり、町名をポイントすると地図の該当箇所の色が変わる仕組みを作りたいです。
  • ロールオーバーさせる方法やJavaScript以外での実現方法について教えてください。
回答を見る
  • ベストアンサー

jQueryを使ったブロック外の画像変化

いくつか候補としてパターンをあげたいのですが知識不足で具体案が浮かばないので質問参りました。 参照や情報程度でもかまいませんのでよろしくお願いします。 町名の一覧（テキスト）と、地図画像の２つブロックがある状態で、町名をポイントすると地図の該当箇所の色が変わる（hover用画像を作るでも四角い領域で色を乗せるでもよい）、という仕組みを作りたいのですが、以下質問です。 　１，jQueryでロールオーバーさせるのが一番簡単だと聞きましたが「jquery　ロールオーバー」で調べてはみましたが希望する情報がありませんでした。調べる方向が間違ってるのでしょうか（こういう検索をしろ、みたいなのでかまいません） 　２　javaScript以外で上記仕組みを行うことは可能でしょうか。 ※対応する画像は１つではなく、ページによって複数枚の場合もあります。（テキスト１～５まで画像Aの中に変化する箇所があり、テキスト６～８が画像B、など）

質問者が選んだベストアンサー

  • ベストアンサー
回答No.1

FLASHで出来ると一番いいんですけどが… とりあえず私が今パッと思いついた方法です。 ちょっと本来の使い方とは違う＆質問者様の意図とは違うかもしれませんが jqueryのqtipというプラグインなんかどうでしょうか？ 本来はロールオーバーした際に吹き出しを表示させるプラグインなのですが 吹き出し位置の座標指定や吹き出しの色等様々な設定ができます。 もちろん吹き出しではなく単なる四角い領域を表示することや、任意の画像を表示させることも可能です。 参考までにどうぞ。 http://ex.osaka-kyoiku.ac.jp/~fujii/KOU/qtipReference.html

picicate
質問者

お礼

ありがとうございました！ 最終的にはプラグインを使用しない別方法を使うことになりましたが大変参考になりました。

  1. カテゴリ
  2. [技術者向] コンピューター
  3. プログラミング・開発
  4. JavaScript

関連するQ&A

  • タブメニューの画像切り替えについて

    現在以下のサイトのソースでタブのjavascriptで設置しようとしているのですが うまくいかないため、質問させていただきました。 http://www.ezgate-mt.sakura.ne.jp/jquery/71.html ロールオーバーとアクティブの画像を別々にしたいため、 Javascriptのなかの 「// ロールオーバー 」以下の「_o」と書かれている部分を「_act」と 書き換えて「***_act.gif」という画像も用意しました。 ところが、たとえば番目のボタンをクリックすると画像名が 「nav-04_act_o.gif」になってしまい、画像が消えてしまいます。 ロールオーバーとアクティブの画像を別々にしたいとき どのように設定すればいいのかご教授いただけないでしょうか？ ちなみにコンテンツの切り替えは使用せずボタンの箇所のみを 使用する予定です。 どうぞよろしくお願いします。

  • jQueryを使ったロールオーバーについて

    初めまして。Webサイト作成の初心者です。 JQueryを使って、フェードエフェクト効果のあるロールオーバーを作成したいと思っております。 例えば次のサイトでは、若干フェードエフェクト効果のあるロールオーバーとなっておりますが、ソースを見るとbody内にはオフマウス用の画像だけが記されております。 http://mizuame.sakura.ne.jp/jquery.tgImageRollover/demo/script2.html オンマウス用の画像への切り替えはCSSで行っているのでしょうか？ ちなみに、グローバルメニューなどでは、オフマウス用とオンマウス用の画像を一つにし、CSSで座標を調整することで、ロールオーバーをすることが多いと思いますが、この方法だとJQueryを使ってロールオーバーにフェードエフェクト効果を付けることはできないのでしょうか？ それとも、やはりロールオーバーにフェードエフェクト効果を付けるには、オフマウス用の画像とオンマウス用の画像を、それぞれ用意し、オフマウス用の画像はHTMLに記述し、オンマウス用の画像はCSSに記述するのでしょうか？ どのような回答でもお受けしたい所存で御座いますので、どうか宜しくお願い致します！！

  • jQuery背景画像動かすパララックス

    http://yuki930.v-colors.com/ このサイトの背景画像を作りたいです。 ですが、まず画像背景の作り方がわかりません。 それとマウスを動かすと立体的に動く仕組みのやり方がわかりません。 (上のサイトは少し弧を描くように回転しています。) 検索で探しましたところこのようなものがヒットしました。 マウスの動きに追従して奥行きのある背景移動をするjQueryプラグイン「jquery.parallax.js」 http://www.webopixel.net/javascript/381.html たぶんこれであってると思います。 一回違うやつを作ってみました。 jQuery/CSS3で雲をゆらゆらさせる http://www.webopixel.net/javascript/718.html しかし、背景が透明にならず重なってしまいました。（Javasucriptのほうはうまく組み込めました。） まず、背景画像を透明にするやり方が一点と 次に、マウスを動かすと背景が立体的に弧を描くようにするやり方 以上二点を教えて頂きたく存じます。何卒よろしくお願い申し上げますm(_ _)m

  • xmlとロールオーバー（jQuery1.52）

    以下方法使ってロールオーバーを敷いたのですが、 http://www.finefinefine.jp/web/kiji1359/ ページの一部の情報でxmlから読み込み、形成している箇所があって、そこのimgは全くロールオーバーされません。 一応JSの読み込み順で一番最後にロールオーバーはおいたのですが、これはどうしてでしょうか。 よろしくお願いします。

  • naviのa:hover画像を固定する方法

    Dreamweaver HTML5にてコーディングをしています。 Gナビにて画像を使ったロールオーバーをしています。 その際に下層ページに飛んだ時、そのページを選択している事が分かるように hoverの状態を保っていられるjQueryを教えて頂けたら幸いです。 どういった画像を用意すれば良いかも教えて頂けると嬉しいです （例：hover画像が下にくっついてるもの・画像が全て別々になっているもの等） 上手く説明できずすいません。

  • cssとjavascriptを使って画像の一部をロールオーバー

    以下の条件でロールオーバーをさせることが可能かどうか、また可能な場合はどのようにしてやるのか教えていただきたいです。 (1)1枚のgif画像がある。画像内にいくつか文字があり、文字の上にカーソルが上がった時に文字の色を変えたい。 (2)文字がすべてロールオーバーしていない元画像と、文字がすべてロールオーバーした画像の2枚を用意。 (3)CSSとjavascriptを駆使して作りたい。 元画像を背景に設定し、その上にロールオーバー後の画像を配置し、隠す。→文字の上にカーソルが来たら、隠していたロールオーバー後の画像の一部をその同じ場所に表示させる というような考え方でやってみたのですが、どうもうまくいきませんでした。Flashでやった方が簡単なのですが、Flashは使わずに作るということになっているので困っています。 何卒、よろしくお願いいたします。

    • ベストアンサー
    • HTML
  • jQueryのthisの使い方

    javascript初心者なので根本的に勘違いしていたらすいません。 jQueryを使ってAAというclass領域をポイントしたら同じAAのclassを設定されているすべてのCSSをかきかえる、ということをしたいです。 $(document).ready(function(){ $(".AA").hover( function () { $(this).css('color', '#000000'); }, function(){ $(this).css('color', '#222222'); } ); }); ここまでは書いたのですが、ポイントしているところだけしか変わらないので、ページ内のすべての同じクラスに結果が反映されるようにしたいのですが書き方がそもそも間違ってるんでしょうか…。

  • jquery.mobile　画像を中央に表示

    <!DOCTYPE html> <html lang="ja"> <head> <title>test</title> <link rel="stylesheet" href="http://code.jquery.com/mobile/1.1.1/jquery.mobile-1.1.1.min.css" /> <script type="text/javascript" src="http://code.jquery.com/jquery-1.8.1.min.js"> </script> <script type="text/javascript" src="http://code.jquery.com/mobile/1.1.1/jquery.mobile-1.1.1.min.js"> </script> </head> <body> <div id="home" data-role="page" data-theme="d"> <ul data-role="listview" data-dividertheme="a"> <li data-role="list-divider">test </li> <li> <a href="#"> <img src="C:\1.jpg"> test </a> </li> <li> <a href="#"> <img src="C:\2.jpg"> test </a> </li> </ul> </div> </body> </html> ------------------------- 上記のようなコードで携帯サイトを構築しているのですが 正方形ではない画像が、右上に寄ってしまうのですが これを回避する方法はありますか？ 例で言うのであれば 添付画像の黄色い四角を画像表示エリアの中央に表示させたいです。

    • ベストアンサー
    • HTML
  • 画像のロールオーバーとアクティブページでの画像ロールオーバーについて

    javascriptでの画像のロールオーバーについて質問させてください。 現在、あるサイトを作成中なのですが、グローバルナビゲーションメニューにjavascriptで画像のロールオーバーを設定したいと思っています。 このスクリプト自体はwebで簡単に見つかったのですが、これにプラスアルファで現在見ているページ（アクティブページ）のメニュー画像をロールオーバー（ロールオーバーをオンマウス状態に）させる方法が見つかりません。 あらゆるサイトでよく見るので簡単に見つかると思ったのですが・・・ どなたかこの両方の機能を実装できるjavascriptを御存知の方がいらっしゃいましたらご紹介ください。

  • a:hoverではない画像切り替え

    http://www.domainking.jp/support/ このページの真ん中あたりに オレンジ色の｛よくあるご質問｝｛お知らせ・メンテナンス情報｝ボタンがありまして このボタンにカーソルをあてると画像がかわります。 HTMLをみてもCSSをみても普通のa:hoverではない画像切り替えのようなので 仕組みが全くわかりません　この仕組みややり方を教えてください。

    • ベストアンサー
    • CSS

注目のQ&A

カテゴリ

専門家に質問してみよう

職業から探して質問する

あなたにピッタリな商品が見つかる！ OKWAVEセレクト

質問する