テキストを画像に置換する方法
htmlソース
|
1 |
<li class="text_indent"><a href="#">価格帯から選ぶ</a></li> |
CSS記述例
|
1 2 3 4 5 6 7 |
.text_indent a｛ url:("指定する画像のＵＲＬ") no-repeat left top; /* ←画像のURLとリピートしない、画像の位置は左の上 */ width:180px; /*←画像の横幅180px*/ height:44px; /*←画像の縦幅44px*/ display:block; /*←img要素はインライン要素なので、blockと書くことでブロック要素にすることができる。 text-indent:-9999px; /*←テキストの段落を下げる */ ｝ |
この記述方法で、htmlの記述変更ができない場合にテキストの文字は見えないようにし、
画像をクリックすれば、リンク先に飛ぶことでできます。
参考サイト：http://html-coding.co.jp/knowhow/tips/rollover/
参考サイト：http://delaymania.com/201209/web/textindent-9999/
この記事を見た人は次の記事も見ています。
jQuery: slideMenu
WP:任意のページ名で投稿一覧を作成
borderのグラデーション
CSSのみで作るドロップダウンメニュー
投稿記事に連番を振る
【FW】トリミング方法- イメージマッピング（クリティカルマッピング）
第四十二回「.htmlとhtmの違いと使い分けと注意点」
一般公開前のお作法～チェック- WP:カスタムタクソノミーごとの投稿とタームの一覧表示
jQueryで高さの取得
任意の数ごとに要素で囲い込む方法
漢字にふりがな(ルビ)をつける
HTML,CSSがブラウザのどのバージョンに対応しているか確認するWEBサービス
bxslider 両サイドに前後の画像を表示させる方法
第四十七回「SlickNavを使って、Gnaviをレスポンシブ化する方法」
文字組みの基本- 印刷用レイアウト CSS Media
- 固定ページのパーマリンクを投稿名.htmlにする
border の幅分ボックスからはみ出たときの対処
コメント