- ベストアンサー
ロールオーバーの３パターンは出来ますか？
ＨＰＢのＶ１０を使用しています。 ＨＰＢのロールオーバーは２パターンの変化しか出来ません（たぶん？）が３パターンの画像変化をさせたいのですが、具体的には「蝶」「とんぼ」「せみ」の画像があって「蝶」の上にカーソルを持って行くと「とんぼ」に切り替わり、クリックしたら「せみ」（一瞬で可）に変化してリンク先に飛ぶ・・・という様な事をしたいのですが、出来ますでしょうか？ 当方、超初心者なため「具体的」に教えて欲しいのですが、無理（？）言ってすみません！宜しくお願いします。
- yoshiki3
- お礼率30% (27/88)
- ホームページ作成ソフト
- 回答数1
- ありがとう数1
- みんなの回答 （1）
- 専門家の回答
質問者が選んだベストアンサー
少々変則的(?)になりますが…可能だと思います。 初めに断っておきますと、このやり方だとブラウザによって多少挙動が異なっているので完璧なやり方ではありません。 たぶんこれよりもっと良いやり方があると思いますが私にはこれ以上思いつきませんでした。 あと注意点としてはこのやり方の場合、蝶、とんぼ、せみ、透明な画像、 すべて同じサイズの画像でないと綺麗にいかないと思います。 <html> <head> <title></title> <style type="text/css"> <!-- a.mimg{ background-image: url(蝶の画像のURL); float:left} a:hover.mimg{ background-image: url(とんぼの画像のURL)} a:active.mimg{ background-image: url(せみの画像のURL)} --> </style> </head> <body> <a href="リンクしたいURL" class="mimg"><img src="透明な画像のURL"></a> <br style="clear: both;"> </body> </html> 感じとしては、cssで透明な画像の下に蝶、トンボ、セミの画像を表示させています。 一応透明な画像の作り方も書いてみます。 Windowsに入ってるペイントでも透明な画像が作れるらしいので、 ペイント他お手持ちのグラフィックソフトに慣れてましたらここら辺の文章はとばして下さい。 今回透明画像を作るのに使ったのはJTrimというフリーのフォトレタッチソフトソフトです。 http://www.woodybells.com/jtrim.html 上記サイトのDOWNLOADからダウンロードできますので ソフトの作成主に感謝しつつインストールして下さい。 手順としては、ソフトを立ち上げて 「ファイル(F)」→「新規作成」で縦横のサイズを作りたい透明画像のサイズに変更して、キャンバスの色は白を選んでOKを押して下さい。 「イメージ(I)」の下の方にある「透過色設定(G)」を選択して 新規作成した白いキャンバスの所をクリックして、市松模様になったら 透過完了です。あとは「ファイル(F)」から「名前を付けて保存(A)」でファイルの種類はgifで保存すれば透明な画像の作成終了になります。 参考URLに実験ページを作りましたので、 右クリックしてソースも合わせて見てみて下さい。 ソースの方に少しタグの解説も入れてみました。
補足
gorokucさん回答有り難う御座います。 投稿してから随分経過していたのでもう「諦め」ていました。 私が思っていた通りの「動作」で、これでＨＰを更新したいと思っています、本当にありがとう！ ですが、１つ質問があります・・・ここで使用する「透明画像」の役割が理解出来ませんよろしかったらもう少し説明して貰えませんか？ 宜しくお願いします。