No.3ベストアンサー
- 回答日時:
イメージマップは一つの画像内でリンクを区別する場合に使うものなので、リンク毎に画像が分かれているなら、単純にそれぞれに <a> を付けて配置しましょう。
画像同士の重ね合わせ順の調整は、以下を参考にしてください。
https://developer.mozilla.org/ja/docs/Web/CSS/CS …
<html>
<head>
<style>
.fixbanner { /* 画面右下に固定表示 */
position:fixed; right:1rem; top:1rem;
}
.fixbanner .closer { /* 固定表示内の右上に少しはみだし */
position:absolute; right:0; top:0;
margin:-0.5rem -0.5rem 0 0;
}
</style>
<script src="jquery.js"></script>
<script>
$(function() {
$('.fixbanner').on('click', '.closer a', function(){
$(this).closest('.fixbanner').fadeOut('slow');
return false;
});
});
</script>
</head>
<body>
<navi class=fixbanner>
<div class=closer>
<a href="#close"><img src="close.png"></a>
</div>
<a href="どこか"><img src="banner.png"></a>
</navi>
</body>
</html>
ありがとうございます。
質問させて頂きましたあとも引き続きネット検索をしながら、
閉じるボタンのはみ出しはやめて、以下のような感じで
ネットのコピペを若干修正して実現出来ました。
【CSS】
書き込み文字数制限オーバーの為省略
【html】
<div id="banner_Panel" class="panel panel-default">
<a href="ttps://google.com"><img class="kankan" src="img.png" alt=""></a>
<div class="deleteButtonContainer">
<button type="submit" id="banner_Close" class="deleteButton">×</button>
</div>
</div>
<script>
$( function() {
$('#banner_Close').click( function () {
$('#banner_Panel').fadeOut('fast');
} );
} );
</script>
</body>
No.2
- 回答日時:
こんにちは
>html、CSSは理解出来ますけれど、
とのことなので、CSSだけで動作するものをなんとか作ってみました。
以下、ご参考までに。
<!DOCTYPE HTML>
<html lang="ja">
<head><title>Sample</title>
<style>
.wrap{
position: fixed;
right: 3em;
bottom: 2em;
}
.wrap .banner{
display: block;
padding: 1em;
background-color: #FCC;
}
.wrap label{
position: relative;
display: block;
}
.wrap label::after {
position: absolute;
right: -0.8em;
top: -0.8em;
width: 1.6em;
height: 1.6em;
display: flex;
align-items: center;
justify-content: center;
background-color: #F88;
border-radius: 50%;
color: white;
content: "×";
z-index: 1;
cursor: pointer;
}
#close{ display: none; }
#close:checked ~div{ display: none; }
</style>
</head>
<body>
<div class="wrap">
<input id="close" type="checkbox" />
<div>
<label for="close"></label>
<a class="banner" href="ttps://www.google.com/">banner</a>
</div>
</div>
</body>
</html>
No.1
- 回答日時:
バナー全体を囲むブロック要素にクラス名を付ける
例) <navi class=fixed-banner><a>..</a></navi>
ブロック要素内にボタン用のブロック要素を入れる
例) <div class=closer><a>..</a></div>
ボタン用要素を、バナー右上に配置しネガティブマージンで枠外にはみ出させる。
例)
.fixed-banner .closer {
position:absolute; right:0; top:0;
margin:-1em -1em 0 0;
}
ボタンクリックのイベントにて、上位のバナー全体を囲む要素まで辿り DOM から削除する
例)
var t = eventTarget.closest('.fixed-banner');
t.parentNode.removeChild(t);
ありがとうございます。
今、イメージマップで
<p style="position:fixed; bottom:0px; right:0px; width:300px; hight:125px; z-index:10;" id="banner_Panel" class="panel panel-default">
<img src="img.png" usemap="#ImageMap" alt="">
<map name="ImageMap">
<area shape="poly" coords="0,0,280,0,280,20,300,20,300,125,0,125" href="ttps://google.com" style="border:none; outline:none;">
<area shape="rect" coords="280,0,300,20" id="banner_Close">
</map>
</p>
~中略~
<script>
$( function() {
$('#banner_Close').click( function () {
$('#banner_Panel').fadeOut('fast');
} );
} );
</script>
</body>
</html>
という具合には出来ましたけれど、閉じるマークがスマートではありませんので
ご回答戴きました記述へと変換していますところですが、上手くいきません…
閉じるマークと下絵の記述順序・コツなどありますでしょうか?
お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう!
似たような質問が見つかりました
- その他(セキュリティ) SMSの不在通知メールについて 3 2023/06/09 15:03
- HTML・CSS トリミングで表示した画像をクリックで元どおりにしたい 3 2022/12/16 18:49
- その他(ブログ) なぜ、ホームページが削除されても、そのホームページ上の画像のリンク先がリンク切れになる場合 5 2023/07/15 10:24
- ホームページ作成・プログラミング CGIが実行可能なHP領域又はレンタルサーバーでおすすめの所を教えてください 現在ホームページ領域の 1 2023/01/01 11:47
- Windows 10 フォルダ内の全ての画像を矢印キーでスライドできるようにしたい 1 2022/10/21 12:53
- HTML・CSS リンクバナーのHTMLタグ。画像を変えたり、設置位置を変えるとバナー貼付け側はどう見える? 2 2023/02/01 12:01
- HTML・CSS 画像が分割されて切り替わる、ループアニメーションが作りたい 7 2023/05/27 17:12
- その他(IT・Webサービス) どうすればgoogleのポップアップの表示が消えますか? 3 2022/09/11 14:04
- Word(ワード) ワード。オブジェクトの一部分にグラデーションを塗るには 2 1 2022/10/04 16:25
- プリンタ・スキャナー 封筒印刷 差出人印刷ずれる 4 2022/05/01 10:12
関連するカテゴリからQ&Aを探す
おすすめ情報
デイリーランキングこのカテゴリの人気デイリーQ&Aランキング
-
bodyにidをつける理由は何ですか?
-
テキストボックス内にハイパー...
-
bodyにwidth:100%をつける理由は?
-
google mapをiframeで表示させ...
-
<object data="">の挙動について
-
ページによって表示位置がずれ...
-
インラインフレームの下にある...
-
<a href="#" …>の意味を教えて...
-
<div>のタッチ状態を維持したま...
-
別ファイルのfunctionの読み込み方
-
getElementsByNameで要素が取得...
-
プラグイン無しでContactform7...
-
SQLのWHEREで全てを質問する方法
-
ウインドウを縮小しても文字を...
-
プルダウンメニューを別ファイ...
-
Dreamweaver で 外部JSを読み込...
-
「関数が定義されていない」と...
-
window.openで同画面遷移しない
-
確認ダイアログで「キャンセル...
-
bxslider、画像が3枚以上になる...
マンスリーランキングこのカテゴリの人気マンスリーQ&Aランキング
-
bodyにidをつける理由は何ですか?
-
テキストボックス内にハイパー...
-
(Javascript)印刷するファイル...
-
ハイパーリンクに下線を表示す...
-
bodyにwidth:100%をつける理由は?
-
WEB上で編集できない、スク...
-
ワンクリックで二箇所に表示さ...
-
スクロールバーのスクロール量...
-
横スクロールを右から左へ・・・
-
テキストをクリックすると答え...
-
bodyタグの範囲について
-
ページの読み込みが完了してか...
-
「overflow: hidden」ペー ジ内...
-
"mailtoでメールの【氏名】【性...
-
外部ページからハッシュタグ(...
-
DOCTYPE宣言をするとstyleが適...
-
mailtoで質問・・・
-
IE以外は色が付かない なぜ?
-
javaScript Nullまたはオブジェ...
-
divで作成したテキストボックス...
おすすめ情報
ありがとうございます。
html、CSSは理解出来ますけれど、JavaScriptが素人レベルですので
最期の4行の
ボタンクリックのイベントにて~ 以下最後までの書き方が分かりませんです。
ネット検索にてhtmlファイルの</body>タグの直前に<script>~</script>を
書くことまでは分かりましたけれど、どの様に記述して良いのか分かりませんです。