【レスポンシブ】imgタグのalt属性をjQueryでテキストとして出力する|Blog|株式会社トライム

Keyword

Contact

についての不明点や案件のご相談などございましたらお気軽にお問い合わせください。

Share

X Facebook pocket LINE はてなブックマーク

【レスポンシブ】imgタグのalt属性をjQueryでテキストとして出力する

2016.09.29

見出しなどのテキストを画像で作成することがよくあるのですが、
レスポンシブでスマホ閲覧時はテキストにしたかったので、
JSでalt属性をテキストとして出力させることで対応しました。

サンプルソース

HTML

例えばH2を画像で作ったとします。
クラスにaltTextを指定してください。

<h2 class="altText"><img src="https://try-m.co.jp/wp-content/uploads/2016/09/150x150.png" alt="ALTテキスト"></h2>

CSS

PCとSPの出し分けのためのクラスを作ります。
.pcはPC閲覧時のみ、.spはSP閲覧時のみ表示されます。

.sp {
  display: none;
}
@media screen and (max-width: 768px) {
  .pc {
    display: none;
  }
  .sp {
    display: block;
  }
}

JS

altTextのクラスを指定した要素にイベントが発生します。

$(function(){

  $('.altText').each(function(){

    alt = $(this).find('img').addClass('pc').attr('alt');
    $(this).prepend('<span class="sp">' + alt + '</span>');

  }); 

});

imgには自動的に.pcが付与されるのでSP閲覧時は非表示になります。

動作デモ

ウィンドウサイズを変更して試してみてください。

Share

X Facebook pocket LINE はてなブックマーク
Webサイト制作についてお悩みでしたら私たちにご相談ください。

私たちはECサイトなどのBtoCのサイトの制作に特化したWeb制作会社です。マーケティング視点をもったクリエイティブにより、運用まで見据えた効果の高いWebサイトを構築いたします。Webサイトについてお悩みのWeb担当者の方は、トライムまでお気軽にご相談ください。

Keyword

Contact

についての不明点や案件のご相談などございましたらお気軽にお問い合わせください。

Contact

お問い合わせ

トライムは常にお客様へ寄りっ沿った提案をさせていただきます。
自社のEC売上の拡大や人材不足などのお客様のデジタル上の課題を、
様々なアプローチにより解決するお手伝いをいたします!
お気軽にお問い合わせください。

TEL

03-6403-3259

受付:10:00 - 19:00