
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を探す
おすすめ情報
デイリーランキングこのカテゴリの人気デイリーQ&Aランキング
-
htmlの文字が縦書きになる
-
テーブルの行を折りたたみたい...
-
ホームページのサイトでhtm...
-
HTMLでクロス抽出したい
-
htmlの<input type=”file”>でア...
-
ホームページを作っていたらhtm...
-
HTML/CSSを使って写真のような...
-
レスポンシブで困っています・・
-
HTML&CSS メディアクエリにつ...
-
スマホ(android)のタッチパネ...
-
css初心者 フレックスボックス...
-
サイトにコンテンツを並べる際...
-
テーブルのセルデータを自動改...
-
HTMLで画像をポップアップで表...
-
プログラムの関連性を教えて下...
-
画像が分割されて切り替わる、...
-
CSSでの文字位置の上下センタリ...
-
スマホでHTMLファイルを開いて...
-
ホームページの制作について教...
-
GoogleSearchControlにホームペ...
マンスリーランキングこのカテゴリの人気マンスリーQ&Aランキング
-
htmlの文字が縦書きになる
-
ホームページのサイトでhtm...
-
テーブルの行を折りたたみたい...
-
ホームページを作っていたらhtm...
-
iPhoneで HTMLファイルを閲覧
-
レスポンシブで困っています・・
-
HTMLでクロス抽出したい
-
HTML/CSSを使って写真のような...
-
ホームページの制作について教...
-
スマホ(android)のタッチパネ...
-
GoogleSearchControlにホームペ...
-
css初心者 フレックスボックス...
-
メモ帳の段落の揃え方
-
静止画画像をクリックすると音...
-
htmlの<input type=”file”>でア...
-
、URL化させるにはどうしたらい...
-
WEBページを強制的に横画面で見...
-
HTMLで画像をポップアップで表...
-
角丸画像の背景色を透明にした...
-
<input>のstep属性に違反する入...
おすすめ情報
ありがとうございます。
html、CSSは理解出来ますけれど、JavaScriptが素人レベルですので
最期の4行の
ボタンクリックのイベントにて~ 以下最後までの書き方が分かりませんです。
ネット検索にてhtmlファイルの</body>タグの直前に<script>~</script>を
書くことまでは分かりましたけれど、どの様に記述して良いのか分かりませんです。