• 締切済み

画像にオンマウスして他の場所のCSSを操作するには？

もしかしたらJavaScriptになるのかもしれませんが・・・ 例えば、ページの右には説明文、左には図を載せます。 図の一部にオンマウスした時に、右側の説明文の一部を強調したいと思うのですが、その際にCSSで作った枠線、背景を変更したいと考えています。 それを実現するには、どうしたらいいのかわかりません。 参考になるサイト、サンプルなどありましたら教えていただけませんでしょうか？

  • HTML
  • 回答数1
  • ありがとう数1

みんなの回答

  • dct18
  • ベストアンサー率28% (21/74)
回答No.1

説明文も同じ画像ならこのサンプルの応用で http://minkara.carview.co.jp/userid/269327/blog/13663860/ CSSで作った枠線、背景の変更は場所によりますが javascriptでも無理な気が、CSSを2,3個用意するなら 切り替えの応用で出来るかもしれませんが難しいと思います 枠線、背景も同じ画像出来れば… もしオンマウスの位置によって説明文の強調される場所が違うというなら JavaScriptになりますが、そこまでいったらFlashの方が楽かと

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

関連するQ&A

  • オンマウスで出た説明文の色を変えたい

    オンマウスで出た説明文の文字色を変える事は可能なのでしょうか？ <a href="サンプル.html"title="オンマウスで説明">タイトル</a> 今こんな感じです。 どこに何をいれればいいのか教えてください。

    • ベストアンサー
    • HTML
  • 3種類の背景の設定(CSS)

    スタイルシートで左、中央、右側で3種類の背景を設定したいと思っています。 左と右は同じ画像で中央は白としたいです。 (チェック画像の間に白い領域を作りたいです。) どのようにCSSで設定すれば良いでしょうか？ よろしくお願いします。

    • ベストアンサー
    • HTML
  • 画像にcssについて

    すいません。以下のブログにアマゾンのリンクが左にあると思うのですが、この画像の上に文字を置いてるのはどういったCSSなのでしょうか？ http://kanasoku.blog82.fc2.com/ CSSのpositionなどで絶対位置で指定しているわけでもなく、画像を背景にしているわけでもなく このような画像の上に文字を置けるのが非常に不思議です。 私はプログラムはphpが少し分かるくらいでして、もしかするとまったく知らないjavascriptかな・・とも思いましたがブラウザのjavaを切っても表示されていますし・・。 今はソフトはドリームウィーバーCS6の体験版を使っているのですが、CSS自体が初めてでもし分かる方いましたら教えてください。

    • ベストアンサー
    • CSS
  • ドリームウィーバーでｃｓｓのことについて困っています。

    一番上がヘッダー　左にサイドバー、この横」にコンテンツを製作しています。 このコンテンツの中を更に、右と左に分けたいのですが、右と左のＣＳＳスタイルを製作して、左側のＣＳＳセレクタのボックスの中のフロートを左に設定しましたが、右側のよこに並列しません！ どんなにがんばっても、縦に並んでしまうのですが、ヒントになるようなことでもいいので、わかる方あればよろしくお願いいたします。 説明が十分でないかもしれませんがよろしくお願いいたします。　

  • :hoverで他の要素の値を変更できますか？

    CSSで擬似要素「:hover」をつけることで従来Javascriptで行なわれていたオンマウス処理を実現することができますが、オンマウスした要素以外の要素に別のスタイルを適用することって可能でしょうか？ ＜html＞ <div id="one">one</div> <div id="two">two</div> ＜CSS＞ #one:hover { color: red; } 上の例では#oneがオンマウスすると文字色がredに変化しますが、同時に#twoの文字色をblueにしたいのです。無理ならJavascriptで代用しますが、オンマウス処理みたいにCSSでできた方がスマートかなと思うので、可能であればその方法を使いたいです。

    • 締切済み
    • CSS
  • 時間によって背景画像の変更は？

    iGoogleの一部の背景は時間によって背景の画像が変わっていますが、それを個人ホームページで実現させるにはどのようにすればよいのでしょうか。 04:00～07:00は明け方の画像、07:00～16:00は昼の画像、16:00～18:00は夕方の画像、18:00～04:00は夜の画像といった具合にしてみたいのですが、HTMLタグやJavaScript、CSSなどで実現するにはどうすればよいのでしょうか。よろしくお願いします。

  • CSSの重なり順って指定できますでしょうか？（画像です）

    現在CSSをコツコツと勉強中なのですが、壁にぶつかってしまいました・・・。 CSSで背景画像を指定したのですが、これらの画像の重なり合う順番って構うことは出来ますでしょうか？ 例えばですが、右に犬小屋の画像、左に犬の画像がありCSSで背景として重なり合わせた場合、犬小屋の上に犬が乗っかるようにしたいのです。（物凄い例ですのでCSSを使わなかったらとは言わないで下さいね） サイトをウロウロとしていたところ、Zインデックスという存在を知ったのですが、使い方がよく分からないというか、これで指定できるものなのでしょうか？ 当たり前の質問で申し訳ないのですが、ご存知に方がおられましたらアドバイスいただけたら幸いです。 宜しくお願いいたします。

    • ベストアンサー
    • HTML
  • CSSを無効に出来ますでしょうか？

    よろしくお願いします。 サイト内で、ある一部のページのみにCSSをON/OFFに切り替えれる ボタン？を設置しようとしているのですが、色々とサンプルなどを 探して設置してみるのですがうまくいきません・・・。 CSSの定義自体、何か特殊な方法で切り替える場合には指定を 行わないといけませんでしょうか？ どなたか、これを実現できる方いらっしゃいましたら アドバイスいただけると助かります。 よろしくお願いいたします。

  • TABLEの背景画像をCSSに変更したい。

    今までTABLEを使って背景画像を指定していたのですが、CSSに変更したいと考えています。 現在はTABLEで図１のようにABC A'B'C' A''B''...と連続する背景画像を＜図３＞のカラム「ロ」に入れています。 これをCSSのbackgroud-imageで指定すると図２のB'ように途中で切れてしまいます。 これを背景イメージＡ，Ｂ，Ｃのいずれかの境界で背景を終わらせるようにコントロールすることはできないものでしょうか。 CSSだけで指定するのは困難なように思います。 JAVA Scriptとの併用になるのでしょうか。 CSSは基本的な使い方は理解しているつもりですが、JAVA Scriptは読める程度で書くことはできません。 わかりにくい説明で申し訳ありませんがどなたか教えていただければ助かります。 よろしくお願いします。 なお背景画像の高さはA＝B＝Cです。 背景画像は＜図３＞のカラム「ロ」、カラム「イ」「ロ」はコンテンツしだいで下に伸びます。 ＜図１：背景イメージ＞ ■■■　┐　 ■■■　A ■■■　┘ □□□　┐ □□□　B □□□　┘　 ◆◆◆　┐ ◆◆◆　C ◆◆◆　┘　 ＜図２：backgroud-imageによる指定＞ ■■■　┐　 ■■■　A ■■■　┘ □□□　┐ □□□　B □□□　┘　 ◆◆◆　┐ ◆◆◆　C ◆◆◆　┘　 ■■■　┐　 ■■■　A' ■■■　┘ □□□　┐ □□□　B' 　　　　┘　 ＜図３：現在のカラム（TABLEで指定）＞ ┌─────────┐ │┌─┐┌─┐┌─┐│ ││　││　││　││ ││イ││ロ││ハ││ ││　││　││　││ │└─┘└─┘└─┘│ └─────────┘

    • ベストアンサー
    • CSS
  • HTML5＋CSS3　でしかできないこと

    長年、趣味や一部仕事で XHTML+CSS のサイトを作っています。 数年前から、サイト内にCGIを入れたり、色んな動きを楽しむため javascriptを導入してサイト作成を楽しんでいたりもします。 言語も html css javascript jquery php　など、色々楽しみながら勉強してきました。 ほんの数年前から、HTML５＋CSS３　が登場しましたが、 様子を見ていると、どんどん独創的なサイトが出てきています。 スマートフォン用のサイトも作れるようになりたいな、と思っていましたが ようやく重い腰を上げて作業に取り掛かろうと思っています。 そこで質問なのですが、HTML5＋CSS3で作られたサイトで まるでjavascriptで制御されたような軽快なスクロールや動きが散見されます。 こうしたサイトを見ると、javascriptで動かしているのかHTML5で動かしているのか 判別がつきません。 HTML5やCSS3で新しく実装された機能については、ネットで調べると色々出てきます。 例えば、リンクタグをブロック要素化することが簡単になったとか、 角が丸い四角形を充てることができるようになったとか、電話番号をタップすると 「通話」ボタンが出るようになったとか、個別の機能についてはなんとなく把握しました。 しかし、「HTML5+CSS3で作られたサイト全体」で見ると、 いまいちピンと来ないのです。 そこで、お詳しい方に是非、以下のような形で 教えてもらえたらと思い、投稿しました。 ------------------------------------- 実際にHTML5+CSS3で作られたサイトを基に、 どこをどのように設定したのかを見せて欲しい ------------------------------------- 例えば、 http://www.hotakubo-seikei.com/ は、ソースを見るとHTML５で作られていますが（section タグや　header タグがありますね） XHTML+CSSでサイトを長年作ってきた人間からすると、 どうしてこんなサイトができるのか全く分からないのです。 javascriptもいくつか利用されていますが、どれがjavascriptによるもので どれがHTML5+CSS3によるものなのかわかりません。 また、一番驚いたのが、サイトの構成です。 サイト全体の横幅が無く全画面表示になっており、 ３カラムで、縦スクロールするとディレクトリが変わるなんて XHTML+CSSの常識では考えられません。 もちろん、デザイナーによるデザインでこうなったと言ってしまえばそれまでですが、 それを実装できていることに感動しているのです。 ↑↑↑ こんな感じで、何かサンプルサイトを基に XHTML+CSSとの違いや、HTML5+CSS3だからこそ実現できることを 分かりやすく教えてもらえたらとても有難いです。 サンプルサイト付きで、なるべく詳しく教えて頂いた方に ポイントを付与させていただきたいと考えております＾＾ どうぞ宜しくお願い致します！

注目のQ&A

カテゴリ

専門家に質問してみよう

職業から探して質問する

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

質問する