詳しい人求む！

ホームページ上に『位置固定』のリンクを置きたいです

解決済

質問者：risaghon
質問日時：2020/12/01 10:49
回答数：3件

ホームページの右下へと、添付画像のようなリンクのバナー？を置きたいです。
単純に、リンク付き画像をCSSでブラウザ右下へ表示させることは出来ましたけれど、
『閉じるボタン』を追加したくて、その『×印』とリンク付き画像をクリックした際の
アクションの切り分け方や『×印』をクリック時の画像の閉じ方が分からずに困って
おります。
具体的なアドバイスを頂けますかたお願いします。

ありがとうございます。

html、CSSは理解出来ますけれど、JavaScriptが素人レベルですので
最期の4行の
ボタンクリックのイベントにて～　以下最後までの書き方が分かりませんです。

ネット検索にてhtmlファイルの</body>タグの直前に<script>～</script>を
書くことまでは分かりましたけれど、どの様に記述して良いのか分かりませんです。

No.1の回答に寄せられた補足コメントです。補足日時：2020/12/01 13:50
通報する

通報する

この質問への回答は締め切られました。

質問の本文を隠す

回答 (3件)

ベストアンサー優先
最新から表示
回答順に表示

No.3ベストアンサー

回答者： Ogre7077
回答日時：2020/12/02 11:10

イメージマップは一つの画像内でリンクを区別する場合に使うものなので、リンク毎に画像が分かれているなら、単純にそれぞれに <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>

- 0
- 件

通報する

この回答へのお礼

ありがとうございます。
質問させて頂きましたあとも引き続きネット検索をしながら、
閉じるボタンのはみ出しはやめて、以下のような感じで
ネットのコピペを若干修正して実現出来ました。

【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>

通報する

お礼日時：2020/12/02 13:16

参考程度に

No.2

回答者： fujillin
回答日時：2020/12/01 14:15

こんにちは

＞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>

- 0
- 件

通報する

この回答へのお礼

ありがとうございます。
皆さんのご回答のおかげで解決出来ました。

通報する

お礼日時：2020/12/02 13:17

No.1

回答者： Ogre7077
回答日時：2020/12/01 11:37

バナー全体を囲むブロック要素にクラス名を付ける

例) <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);

- 0
- 件

通報する

この回答へのお礼

ありがとうございます。
今、イメージマップで
<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>
という具合には出来ましたけれど、閉じるマークがスマートではありませんので
ご回答戴きました記述へと変換していますところですが、上手くいきません…
閉じるマークと下絵の記述順序・コツなどありますでしょうか？