• ベストアンサー

離れた場所のロールオーバーのやり方について

前任者がホームページビルダーで作成したページを、自分が更新作業をしやすいようにタグ打ちをして修正しています。 ビルダーで、ボタンにマウスを置くと、ボタンが変化する（ロールオーバー）のと同時に、少し離れた場所でも絵の変化が起こるロールオーバーがあり、前任者はその手法を使っていました。 ビルダーでタグを確認すると、 JavaScriptが使われていました。 私は、一応ビルダーは使いこなせ、HTMLとCSSの知識もあります。しかし、JavaScriptがわかりません。 HTMLで記述する方法があれば、教えてください。（わかりやすい解説のページがあればなおうれしいです。） もしなければ、まったくの初心者でも理解できるJavaScriptでのやり方、ページなどを紹介してください。 よろしくお願いします。

  • HTML
  • 回答数5
  • ありがとう数4

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

  • ベストアンサー
  • o-ran
  • ベストアンサー率9% (1/11)
回答No.5

離れた所のロールオーバー、キーワード「リモートロールオーバー」。 今見てみたら、ｃｓｓだけで実現されてます。説明は、ｃｓｓが理解できないとです。プロパテティ自体は難しくないです、組み合わせの妙ですね。 http://www.k5.dion.ne.jp/~i-araki/css/onmouse.html

hiro_goo
質問者

お礼

ありがとうございます。 「リモートロールオーバー」っていうんですね。この名前で私もちょっと探してみようと思います。 たしかに、組み合わせの妙ですね。参考になりました。

その他の回答 (4)

  • Oh-Orange
  • ベストアンサー率63% (854/1345)
回答No.4

★『JavaScript』のアドバイス ・本を１冊紹介します。 ・『JavaScript ポケットリファレンス』です。 ・『技術評論社』で『2380円＋税』で 639 ページです。 ・最後に『イヌでもわかるJavaScript講座』のアドレスを教えます。 ・下の『参考URL』をどうぞ。→私も利用しています。

参考URL：
http://www.red.oit-net.jp/tatsuya/java/index.htm
hiro_goo
質問者

お礼

ありがとうございます。 「イヌでもわかる～」はかなりボリュームありますね。 本を読んで、ＨＰもゆっくり見ていこうと思います。

回答No.3

連続で済みません。 > 離れた場所のロールオーバー 離れた場所のは:hoverはできないですね。すみません。 JavaScriptを使わないと行けませんから、ホームページビルダーの機能でできるはずです。

回答No.2

> HTMLで記述する方法があれば、教えてください。 書き直すつもりなら、 前任の方が作られたスクリプトを全部消して、ホームページビルダーで作り直すというのはダメなんでしょうか？ ホームページビルダーがわかるなら、ホームページビルダーの自動生成に任せればいいと思います。 > HTMLとCSSの知識もあります。 HTMLではできません。 スタイルシートなら:hoverを利用出来ます。

hiro_goo
質問者

お礼

ありがとうございます。 ビルダーは無駄なタグがあったり、大文字と小文字が混ざっていたりして見づらいので自分で打っていきたいなぁと思った次第です。

  • quads
  • ベストアンサー率35% (90/257)
回答No.1

▼ マウスを置くと これに関する操作を行なうメソッドは JavaScript のイベントハンドラ onmouseover がありますが、 現在の CSS にも :hover 疑似クラス があります。 しかしながら、:hover 疑似クラスでは、hover した要素自身のスタイルシートしか操作することができません。 （onmouseoverが有効な）任意の要素に対して、 <element onmouseover="function()"> のような形で onmouseover 時に定義した関数を実行してください。 求められているサンプル等については回答は控えさせていただきます。

hiro_goo
質問者

お礼

ありがとうございます。 関数か・・・ ちょっと難しいみたいです。

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

関連するQ&A

  • javascriptで作ったロールオーバーがロールオーバーのままになってしまう

    質問お願いします。 javascriptで作った画像二枚で表現するロールオーバーボタンの不具合についてです。 ieでの動作は問題なかったのですがsafari3.1.2とfirefox3.03では、 その作ったロールオーバーボタンをクリックして他のページに行き、 そしてブラウザに予め備わっている機能の戻るボタンで元のページに戻るとクリックしたロールオーバーボタンがマウスが重なっていないのにロールオーバーしたままの状態になってしまいます。 (その状態でもう一度ロールオーバーボタンにマウスを重ねると元に戻ります。) 流れを簡単に書かせていただきます。 <1.ロールオーバーボタンをクリックする> ↓ <2.他のページにリンクする> ↓ <3.リンク先のページでブラウザの戻るボタンをクリックする> ↓ <4.1のページに戻る> ↓ <5.1でクリックしたロールオーバーボタンがカーソルが触れていないのにロールオーバーした状態> ロールオーバーボタンを作る方法は二通り試したのですが、両方とも上に書いた通りの状態です。 <試した方法> 1.DreamweaberMXのビヘイビア機能で作成。 2.http://css-happylife.com/log/javascript/000157.shtmlこちらのページを参考にさせて頂いての作成。 この不具合の事を気にして色々なウェブサイトを見てみたのですが、やはりjavascriptで作っているであろうロールオーバーボタンは同じような状態のウェブサイトが、多数有りました。 この問題の解決策をご存じの方がいらっしゃいましたら、どうかご教授下さい。よろしくおねがいします。

  • ロールオーバが遅い

    マウスを載せると画像が変わるロールオーバを使ったページを作成しています。Dreamweaverを使ってロールオーバーやプリロードを指定しているので、マウスを載せるとすぐさま画像スワップが起きるはずなのですが、何と２・３秒もかかってしまいます。 ネットワークがプア、ブラウザの仕様、ソースが複雑、Javascriptの仕様、など考えられるのですが、 どこに原因があるのでしょうか？ご存知の方、是非教えて下さい。 特に、.jsファイルを外部化して読み込ませているのですが、このあたりで注意するところがあれば併せて、宜しくお願い致します。

    • ベストアンサー
    • CSS
  • 異なる位置にある画像をマウスオーバーで差し替える

    お世話になります。 ウェブページを制作するにあたり、添付のようなメニューを依頼されました。 ボタンAL1～AL3のマウスオーバーで、バナーAがバナーALに変化、 ボタンAC1～AC3マウスオーバーで、バナーAがバナーACに変化、 ボタンAR1～AR3マウスオーバーで、バナーAがバナーARに変化、 それぞれのボタンからマウスが外れると、バナーAにもどる。 バナーB以下、必要に応じた数だけ同様の動作になります。 フラッシュで作れば簡単なんですけど、担当者レベルでフラッシュが扱えず メンテナンスができないのでこんな方法になりました。 javascriptかCSSの制御で以下の手法が取れないでしょうか？ よろしくお願いします。

  • ロールオーバーのタグを教えて下さい

    初めまして。 ＨＰ作成は初めてなので専門的な言葉はよくわからない者です。 ＨＴＭＬをコピーして貼り付けてちょっと編集してＨＰを作ってるところなのですがロールオーバーのタグが分からず困っています。 ネットで検索して貼り付けてもうまくいきません。 入力環境としてはデスクトップにＨＰってフォルダを作ってその中に素材からＨＴＭＬファイルも入れてあります。 me8.htmlっていうページに画像A.jpgとB.jpgのロールオーバーをしたい場合どのようなタグを入力したら良いのでしょうか？ ネットでみてたらHEADにも何か入力が必要なような事を書いてあったのですがその分もあわせて宜しく願いします　m(__)m

    • ベストアンサー
    • HTML
  • ロールオーバーのタグについて教えてください。

    はじめまして。 http://www.s-b-c.net/ 現在CSSを使って上のような横並びのロールオーバーのメニューを作成しています。 ロールオーバー自体は出来ているのですが、私が作ったサイトだと全部のボタンが改行なし、空白なし（スペースのための画像も含めて）でdreamweaverでは1行として書かれています。 上のサイトのように改行してキレイに見やすくできればいいのですが、タグを改行して書いていくと最後のボタンが下にずれてはみ出てしまいます。 改行と同時に空白ができているようです・・・ タグで普通に改行して書いても空白とかできるのでしょうか？ できればきちんとこのままのボタンを利用して見やすいソースで作成したいのですが、やり方がわかりません・・・ やはり空白や改行なしで続けて挿入していくしかないのでしょうか？ どうか教えてください。よろしくお願いいたします。

  • JavaScriptのwindowcloseとボタンのロールオーバーの組み合わせ方

    いまHPを作成中です。 そのなかでクリックすると、指定された大きさで表示される別ウィンドウがあります。 そのウインドウに次の2つのJavaScriptを使いたいのです。 ひとつひとつなら出来るのですが、二つを組み合わせるとどう書いていいのかわかりません。 しかも、ふたつともhead内に書き込むにはどうしたらいいですか？ １、ウインドウに「閉じる」ボタンを付けたい ２、そのボタンはロールオーバー効果を使ってマウスがオーバーのときはボタンが変化するよう、別のgifを表示したい 1,2の詳しい内容です。 1<a href="javascript:window.close();"></a> 2<head> <title>ロールオーバーイメージ</title> <script language="JavaScript"> <!-- function changeImage1(){ document.myimg.src="img2.gif"; } function changeImage2(){ document.myimg.src="img1.gif"; } // --> </script> </head> <body> <p> <a href="javascript:;" onMouseOver="changeImage1()" onMouseOut="changeImage2()"><IMG src="img1.gif" name="myimg" border=0></a> </p> </body>

  • マウスを置くと画像が変わる。

    こんにちは。 自分のサイトであることをやりたいのですが、 肝心のタグが分からないので質問させてくださいませ。 タイトルだけ見ると普通のロールオーバーと思われるかも しれませんが、私が聞きたいのはちょっと違うのです。 一箇所に画像が貼ってあって、 同じページ内のあちこちにある文字の上にマウスを置くと その画像が変わるのです。 他のサイト様でそんな効果を見かけたのですが、 やり方がわからなくて困っています。 タグは直打ちでもなんとかできますが、 私はホームページビルダー８も持っているので、 もしやり方を知っている方がいらしたらぜひお願いします。

  • テキストボックスの文字の大きさを変更するには

    タグ打ちでWebページを作っています。 テキストボックスに関する質問です。 テキストボックス本体の大きさは下のように記述すれば指定できることはわかっているのですが、 <input type="text" size=xx> テキストボックス内の「文字」の大きさを変更するにはどうすればよいでしょうか。 HTMLタグ、JavaScript、CSSでできる方法を教えてください。

  • MovableTypeでロールオーバー保持

    現在、MovableTypeでグローバルメニューのモジュールを作成しております。 普通にロールオーバーはできるのですが、リンク先のページに遷移された時のボタンのロールオーバー保持ができません。 javascriptの使用は、したくないです。 MTのタグ＋CSSでどうにかならないでしょうか。 MT4.2を使用しております。

  • cssスプライトで作ったボタンがIE6でロールオーバー時に消える

    ＣＳＳでロールオーバーするボタンを作りました。（ＣＳＳスプライトという手法で作っています） ところが、ＩＥ６でのみ、ロールオーバー時に、ボタン画像が消えます。 ためしにjavascriptで先にキャッシュを読み込ませてみましたが、やっぱり消えてしまいました。 どうしたらＩＥ６でも正常に表示できますか？

注目のQ&A

カテゴリ

専門家に質問してみよう

職業から探して質問する

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

質問する