
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で質問しましょう!
関連するカテゴリからQ&Aを探す
今、見られている記事はコレ!
-
弁護士が解説!あなたの声を行政に届ける「パブリックコメント」制度のすべて
社会に対する意見や不満、疑問。それを発信する場所は、SNSやブログ、そしてニュースサイトのコメント欄など多岐にわたる。教えて!gooでも「ヤフコメ民について」というタイトルのトピックがあり、この投稿の通り、...
-
弁護士が語る「合法と違法を分けるオンラインカジノのシンプルな線引き」
「お金を賭けたら違法です」ーーこう答えたのは富士見坂法律事務所の井上義之弁護士。オンラインカジノが違法となるかどうかの基準は、このように非常にシンプルである。しかし2025年にはいって、違法賭博事件が相次...
-
釣りと密漁の違いは?知らなかったでは済まされない?事前にできることは?
知らなかったでは済まされないのが法律の世界であるが、全てを知ってから何かをするには少々手間がかかるし、最悪始めることすらできずに終わってしまうこともあり得る。教えてgooでも「釣りと密漁の境目はどこです...
-
カスハラとクレームの違いは?カスハラの法的責任は?企業がとるべき対応は?
東京都が、客からの迷惑行為などを称した「カスタマーハラスメント」、いわゆる「カスハラ」の防止を目的とした条例を、全国で初めて成立させた。条例に罰則はなく、2025年4月1日から施行される。 この動きは自治体...
-
なぜ批判コメントをするの?その心理と向き合い方をカウンセラーにきいた!
今や生活に必要不可欠となったインターネット。手軽に情報を得られるだけでなく、ネットを介したコミュニケーションも一般的となった。それと同時に顕在化しているのが、他者に対する辛らつな意見だ。ネットニュース...
おすすめ情報
デイリーランキングこのカテゴリの人気デイリーQ&Aランキング
-
bodyにidをつける理由は何ですか?
-
iframeのsrcにページ内リンク(...
-
bodyタグって2重にしようするこ...
-
(Javascript)印刷するファイル...
-
クリックしたら記事が表示・非表示
-
別ページのページ内リンクでの...
-
空のHPが表示されます(HTMLソー...
-
ASP.NET MVCでFancyboxを使いたい
-
複数のiframeの読み込みについて
-
<a href="#" …>の意味を教えて...
-
スマホ上で、左右スワイプで次...
-
クリックすると別の文章を表示する
-
javascriptとApacheの設定
-
HTMLソースからURLだけを抜き出...
-
window.onloadイベントの任意実...
-
親ウィンドウから子ウィンドウ...
-
プルダウンと入力を両方行う検...
-
子フレームの自動リロードは可...
-
変数の代入値を外部の.txtファ...
-
ボタンを押してテキストエリア...
マンスリーランキングこのカテゴリの人気マンスリーQ&Aランキング
-
bodyにidをつける理由は何ですか?
-
テキストボックス内にハイパー...
-
複数のiframeの読み込みについて
-
WEB上で編集できない、スク...
-
"mailtoでメールの【氏名】【性...
-
ハイパーリンクに下線を表示す...
-
フォントの色指定を一部解除したい
-
別ページのページ内リンクでの...
-
(Javascript)印刷するファイル...
-
bodyタグって2重にしようするこ...
-
Chromeがiframe内の「#~」に釣...
-
<HR>タグでつくる四角形につい...
-
横スクロールを右から左へ・・・
-
外部ページからハッシュタグ(...
-
テーブル内の数値を自動で計算...
-
テキストをクリックすると答え...
-
「overflow: hidden」ペー ジ内...
-
ページを読み込み直さずに、sel...
-
背景が流れる(スクロールする...
-
2カラムのHPを作っているので...
おすすめ情報
ありがとうございます。
html、CSSは理解出来ますけれど、JavaScriptが素人レベルですので
最期の4行の
ボタンクリックのイベントにて~ 以下最後までの書き方が分かりませんです。
ネット検索にてhtmlファイルの</body>タグの直前に<script>~</script>を
書くことまでは分かりましたけれど、どの様に記述して良いのか分かりませんです。