HTML、CSSの記述でマウスオーバーで画像を変える方法

HTMLのDiv、id、Class、HOVERの記述の質問です。

左側に○、右側に□の画像を配置、
通常は、「○■」(左側が光ってONの状態)

この時、マウスを■に重ねた時だけ□に変わるが、マウスを○に重ねても反応させない。
■の上でクリックすると以下のようになる。
「●□」(左の○が暗くなりOFF、右側の□が光ってONの状態)
今度は、マウスを●に重ねた時だけ○に変わるが、マウスを□に重ねても反応させない。
このように片方をONにするともう片方がOFFになるスイッチの様な動きをさせたいのですが、
HTMLファイルとCSSファイルにどんな記述をすれば実現できるでしょうか？

文中では以下の記号とファイル名で対応していますが実際には画像データです。
● = left.png
○ = left_on.png
■ = right.png
□ = right_on.png

No.11 回答者： amanojaku6 回答日時： 2018/11/09 20:49

実際のページの動作は下記アドレスで確認できます。

http://ashtarte.pa.land.to/test/MouseRollover001 …

日本語ページと英語ページの「left」側の記述と、「right」側の記述が違うことに注意して下さい。

この回答へのお礼

返事が遅くなって申し訳ありません。
テストページを拝見したところ、こちらの望む事が実現できている事は確認できています。ありがとうございます。
後程実際に試してみたいと思います。

お礼日時：2018/11/14 15:36

No.10 回答者： amanojaku6 回答日時： 2018/11/09 20:41

>No.9　回答者： amanojaku6

あと英語ページのbackgroundのリンクも修正が必要でした。

【英語ページ】

> background: url("../left_on.png") no-repeat;

background: url("./left_on.png") no-repeat;

No.9 回答者： amanojaku6 回答日時： 2018/11/09 19:56

例えば、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 回答者： amanojaku6 回答日時： 2018/11/07 23:36

> <div class="MouseRollover">

> <a href="../works001.htm">
> <img src="../left.png" >
> </a>
> </div>

↑必ず「div」タグを使って下さい。

No.7 回答者： amanojaku6 回答日時： 2018/11/07 23:32

>注釈「<!-- --!>」内の記述を自分の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 回答者： amanojaku6 回答日時： 2018/11/07 20:13

>↓具体的にはこのサイトです。

>http://dragon-inc.jp/works.html

CSSデモ：MouseRollover001
http://ashtarte.pa.land.to/utf8/smt.cgi?r+sara/& …

この回答へのお礼

ありがとうございます。

注釈「<!-- --!>」内の記述を自分のCSS内に記述すれば良いという事でしょうか？

お礼日時：2018/11/07 22:16

No.5 回答者： amanojaku6 回答日時： 2018/11/04 10:51

(「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にした方が良いというアドバイスがあれば切り替えも検討したいと思います。
よろしくお願いいたします。

お礼日時：2018/11/06 20:10

No.4 回答者： amanojaku6 回答日時： 2018/11/04 10:25

下記はマウス･イベント時の画像の読み込み時のタイムラグを軽減するためにdivタグのバックグラウンドにロードさせています(フォアグラウンドのimgタグを「表示、非表示」させて画像を切り替えている)。

JavaScripデモ：MouseEvent001/test007
http://ashtarte.pa.land.to/utf8/smt.cgi?r+sara/& …

No.3 回答者： amanojaku6 回答日時： 2018/11/03 16:45

下記はマウス･イベント時の画像の読み込み時のタイムラグを軽減するためにimgタグでも画像をプリロードさせています。

JavaScripデモ：MouseEvent001
http://ashtarte.pa.land.to/utf8/smt.cgi?r+sara/& …

No.2 回答者： amanojaku6 回答日時： 2018/11/03 12:03

下記はマウス･イベント時の画像の読み込み時のタイムラグを軽減するために画像をキャッシュにプリロードさせていますが、マウス･イベント時の画像の読み込み時のタイムラグは発生してしまうようです(つまりキャッシュにプリロードされてない？)。

画像がキャッシュにロードされていれば、マウス･イベント時の画像の読み込み時のタイムラグは発生しないようです。

JavaScripデモ：MouseEvent001
http://ashtarte.pa.land.to/utf8/smt.cgi?r+sara/& …