和田憲幸のブログ

前回お届けした画像をロールオーバーさせたり基点表示させるやつはimgのsrcを使っていましたが、今回のはもっとスゴいぞ！aタグのbackgroundをidからurlを指定して、ロールオーバー or 基点表示でbackground-positionをアレしてます。古典的なCSSテクニックですねa:hoverみたいな。

CSSチックにナビゲータの基点表示 with jquery

ただすこし違うのはいちいち面倒なスタイルを指定しなくてもよいということ！私は昔から常々思っていたのですよ。aをIR（Image Replace）するのはいい。だが、メニュー毎にスタイルを追加するその美しくないところがキライ！！という無駄ポリシーを持っていたわけです。じゃぁJavascriptでオートメーションにしてやろうじゃないの！というのが今回の趣旨。

もちろんHTMLのソースコード上にはaタグのみ。classとidを指定するだけさっ！美しくないっ！？本当は１枚絵を使ってやろうと思ったわけですが、それだと横並びの場合はOKですが縦並びの場合に対処できなさそうだったのでやめますた。

何はともあれこれでHTMLソースがもっとキレイになるっ！あの子のアソコよりも全然キレイ！理解しやすいっ！エロい！和田仕様版なのでjsやCSS初心者には？マークがたくさん頭の上に出るかもしれませんが、IRの基礎理解がある方にはとっつきやすいかもしれませんね。

IR（Image Replace）画像置換とは

画像置換という言葉が一般的かどうかは別としてWeb Designingで使ってたのでこの言葉で説明しますね。画像で文章を表現する機会は多いと思いますが、その際はaltで文章を残さねばなりません。でもaltは弱いし本来imgタグの使い方からははみ出してるわけです画像での文章表現はね。そのためIRという技があるわけです。具体的にどういうものかっつーとタグの背景に画像を指定してタグの中身にしっかり文章を残すというアレですね。text-indentで実際の文章を隠す手法が一般的です。こうしておくとCSSを切っても非常に美しい状態を保てるばかりか、素人にありがちなHTML内がimgタグだらけという悲惨な自体を回避することができるというアレです。