PCサイトをドラッグ&ドロップでスマホ対応!

  • ログイン
  • ユーザ登録

【shutto小技】一括で画像のalt属性をテキストに置換えるJavaScript

2013年5月30日 | 森下 奈緒

シェアする

このページに記載されている「CSS」「JavaScript」等は、あくまでも記述例となっております。ご利用するPCサイトによって変更しないといけない場合があります。
そのため、このまま使用しサイトに異常が出た場合は、サポートは対象外となりますので、予めご了承の上ご利用いただけますようお願いいたします。

平素より、shuttoをご利用いただき、ありがとうございます。
shutto小技 Topicsは長いかな…と思いましたので、shutto小技に変更してみました。

今回は、shutto変換時に使用すると便利な追加JavaScriptをご紹介いたします。

■一括で画像のalt属性をテキストに置換えるJavaScript

shuttoには、画像のalt属性をテキスト表示する機能がございますが、画像を個別にドラッグ&ドロップをして設定する必要があり、divやtableなどの大きい要素でドラッグ&ドロップし変換を行いたい時に、使用できない場合があるかと思います。

そんな時は、JavaScript追加機能を使用し、要素の中の画像を一括でテキストに置換えることができます。

1.「変換完了時に実行されるコード」に下記コードを追加する

(function($) {
 $('.imgToAlt img[alt]').each(function(i, image) {
   $(image).replaceWith(document.createTextNode(image.alt));
 });

})(Zepto);

2.alt属性をテキスト表示させたい要素の「編集メニュー > HTML属性 > class」に「imgToAlt」を追加する

3.保存して、プレビューで確認します。
※編集画面上では、画像のままですが、変換後にJSが実行されますのでプレビュー画面及び本番環境ではテキストで表示されます

■設定見本
http://shutto.com/view/w8IfumD

■応用編 input type=”image” の画像をvalueのテキストに置換えるJavaScript

(function($) {
 $('.imgToAlt input[type="image"]').each(function(i, image) {
   $(image).attr('type', 'submit');
 });
})(Zepto);

「一括で画像のalt属性をテキストに置換える」の1.に書くコードを上記に変更するとサブミットボタンの画像をvalueの文字列に変更することができます。

★補足★

shuttoでは、jQueryの代替ライブラリZeptoを使用することができます。

・Zeptoとは?
jQueryと互換性があり、jQueryで使用されている多くのAPIを使用することができます。
一部、使用できないAPIもございますので、詳しくはZeptoの公式サイトをご参照ください。

Zeptoを使用する際は、下記のように囲ってご使用ください。

(function($) {

// この中に処理を書く

})(Zepto);
スマホ向け表示
株式会社イー・エージェンシー

〒100-0006 東京都千代田区有楽町1−9−4 蚕糸会館4階