No.1ベストアンサー
- 回答日時:
htmlとcssだけではできなかったので、
javascriptでページの移動を遅らせて、
その間にgifを表示するということを
してみました。
sample.gifというgifアニメと、
anotherpage.htmlというリンク先ファイルを、
以下のhtmlファイルと同じフォルダに入れてから
実行してみてください。
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>gif-anime</title>
<style>
.gif{
margin:10% auto;
width:300px;
height:300px;
}
.btn {
background-color: #45d;
color: #fff;
}
.btn>.b {
display: none;
}
.btn:enabled:hover {
background-color: #d45;
}
.btn:enabled:hover>.a {
display: none;
}
.btn:enabled:hover>.b {
display: inline;
}
.btn:disabled {
background-color: #333;
color:#aaa;
}
</style>
</head>
<body>
<button id="btn" class="btn" disabled>ボタン<span class="a">A</span><span class="b">B</span></button>
<img src="sample.gif" id="gif" class="gif" style="display:none;"/>
<script>
const delayTime = 3000, // 待ち時間(ミリ秒)
linkURL = 'anotherpage.html'; // リンク先URL
const btn = document.getElementById('btn'),
gif = document.getElementById('gif');
gif.addEventListener('load', () => { // 画像が読み込まれたら
btn.disabled = false; // ボタンを押せるようにする
btn.addEventListener('click', () => { // クリックされたら
gif.style.display = 'block'; // gifを表示する
window.setTimeout(()=>{ // 待ち時間分遅らせる
location.href = linkURL; // リンク先へ飛ぶ
},delayTime);
}, false);
}, false);
</script>
</body>
</html>
この回答へのお礼
お礼日時:2021/09/08 09:10
こんなに詳しく、ありがとうございます!
やはりjavascriptが出来ないと、表現できることに限りがありますね…。
早速、実装してみようと思います。
本当にありがとうございました!
お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう!
似たような質問が見つかりました
- 企画・マーケティング ウェブ広告の無意味な「×」ボタンは規約や消費者保護関連の法律の違反には当たらないですか? 画面上にデ 2 2023/06/18 19:21
- ノートパソコン gifアニメ―ションを動画(mp4でOK)にしたい 1 2022/08/14 09:51
- au(KDDI) 特定の画面を見るとスマホが固まります ご覧頂き有難うございます。 特定のページを見るとスマホが固まり 1 2023/08/21 19:29
- HTML・CSS VSコードでHTMLに(リンク)ファイル名をクリックしてもファイルが開かれない 1 2023/02/12 07:52
- Visual Basic(VBA) Edge操作のアプリが例外発生に 1 2023/03/12 21:22
- docomo(ドコモ) 通話録音が(最初から)自動的に始まるアプリは? 7 2023/01/16 15:53
- JavaScript jqueryを使ったスムーススクロールのコードを書いたのですが、HTMLコード内にある、a butt 2 2022/04/14 10:59
- HTML・CSS 検索窓とcssハックについて 3 2022/04/22 12:21
- その他(データベース) Q&Aフォームを作成したいのですが、どう設計してよいか分かりません、アドバイスお願い致します。 1 2023/07/27 19:04
- Android(アンドロイド) AQUOS sense6sの物理ボタン(アシスタントキー)に再生・一時停止を割り当てる方法 2 2022/08/09 00:37
このQ&Aを見た人はこんなQ&Aも見ています
関連するカテゴリからQ&Aを探す
おすすめ情報
このQ&Aを見た人がよく見るQ&A
デイリーランキングこのカテゴリの人気デイリーQ&Aランキング
-
<!DOCTYPE html>あってますか?↑
-
POSTしたデータの文字コードがu...
-
Duolingo のソースコードの名前...
-
body内にmetaタグを記述は問題...
-
safariにcssが反映されなくて困...
-
text-decorationを伸ばす方法
-
iframe内の表示を常に最新にしたい
-
safariだけcssが反映されない
-
COLDFUSIONの文字化け
-
日本語が下記のように文字化け...
-
css ,videotタグ。ホームページ...
-
<META>文字コードと入力場所に...
-
html で 変数を定義できますか?
-
文字化けを故意に表示したい
-
WebのPythonでの値の受け渡し
-
HTMLソースにない文字がブラウ...
-
短縮URL作成
-
HTMLファイルのインクルードで...
-
HTML5での http-equiv="refresh...
-
IE操作時、metaタグ自動転送前...
マンスリーランキングこのカテゴリの人気マンスリーQ&Aランキング
-
css ,videotタグ。ホームページ...
-
POSTしたデータの文字コードがu...
-
Duolingo のソースコードの名前...
-
body内にmetaタグを記述は問題...
-
iframe内の表示を常に最新にしたい
-
ページ全体を中央に配置したい...
-
HTML上に貼り付けたPDFが表示さ...
-
HTMLソースにない文字がブラウ...
-
HTMLファイルのインクルードで...
-
Google検索でサイト説明文が文...
-
文字化けを故意に表示したい
-
自分で<head>内をかけない場合...
-
FFFTPでの文字化け
-
根号の書き方について
-
表示時に1回だけリロードさせ...
-
リンクボタンにgifアニメを使え...
-
COLDFUSIONの文字化け
-
HTMLでwebサイトを作ってるので...
-
Content-Typeの大文字
-
borderでa:hover下線表示させる...
おすすめ情報