HTMLのDiv、id、Class、HOVERの記述の質問です。
左側に○、右側に□の画像を配置、
通常は、「○■」(左側が光ってONの状態)
この時、マウスを■に重ねた時だけ□に変わるが、マウスを○に重ねても反応させない。
■の上でクリックすると以下のようになる。
「●□」(左の○が暗くなりOFF、右側の□が光ってONの状態)
今度は、マウスを●に重ねた時だけ○に変わるが、マウスを□に重ねても反応させない。
このように片方をONにするともう片方がOFFになるスイッチの様な動きをさせたいのですが、
HTMLファイルとCSSファイルにどんな記述をすれば実現できるでしょうか?
文中では以下の記号とファイル名で対応していますが実際には画像データです。
● = left.png
○ = left_on.png
■ = right.png
□ = right_on.png
A 回答 (11件中1~10件)
- 最新から表示
- 回答順に表示
No.11
- 回答日時:
実際のページの動作は下記アドレスで確認できます。
http://ashtarte.pa.land.to/test/MouseRollover001 …
日本語ページと英語ページの「left」側の記述と、「right」側の記述が違うことに注意して下さい。
返事が遅くなって申し訳ありません。
テストページを拝見したところ、こちらの望む事が実現できている事は確認できています。ありがとうございます。
後程実際に試してみたいと思います。
No.10
- 回答日時:
>No.9 回答者: amanojaku6
あと英語ページのbackgroundのリンクも修正が必要でした。
【英語ページ】
> background: url("../left_on.png") no-repeat;
background: url("./left_on.png") no-repeat;
No.9
- 回答日時:
例えば、2つのページが同じディレクトリにある場合で、 日本語ページをworks-jp.htm、英語ページをworks-en.htmとした場合は、下記のようになります。
【日本語ページ】
> <a href="english/works002.htm">
<a href="./works-en.htm">
【英語ページ】
> <a href="../works001.htm">
> <img src="../left.png" >
> </a>
> </div>
> </td><td>
> <img src="../right_on.png" >
<a href="./works-jp.htm">
<img src="./left.png" >
</a>
</div>
</td><td>
<img src="./right_on.png" >
No.8
- 回答日時:
> <div class="MouseRollover">
> <a href="../works001.htm">
> <img src="../left.png" >
> </a>
> </div>
↑必ず「div」タグを使って下さい。
No.7
- 回答日時:
>注釈「<!-- --!>」内の記述を自分のCSS内に記述すれば良いという事でしょうか?
基本的には そうですが…
まず、ページは2つあります。
日本語ページには英語ページのリンクが記述されていますので、そのリンクを自分の英語ページへのリンクに変更して下さい。
この場合「~\english\works002.htm」のように「english」と言う子ディレクトリ内に「works002.htm」が存在していますのでリンクに注意して下さい。
英語ページには日本語ページのリンクが記述されていますので、そのリンクを自分の日本語ページへのリンクに変更して下さい(英語ページは親ディレクトリを参照していると言う事に注意して下さい)。
> <a href="../works001.htm">
> <img src="../left.png" >
> </a>
> </div>
> </td><td>
> <img src="../right_on.png" >
↑「../」は親ディレクトリを意味します。
> <img src="./left_on.png" >
> </td><td>
> <div class="MouseRollover">
> <a href="english/works002.htm">
> <img src="./right.png" >
↑ちなみに「./」は そのHTMLファイルが存在するディレクトリを意味しています。
「./left_on.png」は「left_on.png」と等価、「./right.png」は「right.png」と等価です。
No.6
- 回答日時:
>↓具体的にはこのサイトです。
>http://dragon-inc.jp/works.html
CSSデモ:MouseRollover001
http://ashtarte.pa.land.to/utf8/smt.cgi?r+sara/& …
No.5
- 回答日時:
(「MouseEvent001/test007」を微妙に修正しています)下記はマウス・イベント時の画像の読み込み時のタイムラグを軽減するためにdivタグのバックグラウンドにロードさせています(フォアグラウンドのimgタグを「表示、非表示」させて画像を切り替えている)。
JavaScripデモ:MouseEvent001/test008
http://ashtarte.pa.land.to/utf8/smt.cgi?r+sara/& …
どうもありがとうございます!
たくさんのサンプルを出していただいたところ恐縮ですが、
CSSで実現する事はできないでしょうか?
回りくどくて失礼しました。
↓具体的にはこのサイトです。
http://dragon-inc.jp/works.html
右上の、Jpanese、Englishがうまく切り替わらないのです。
例えば、Englishへ飛ぶとJpaneseが消えてしまいます。
CSS内の該当する記述も必要であれば開示いたします。
JavaScriptにした方が良いというアドバイスがあれば切り替えも検討したいと思います。
よろしくお願いいたします。
No.4
- 回答日時:
下記はマウス・イベント時の画像の読み込み時のタイムラグを軽減するためにdivタグのバックグラウンドにロードさせています(フォアグラウンドのimgタグを「表示、非表示」させて画像を切り替えている)。
JavaScripデモ:MouseEvent001/test007
http://ashtarte.pa.land.to/utf8/smt.cgi?r+sara/& …
No.3
- 回答日時:
下記はマウス・イベント時の画像の読み込み時のタイムラグを軽減するためにimgタグでも画像をプリロードさせています。
JavaScripデモ:MouseEvent001
http://ashtarte.pa.land.to/utf8/smt.cgi?r+sara/& …
No.2
- 回答日時:
下記はマウス・イベント時の画像の読み込み時のタイムラグを軽減するために画像をキャッシュにプリロードさせていますが、マウス・イベント時の画像の読み込み時のタイムラグは発生してしまうようです(つまりキャッシュにプリロードされてない?)。
画像がキャッシュにロードされていれば、マウス・イベント時の画像の読み込み時のタイムラグは発生しないようです。
JavaScripデモ:MouseEvent001
http://ashtarte.pa.land.to/utf8/smt.cgi?r+sara/& …
お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう!
似たような質問が見つかりました
- その他(プログラミング・Web制作) Leafletで画像をon、offさせる方法について 2 2022/11/01 15:34
- PHP アップロード画像数でCSSを分けることに成功したのですが、画像の横に文字を並べることが出来ません。 3 2023/07/28 17:16
- JavaScript アップロードファイルの種類によって処理を分岐させたいのですが書き方が分からずアドバイスお願いします 4 2023/06/17 19:12
- HTML・CSS 吹き出し 下記の吹き出しのスタイルシートについて 下記のスタイルシートは左側にアイコンがでる使用にな 1 2022/11/12 17:55
- HTML・CSS CSSが効かずどのように指定すれば良いか分からないのでアドバイスお願い致します 2 2023/06/07 12:25
- Chrome(クローム) Chromeリモートデスクトップについて 1 2022/09/02 18:40
- HTML・CSS スクロールすると追従する画像のコードを書いているのですが、追従する画像の大きさの調節が上手くいきませ 2 2022/04/18 12:52
- Windows 10 (緊急)windowsのタスクバーやアプリ?が反応しない 3 2023/03/28 05:03
- HTML・CSS PCサイズで赤い画像2つと、青い画像2つがそれぞれ横に2つずつ並んでいるのですが、これをスマホサイズ 5 2022/04/11 12:01
- マウス・キーボード マウスのないパソコン 9 2022/03/30 10:53
関連するカテゴリからQ&Aを探す
おすすめ情報
デイリーランキングこのカテゴリの人気デイリーQ&Aランキング
-
ボタンを押したままにする。
-
背景画像を季節ごとに自動変更
-
ホームページにサウンドの「ON...
-
画像クリックでクリップボード...
-
期間ごとに画像表示を切り替え...
-
IMGタグでTIFF画像を表示
-
スマホで、画像をクリックする...
-
WEBサイトの一部コンテンツがス...
-
正規表現でリンクタグを削除す...
-
カウンターのHTMLソースを教え...
-
フォルダ内の画像をウェブでラ...
-
アドレスがあっているのにバナ...
-
HTMLだけで画像をクリックして...
-
バナーの貼り方とバナーにリン...
-
テーブルで画像+文字+リンクを...
-
クリックしても、リンクに飛ば...
-
テーブル内の画像がずれてしま...
-
サブウインドウで画像を表示す...
-
右クリック禁止が効かないのですが
-
IE11にてonclickの動作不良
マンスリーランキングこのカテゴリの人気マンスリーQ&Aランキング
-
ボタンを押したままにする。
-
カーソルを合わせると文字が出...
-
複数のボタンで1つのエリアに...
-
タイトルバーに画像を入れるHTM...
-
バナーの貼り方とバナーにリン...
-
クリックしても、リンクに飛ば...
-
IMGタグでTIFF画像を表示
-
pngやjsの後ろの英数字の意味は...
-
スライドショーの上にロゴマー...
-
背景が透明なリンクボタンで、...
-
HTMLにQRコードを挿入する方法
-
画像クリックでクリップボード...
-
form以外でのpostってできますか?
-
クリッカブルMAP領域が分かる様...
-
フォルダ内の画像をウェブでラ...
-
拡張子無しで画像を表示したいです
-
アルバムをめくるように、画像...
-
崩れたレイアウトが更新すると...
-
datepickerを使ってカレンダー...
-
期間ごとに画像表示を切り替え...
おすすめ情報