IMGタグをjavascriptでテキストリンクに変更したい

前提

ブログサイトをガラケーで閲覧する必要があるのですが、
記事の中に画像が多く容量オーバーしてしまいます。
そこで画像を全てテキストリンクに置換したいと考えています。
置換したいのは「entry」というIDでくくった内の画像全てです。

実現したいこと

<img src="○○○.jpg" alt="□□□" /> というタグがあった場合、 <a href="○○○.jpg">□□□</a> としたいです。

試したこと

<script type="text/javascript">
<!--
$(function(){
	$('#entry img').each(function(e) {
      var url = $(this).attr('src');
      var alt = $(this).attr('alt');
      }
    });
});
-->
</script>

上記で画像のリンクと表示したいテキストは取得できるのかと思いますが、
その後どうすればIMGタグをテキストリンクに変えられるのか見当がつかなくなってしまいました。

ご教授いただけましたら幸いです。よろしくお願い致します。

m.ts10806

2018/09/18 05:51 編集

JavaScriptは基本的にHTMLを全て読み込んでから動作するので画像を全て読み込んでからimgタグ→aタグへの変換を行うことになります。つまり、後から変換することになり、結局全て画像も読み込むのでこの対応はあまり意味がないように思います。HTMLを最初から全てリンクにしておくことはできないのでしょうか？

m.ts10806

2018/09/18 05:52

例え初期値display:noneにしていても結局読み込みはするので、これもあまり意味がなかったりします。

leny

2018/09/18 05:56

mts10806様、ありがとうございます。説明不足でしたが、スマホやPCからの閲覧の際には普通に表示させ、ガラケーの時だけリンクにしたいのです。（ガラケーの振り分けは出来ています。）同一ソースを利用するので上記方法が良いかと思っての事ですが、もし他に解決策があればご提案いただけますでしょうか。

x_x

2018/09/18 06:40

機種は何でしょうか？

行動規範の内容に同意します

回答3件

ブログサイトをガラケーで閲覧する必要があるのですが、

本当ですか？
もしそうであれば質問文に書いてあるやりたい事は見積もりが甘すぎると言わざるをえません。

docomo: https://www.nttdocomo.co.jp/service/developer/make/content/browser/html/
au: EZwebの技術仕様に関して公式サイトがなくなっていた…
SoftBank: http://creation.mb.softbank.jp/mc/tech/tech_web/web_index.html

auとSoftBankのガラケーは比較的早くからフルブラウザに対応していましたし、
3Gモードもi-modeより使える技術が多かったりおおらかだった印象がありますね。
ガラケー対応をする必要があるのであれば、最も成約が強いdocomoのi-modeが基準になるでしょう。

では、(今では考えられない非常識な)成約について触れていきます

HTML4.01までしか対応してない
文字コードはShift-JISにしか対応していない
外部CSSに対応してない、そもそも機種やバージョン次第ではCSSは一切動作しない
JSも動かない、動く機種もあるがJSはブラウザによって実装がまちまちなので正しく動作する保証もない
強力なファイルサイズ制限がある

いかんせん古い仕様ですからね…

全ての項目が大問題です。
もうi-modeはオワコンなので、世の多くのサイトは1項目たりとも守れてないサイトだらけでしょう。
もちろん質問者さんのサイトもこの制約を1項目たりとも守れていないのではないでしょうか？

本当にガラケー対応する必要があるのなら、下記の仕様のHTMLを別途生成して送信するしか対応策はありません。

HTMLを4.01+Shift-JISで書き直す
CSSやJSは一切使わないほうがよい
凝ったデザインは全て諦める、fontやbタグなんかを使って頑張る
ファイルサイズ的な制約で半角カナも視野
上記の全てが根本的に一般的なWebサイトと相容れないのでUserAgentで検知して出し分けるべき
労力的には同じサイトをまるっとそのままもう一個作る程の稼働が必要で、人月や見積もりは倍額請求するべき

まぁ、別途PHPやNode.jsなんかでスクリプトを作って、
機械的にHTML4.01仕様に変更、Shift-JISに文字コードを変更、画像はAlt要素のテキストに変換してしまう等の処理を加えて、別途吐き出しておくみたいな妥協案は取れるかもしれません。
その辺は質問者さんのチームやプロジェクトメンバー等と相談して決定してみてください。

投稿2018/09/18 06:23

編集2018/09/18 07:11