CSSで特定の画像をテキストに置き換え。

質問

初めまして、今ブログのcssを編集(？)しています。このブログは他のブログと同じで、htmlは操作できません。

私の使っているブログは、『コメントする』や『次の記事へ』のリンクがテキストリンクではなく、アイコンでのリンクになっています。そのアイコン自体については、自分で別のアイコンをアップロードして置き換える事に何の規制もありませんが、ブログの内容から、個人的にテキストリンクにしたいのです。

テキストリンクに変更したいアイコン:
<img alt="Previous" title="Previous" src="http://***.gif" border="0" height="20" width="22">

セレクタは、
.クラス名 img[src="***.gif"]　　←これで良いみたいです。

置き換えるテキストは、<img...>内のalt(Previous)かtitle(Previous)のテキストにしたいと思っています。

――こんな事、出来るのでしょうか？

回答No.2

steel_gray · ベストアンサー

内容の生成といえば content がありますが、imgそのものを消そうとすれば一緒に消えてしまうようです。
リンクということなのでアンカーにテキストを追加、画像を非表示にする事は可能です。

例）
<a href="url1" title="Previous"><img src="url2"></a>
が、あるとして、スタイルは、
a[href="url1"]:before{content:attr(title);}
img[src="url2"]{display:none;}

ただし、IEは7でもcontentに対応していません。このままでは単にリンクが消えてしまいますのでハックやIEのConditional Commentsを使って対処する必要があります。

contentについて
http://www6.plala.or.jp/go_west/nextcss/ref/prp/b_n_a/content.htm
Conditional Commentについて
http://www.keynavi.net/ja/bugh/comments.html

お礼

色々詳しく教えていただいたのに、こんなにお礼が遅れて知って申し訳ありませんでした。

結果から言いますと、今回は文字を画像としてアップロードし直す方法をとったのですが、教えていただいた方法は、とても参考になりました。また同じような機会があれば、ぜひ試してみたいと思います。

本当にありがとうございました。
そして、お礼が遅れてしまって、本当に申し訳ありませんでした。

回答No.1

Seravy

そもそもimgタグは画像を表示する物だから、文字を表示させるには無理があります。

JavaScriptを組み込む余地があればなんとかなるかも知れませんが、さすがに無理だと思います。
現実的な案として、文字を画像にして置き換えるとするしかないと思われます。

お礼

すみません、ちょっと体調を崩して入院してしまい、お返事が送れてしまいました。

結果から言いますと、やはり本にも色々と付随して無理だと言うことになりましたので、仰られた通り、文字を画像にして置き換えることにしました。
お手数をお掛けした上に遅い御礼になってしまいまして、本当に申し訳ありませんでした。
そして、ありがとうございました。