アニメgifのロールオーバーボタン

質問

アニメgifでロールオーバーボタンを
作るにはどうしたらいいのでしょうか？？
アニメgifにマウスをのっけると
違うファイル（アニメではない普通のgifファイル）
になるようにしたいのです。

ふつうのロールオーバーボタンの作り方を
してしまうと変になってしまうので・・・(´・ω・`)

fire worksで作ってます。
よろしくお願いいたします。

回答No.3

Lunaria · ベストアンサー

すみません、何だか後から読み返したらちょっと読み違えてました。
アニメＧＩＦのほうが実際の大きさよりも小さく表示されてしまうんですね？　逆だと思ってました（汗）
これはアニメのほうがサイズが大きいからですね。
だとすれば動かないほう、普通のGIF画像のほうに透明な余白をつけて、アニメと同じ大きさにすれば解決です。
下に書いた方法（大きいほうの画像に合わせてサイズ指定したテーブルで囲む）でも大丈夫ですが、画像そのものを加工するほうが手軽です。
ただ画像加工出来るソフトがあればいいですが、フリーだと透過GIFを作成出来るソフトは多くはないです。

お礼

できました！
画像サイズってファイルの重さじゃなくて大きさそのものをそろえるんですね^^
勘違いしてた私が恥ずかしいです～**
画像加工ソフトはありましたのでなんとか出来上がりました！
Lunaria様、何度もありがとうございました！！！

回答No.2

Lunaria

こんばんは。
＞動きがあるほうが小さくなっちゃう
これは二つの画像の大きさが違う所為ですね。
アニメＧＩＦのほうに透過色で余白をつけて同じサイズにすれば直ると思いますが、加工が難しいようでしたらwidthとheightを外してしまえば元通りの大きさでb.gifも表示されます。
ただし、こうすると画像の大きさが変わるために周囲の記事などが動いてしまう場合があります。
回避策としてどうかと思って今やってみた結果上手くいったのですが、ロールオーバーボタンを幅、高さを指定したテーブルで囲んでしまうと位置も固定されて大丈夫みたいですよ。
（テーブルよりスタイルシートのほうがいいかと思いましたが、簡単なのでテーブルにしてみました）

<table width="60" height="120" border="0">
<tr><td align="center" valign="center">
<a href="（リンク先アドレス）"><img src="a.gif" alt="触ると変わります" onmouseover="this.src='b.gif'" onmouseout="this.src='a.gif'"></a>
</td></tr></table>

こんな感じです。
width="60" height="120"はb.gif（大きいほう）に合わせて調整してください。

横にいくつか並べる場合、コメントなどがある場合はそれらを全部入れるテーブルを作ってそれぞれセルに入れ、横幅は<td>で指定することになると思います。
またそれぞれの高さが違う場合は、ひとつずつテーブルに入れてそれを更にテーブルで囲んでレイアウトすることになります。
そのあたりはレイアウトに合わせていろいろ工夫してみてください。
テーブルが入れ子になったりするとややソースが煩雑になってしまうと思いますが……。

画像のほうを同じ大きさに出来ると一番楽なんですけどね…
あまり上手い方法が思いつかなくてすみません。

回答No.1

Lunaria

何がどのように変になってしまうのかを書いていただけると、もっと適切な回答が来るかもしれませんが、とりあえず一番簡単だと思う方法を書いてみます。

<IMG SRC="a.gif" BORDER="0" WIDTH="20" HEIGHT="20" ALT="触ると変わります" ONMOUSEOVER="this.src='b.gif'" ONMOUSEOUT="this.src='a.gif'">

a.gifが触れる前の画像、b.gifがカーソルを合わせた時の画像です。
画像の名前と大きさ、ALT属性は適当に書き換えてください。
綺麗に作るポイントは二つの画像を同じ大きさで用意する事でしょうか。
「"」とか「'」の抜けにご注意ください。
画像のファイルサイズが大きめなら、
<IMG SRC="b.gif" BORDER="0" WIDTH="1" HEIGHT="1" ALT=" ">
をロールオーバー画像より前の部分に書いておけば、読み込みがスムーズになります。
（見えないように表示するため、 WIDTH="1" HEIGHT="1"はこのまま書いてください）

お礼

ありがとうございます！
dreamweaverでやると、ブラウザで確認したときに、片方の画像が小さく表示されちゃうんです。動きがあるほうが小さくなっちゃうのですが、動きのない方とサイズ同じにするのは難しい・・・というか無理ですし。　
うーーん？？

読み込みスムーズにするテクは目からウロコです^^