ロールオーバーのHTMLを教えてください。

質問

二つの図を使いロールオーバーさせる方法を教えてください。

図Ａ（files/559e05ac002.gif）は、イラストのGIFファイルです。
図Ｂ（files/559e05ac003.gif）は、そのイラストを加工したアニメGIFです。

サイト閲覧時に、マウスを「イラストである図Ａ」に乗せると「アニメGIFである図Ｂ」に切り替わることで、あたかもそのイラストが動き出すようにしたいと思っています。

今は、とても簡易なホームページ作成ソフトを使って、ページのあらかたは出来上がっています。
ただ、図に関しては、ホームページの知識がなく、二つの図を重ねて表示することすらできません。
今は、二つの図が上下に順に配置されています。

ネットで図を重ねるコマンドやロールオーバーのコマンドを調べて自分なりにいじってみましたが、うまくいかないので困っています。

下のコードは、作ったページのタイトル以下の『図の部分』と思われるものをコピーしました。この図の下には説明文が続いていますが、それはここでは省略しました。

このコードをどのように変えたらいいのか、すみませんが教えていただけるでしょうか。

このコードは、フリーのHTMLエディターのHeTeMuLu Creatorを使って表示させ、コピペしました。

ＯＳはWin7です。

よろしくお願いします。

<TR>
<TD height=50 vAlign=bottom colSpan=2>
<H2><STRONG
class=page_title><!-- ACCCHECK タイトル -->（平成２７年現在）</STRONG>
</H2></TD></TR></TBODY></TABLE>
<DIV id=container>
<DIV align=center>
<TABLE border=0 cellSpacing=0 cellPadding=0 width=800 align=left>
<TBODY>
<TR>
<TD align=left><BR>
<DIV><!-- ACCCHECK 内容（本文） -->
<P><IMG border=0 alt=データはダウンロードしてから使ってください align=bottom
src="（平成２７年現在）.files/559e05ac002.gif" width=949 height=512><IMG
style="BORDER-BOTTOM: medium none; POSITION: relative; BORDER-LEFT: medium none; BORDER-TOP: medium none; BORDER-RIGHT: medium none; TOP: 0px; LEFT: 0px"
alt=データはダウンロードしてからね align=bottom
src="（平成２７年現在）.files/559e05ac003.gif" width=949 height=512><IMG
style="BORDER-BOTTOM: medium none; POSITION: absolute; BORDER-LEFT: medium none; BORDER-TOP: medium none; BORDER-RIGHT: medium none; TOP: 0px; LEFT: 0px" </P>
<P>&nbsp;</P>

回答No.2

uphome · ベストアンサー

失礼しました、追記です。
2枚重ねるところまでで終わってしまっていて、ロールオーバー処理が丸々抜けていました。

以下のコードを追記してください。
追記する場所はどこでもいいです。
</p>の後ろあたりでも、一番最初でも大丈夫です。

<style>
img[src="（平成２７年現在）.files/559e05ac002.gif"]:hover {
opacity: 0;
}
</style>

お礼

私のやり方が悪いのか、うまくできませんでした。
でも、細かく教えていただいて感謝しています。

ありがとうございました。

回答No.3

やぎ じじい（@yagijijii）

２つの画像の入れ替えならば、画像にＩＤを指定して、
以下のように行なうのが簡単だと思います。

<img id='picid' src='a.gif' onmouseover='mover()' onmouseout='mout()'>

<script type='text/javascript'>
function mover(){document.getElementById('picid').src = 'b.gif';}
function mout(){document.getElementById('picid').src = 'a.gif';}
</script>

お礼

IDを指定することをネットで調べてやってみようと思います

ありがとうございます

回答No.1

uphome

htmlについての理解がどのくらいかわからないので初歩から説明します。
htmlは、「タグ」で文章にルールを作るものです。

ここでは、質問の中で使われているタグについてのみ説明します。
<div>〇〇</div>：ひとまとまりのハコを意味します。
<!-- 〇〇 -->：コメント欄です。表示には反映されません。
<p>〇〇</p>：パラグラフの頭文字です。文章、文節などを意味します。
<img 〇〇 />：画像です。

タグだけを見ると、かなり短くなるのがわかると思います。
それぞれのタグには、「属性」でルールを追加することができます。
border=〇〇：枠線です。
alt=〇〇：代替文です。たとえば、画像が表示されなかった場合に代わりに表示される文章です。
align=〇〇：整列位置です。
src=〇〇：source、ソースの略称です。画像ファイルを呼び出すurlなどを指定します。
width=〇〇：幅です。
height=〇〇：高さです。
style=〇〇：表示方法=スタイルをまとめて指定します。

これで、おおよそ、質問にあるhtmlコードが読めると思います。
ここから、質問の回答に移りたいと思います。

画像のロールオーバーの表示方法はいくつかあります。
1. 画像を背景に設定して、ホバー時に背景を切り替える
2. 画像を2枚同じ位置に表示させて、ホバー時に手前の画像を透明にする
3. 画像を1枚表示させて、ホバー時にjavascriptで切り替える
4. 他

1. が一般的ですが、今回は2. が質問の回答に近いと思うので、こちらで説明します。

・3つめのimgタグは消し忘れのようですので、</p>の前まで消してください。
・画像のsrcを入れ変えます。後から書いたものが手前に来るためです。
・1枚目（奥側）の画像の属性に、「style="position: relative;"」を追加します。
こちらが、ホバー時に表示される画像です。
・2枚目（手前側）の画像の属性にすでにある、「position: relative;」を、「position: absolute;」に変更します。
こちらが、静止している画像です。

「position」は、表示位置の決め方を指定するためのものです。
説明が難しいので、詳しい説明は省きます。
解説しているサイトがそこらじゅうにあるので、必要でしたらご自身で調べてみてください。

自動生成されているのか、数多くの属性が入り乱れているので、これでは上手くいかないかもしれませんが、以下に変更後のコードを載せておきます。
本文と書いてあるところから下が、画像を表示している部分です。

<DIV><!-- ACCCHECK 内容（本文） -->
<P><IMG border=0 alt=データはダウンロードしてから使ってください align=bottom
src="（平成２７年現在）.files/559e05ac003.gif" width=949 height=512 style="position: relative;"><IMG
style="BORDER-BOTTOM: medium none; POSITION: absolute; BORDER-LEFT: medium none; BORDER-TOP: medium none; BORDER-RIGHT: medium none; TOP: 0px; LEFT: 0px"
alt=データはダウンロードしてからね align=bottom
src="（平成２７年現在）.files/559e05ac002.gif" width=949 height=512></P>

お礼

とても詳しく教えていただきありがとうございました。

本当に感謝します。