<a>タグを使わずに画像リンクをつけたい

Question

###前提・実現したいこと
htmlで画像リンクをつけたいのですが<a>タグを使わずに実現したいです。
理由としては、<a>を使うとレイアウトがずれてしまう現象が発生してしまい修正ができないため。

###補足情報
以前調べたときはonclick属性を使うパターンやその他の方法も見かけた気がしたのですが、今回どうにもみつかりませんでしたので質問させていただきます。

Comments

[showkit]

<a>を使うとレイアウトがずれてしまう というのがイメージできないんですが、具体例をあげてもらえますか？

[futaba2110]

<a href="リンクurl"><img src="画像リンク"></a>の画像リンクとしては一般的なコードを使っております。現在他人のサイトを変種しているのですが、既存の画像にリンクを付与したらレイアウトがずれてしまう（左に大きくズレる）現象が起きております。

[kei344]

書かれている状況が再現するコード（HTML/CSS/JavaScriptなど）か、再現するURLを提示されたほうが回答を得やすいと思います。

[futaba2110]

```
<div class="banner-badge">
<img src="assets/images/discount-this-year.png" alt="badge">
<a href="#schedule" style="border: 0;">
<img class="badge2" src="assets/images/5.png" alt="badge">
</a>
</div>
```

です。URLは現在ローカル環境で開発しているため提示できるものがありません。Styleにはshowkitさんの回答参考にborder:0;で指定しています。

[kei344]

a要素の外側のHTML構造とそれに関係するCSSを質問文にコードブロックで追記してください。コードブロックは ```（バッククオート3つ）で囲み、前後に改行をいれるか、コードを選択して「<code>」ボタンを押すとコードブロックになります。

Answer 1

a タグに変なスタイルがついているんでしょう。
それを確認して上書きするのがすっきりしていいと思います。

どの要素にどのCSSが適用されているの？ブラウザ上でカンタンに確認する方法

Comments

[futaba2110]

ご回答ありがとうございます。
それも疑い、検証で各スタイル1つずつ無効にしてみたのですが、特に改善が見られるStyleはありませんでした。

Answer 2

たとえばこのようなスタイルが適用されていた場合

.banner-badge > img {
  display: block;
  margin-right: auto;
  margin-left: auto;
}

aだけ見ていてもわからないのではないですか？
再現するコードを提示するか、ちゃんと比較しましょう。

Answer 3

リンクや画像にまで影響するかは未検証ですが、chromeのoutlineとかは影響してませんか？

• [Google Chrome] input要素以外でも線(アウトライン)が表示される問題

※Chrome以外でも再現するようでしたら無視してください

あとはコメントで書かれているHTMLに合間合間に半角スペースが入っているのが気になります。（[ｺｺ]部分）
<div class="banner-badge">[ｺｺ]<img src="assets/images/discount-this-year.png" alt="badge">[ｺｺ]<a href="#schedule" style="border: 0;">[ｺｺ]<img class="badge2" src="assets/images/5.png" alt="badge">[ｺｺ]</a>[ｺｺ]</div>
実際にもスペースが入っているのであれば削除し、何かしら余白が必要であれば、paddingで調整してみてください。
HTMLだけではこちらも再現ができませんので関係するCSSもご提示いただけると助かります（追記はコメントではなく質問編集をして質問本文に添付してください）

Answer 4

適当なdata-*をつけてやればよいでしょう
たとえばdata-href属性をもつものだけリンクのように動くサンプルです

img[data-href]:hover{cursor:pointer;}

window.addEventListener('DOMContentLoaded', function(e){
  Array.prototype.forEach.call(document.querySelectorAll('img[data-href]'),function(x){
    x.addEventListener('click',function(){
      location.href=x.getAttribute('data-href');
    });
  });
});

<img src="1.jpg" data-href="1.html">
<img src="2.jpg" data-href="2.html">
<img src="3.jpg">

Answer 5

他の回答にもありますが、デフォルトのスタイルや何らかのスタイルが原因だと思いますので、リセットの見直しや、上書きを掛けたら良いだけの気がします。

コードやスクリーンショットの提示があれば、より良い回答を得れると思います。

Answer 6

map/area要素でimg要素を含むDOMツリーの構造に手を入れずリンクを注入したら如何でしょう？

<img src="test.png" usemap="#m"/><!--map要素への参照を追加-->

<!--追加する部分-->
<map id="m">
<area shape="rect" coords="0,0 200,200" href="test.png"/>
</map>

a要素の挿入と異なり, 既存のスタイル指定への影響が最小限で済むと思います.

Answer 7

ずれるというのは、画像を <a> でリンクさせると border がついてしまうからではないでしょうか？
css なり style= なりで、border のサイズを 0 にするといいのでは？

Onclick をつかうのであれば

<img src="画像リンク" onclick="location.href='URL'"> 

でどうぞ

Comments

[futaba2110]

Onclickの方ご教授ありがとうございます。
style="border:0;"試して見ましたが、こちらは特に変化無しのようです。