オンマウスとロールオーバーについての質問

このQ&Aのポイント
  • テーブルのセル内のメニューにオンマウスすると、背景が変わらない問題が発生しています。
  • A HOVERの設定は1ページに一つしかできないのか疑問です。
  • ロールオーバーを試してみましたが、VISTAで制限されているため使用できません。
回答を見る
  • ベストアンサー

オンマウスとロールオーバー

現在サイトを製作中で質問があります。 テーブルのセル内のメニュー1.2.3.4にオンマウスすると そのセル内の背景が変わる、というものを作りたいのですが なかなかうまいこと出来なくて困っています。 スタイルシートで1.2.3.4と設定して いざオンマウスしてみると、1.2.3.4すべての項目が 最後に設定した4の背景に変わってしまいます。 なんとなく、A HOVERは1ページに一つしか設定出来ないのかなと 思いましたが、そうなのでしょうか? ロールオーバーも試してみたのですが VISTAのせいなのか、ブラウザ上部に 「セキュリティ保護のため、制限されています」の様なメッセージが 出てしまうので、使いたくありません。 HPビルダー12 WIN VISTA HP を使用しています。 よろしくお願いします。

  • moppen
  • お礼率27% (175/631)

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

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

>なんとなく、A HOVERは1ページに一つしか設定出来ないのかなと >思いましたが、そうなのでしょうか? 具体的にどのようにやっているかわからないのですが、 クラス指定してみてはどうでしょうか? >ロールオーバーも試してみたのですが >VISTAのせいなのか、ブラウザ上部に >「セキュリティ保護のため、制限されています」の様なメッセージが >出てしまうので、使いたくありません。 ブラウザのプレビュー画面でのみ動作確認していますか? サーバーにアップロードして、そのページ(web上のページ)で動作確認してみても、メッセージが出ますか? ※アクティブスクリプト(JavaScript等)無効の環境では、ロールオーバー効果そのものが出ないので注意。

関連するQ&A

  • オンマウスで異なるセルなどの背景を変える方法

    (1)オンマウスで、オンしているセルではないセルの背景画像を変える方法と、 (2)オンマウスで、セルではなく、テーブル自体の背景画像を変える方法を 教えて下さい。 (1) <table><tr> <td>1111</td> ←このセル(文字)にオンマウスして <td>2222</td> <td>3333</td> ←このセルの背景を変える </tr></table> (2) <table background="*****.jpg"><tr> <td>1111</td> ←このセル(文字)にオンマウスしてテーブルの背景を変える <td>2222</td> <td>3333</td> </tr></table> こちらで使用しているブラウザはSafari2.0.4とFireFox3.0.8です。 お願いします。

    • ベストアンサー
    • HTML
  • テーブルにオンマウスで文字色を変える方法を教えてください。

    当方HPビルダーV9でHP作成中です。 最近やっとCSSなど使えるようになってきたので、様々試しているのですが、どうしても自力で実現できないため、知恵を貸してください<(_ _)> テーブル内に表示されている文字を、文字ではなくて周囲のテーブルにオンマウスで文字色を変更したいのですが、どのようなタグを組めばいいのでしょうか? 該当部分には、上記の他に、テーブルにオンマウスでテーブルの背景色を変えるタグも組み込んでいます。 以下該当部タグです。 <TABLE style="filter:Alpha(opacity=40)"bgcolor="#f75563" width="100" height="100" cellpadding="0" cellspacing="0"> <TBODY> <TR> <TD align="center"onmouseover="this.style.backgroundColor='#ffffff'"onmouseout="this.style.backgroundColor='f75563'"><FONT color="#ffffff" size="-1">bulletin board</FONT></TD> </TR> </TBODY> </TABLE>

  • ホームページ「メニューボタンのロールオーバー効果」について

    ホームページビルダー7を使用しています。 「URLから読み込み」で色々なホームページを参考にしてHP製作に活用しています。 メニューボタンでマウスポインタが上にきた時に画像が変化する効果がありますが,ロールオーバー効果の設定がされていないのに,この効果となっているものが多々あります。 どのようにして処理されているのでしょうか? これらのHPはビルダーで読み込んでも,ボタンの画像ファィルはテキストなどと同様に見ることができません。(私がビルダーでロールオーバー効果を設定したものは,効果設定のマークが表示され,2つの画像ファイルが登録されています) 以上 よろしくご指導願います。

  • ロールオーバー効果

    HPビルダーでロールオーバー効果を使うと 作成したHPにアクセスすると セキュリティ保護のためコンピューターに~~ インターネットエクスプローラーで制限しています。 オプションを表示する場合ここをクリックしてください とエクスプローラーの上の方に表示されます。 この表示をHPを見てくれている方に表示させない ようにはできないのでしょうか? http://www1.jalux.com/00000019/html/p05.html このHPはロールオーバー効果を使ってるにもかか わらず表示されないもので・・。 どなたか分かる方よろしくお願いします。

  • オンマウス時の効果について教えて下さい(ビルダー7)

    お世話になります。 色々と検索して調べたのですが、答えが見つかりません。 たとえば、 http://jp.z.com/INTERVIEW/YUKAWA/index.html の上部にあるメニューバーへオンマウス時の効果として、 ・音が鳴る。 ・ロールオーバー画像の表示に動きがある。 の2点について、効果の作成方法を教えて下さい。 ホームページビルダー7での作成が可能であれば、その方法を是非知りたいです。 どうぞ、よろしくお願いします。

  • 画像のロールオーバーがずれてしまいます。(CSS)

    テーブルを作り、tdタグの一箇所の背景にロールオーバー時の画像を配置しておき、a要素にマウスがかかった際にtd内にあるimg要素にvisibility:hidden;にするというロールオーバーを作りたいと思っています。 しかし実際に作ってブラウザで見てみると、ロールオーバー後の画像 (背景として設定しているもの)が微妙に1pxほど斜め下にずれて表示されてしまいます。 このような事を防ぐためにはどんな事に気を付ければ良いでしょうか? ちなみに、ロールオーバー前の画像とロールオーバー後の画像2枚を 全く同じサイズにしています。 参考までにタグを下記に記述していますので、どなたか見て頂けませんでしょうか。宜しくお願いいたします。 -------------------------------------------------CSS td.1{    background:url(image01.jpg) no-repeat;    } td.1 a{ display:block; } td.1 a:hover{ background-color:transparent; } td.1 a:hover img{ visibility:hidden; } -------------------------------------------------HTML <table> <tr> <td class="1"> ←このtd内の画像 <a href="top.html"><img src="image01.jpg"></a> </td> <td> <a href="top02.html"><img src="image02.jpg"></a> </td> <td> <a href="top03.html"><img src="image03.jpg"></a> </td> </tr> </table>

  • リンクの文字色を別々に指定したい(オンマウスで変わるタグ)

    メモ帳でHPをちまちま作ってたのですが、ちょっと困ったことが出てきたので質問させて下さい。 同じページのリンクの文字色を一括で変更するのは… <style type="text/css"> <!-- a:link { color: maroon } a:visited { color: maroon } a:hover { color: white } a:active { color: black } --> a { text-decoration: none; } </style> ですよね。 それと個別に変更するのが… <body link="maroon" vlink="black" hover="white" alink="maroon"> </body> なんですが、個別設定でカーソルをのせた時色が変わるタグがどうしても分かりません。 上の設定を踏まえた上で、オンマウスで色が変わるタグを教えて下さい。よろしくお願いします。

  • 「ロールオーバー」という単語の出典は?

    ある要素にhover擬似クラスがセレクタとして指定されていて, そこでbackground-imageプロパティやbackground-colorプロパティが指定されていると,マウスカーソルがその要素上に移動したとき,背景画像や背景色が変化します。 http://www.w3.org/Style/CSS/Test/CSS3/Selectors/current/html/tests/css3-modsel-18.html さて、HTMLカテゴリやWeb Page Designカテゴリでは,このことが良く 「ロールオーバー」という言葉で呼ばれているのを見かけますが、 これは公式に定義された用語なのでしょうか? そうでなければ,どこから使われだした用語でしょうか?

    • ベストアンサー
    • CSS
  • オンマウス時の背景色を個別に設定したい

    ごめんなさい。 前にも質問して、回答をいただいて、納得して締め切ったはずの質問が、いざコーディングしてみると動きませんでした。反省しています。やはりちゃんと動くのを確認してからでないと駄目ですね。ということでもう一度同じ質問を出します。ご容赦願います マウスを乗せると背景色が変わる仕組みは、たしかa=hoverで可能でしたよね。 そこで問題が発生しました。 私は今サイトを作っていて、左側のメニューバーについてはマウスを乗せると背景色が変わるリンクにしたいんですが、普通の文章中に出てくるリンクについてはそういう仕様から外したいんです。 でもa=hoverを使うと全てのリンクに同じ設定が適合されてしまいますよね?CLASSで個別に設定しようとしても無理でした。どうすればいいですか? そこでJAVASCRIPTというものを利用して、マウスを乗せるとその文字背景(もしくはボックス内の背景)が 変わる仕組みを実現できるはずなんですが、具体的なソースコードは知りませんかね?できればボックスごとのオンマウス時の背景色を設定できるようにしたいです

    • ベストアンサー
    • HTML
  • CSSでテーブルのセルが、a:hover で背景を変わるようにしましたが、枠がちらついてしまいます。

    テーブルのセルに、リンクのあるテキストをはって、 a:hoverで背景が変わるようにしたのですが、 hoverの状態でセルの外側だけ背景が変わらずに、hover状態でないときの背景がほんの少しちらついてしまいます。 table .a{border: 0px;background-color:red;;padding: 2px;width: 150px;} table .a a:hover{border:0px;padding: 2px;width: 150px;background-color:orange;} のようにすると、 hover状態で、セルの枠が、ほんの少しredのままになってしまいます。 http://www.smashingmagazine.com/2008/08/13/top-10-css-table-designs/ の 3.BOX の例のように、hover状態できれいに背景の色が変わるようにしたいんですが、どう直せばいいでしょうか。よろしくおねがいいたします。

    • ベストアンサー
    • HTML

専門家に質問してみよう