メニューをjqueryで簡単にロールオーバー２
今回は比較的設置難度が高めの和田仕様版のロールオーバー＆基点表示でごわす。
前回お届けした画像をロールオーバーさせたり基点表示させるやつはimgのsrcを使っていましたが、今回のはもっとスゴいぞ！aタグのbackgroundをidからurlを指定して、ロールオーバー or 基点表示でbackground-positionをアレしてます。古典的なCSSテクニックですねa:hoverみたいな。
ただすこし違うのはいちいち面倒なスタイルを指定しなくてもよいということ！私は昔から常々思っていたのですよ。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タグだらけという悲惨な自体を回避することができるというアレです。
和田憲幸の広告
- BTOパソコン
- www.pc-take.com自作PCやBTOパソコンの事ならシューマイが美味しい神奈川県は横浜のPC-takeにお任せください。
- 事業再生のSTP
- www.s-tp.jp経営が苦しい、そんなときはSTPに経営相談や経営コンサルティングをご依頼ください。
- ドライフラワー卸売り
- www.coretrading.co.jpドライフラワーやプリザーブドフラワーの業務用卸売りならコアトレーディング。
- 通話録音装置 ネイクス
- www.neix.co.jp通話録音装置や通話録音システムのことならネイクス。
- インプラント 東淀川区上新庄
- www.higashi.ne.jp東淀川区上新庄でインプラントや矯正歯科ならひがし歯科で決まり！
- 吉野川 ラフティング
- www.safari-g.com四国は吉野川でラフティングやハイドロスピード、キャニオニングと言えばサファリだよね。
- ホームページ制作 アルバイト
- next-level.bizホームページ制作、Webデザイナーのアルバイト、SOHOのことはネクストレベルまでご相談ください。
- 札幌 美容室 アイウィル
- www.aiwill.jp札幌市中央区で美容師をお探しの際はアイウィルまでお越しください。
- WEBLOGS6.1.0
- www.synck.jpこのブログはシンクテクニカのウェブログでつくられています
- 札幌 ホームページ制作
- www.synck.com札幌でホームページ制作やWebアプリケーション制作ならシンクグラフィカへ。
- iPhoneで内線電話
- www.smartgate.biziPhoneやAndroidから内線電話が無料でかけれる。
- 新潟リフォーム
- www.neohouse.jp新潟で注文住宅とリフォームはネオハウス。
