Page 992 ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ 通常モードに戻る ┃ INDEX ┃ ≪前へ │ 次へ≫ ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ ▼CSSでテキストを画像に置き換える方法について きんたろう 05/4/11(月) 17:58 ┗Re:CSSでテキストを画像に置き換える方法について カヅサツ 05/4/11(月) 18:12 ┗Re:CSSでテキストを画像に置き換える方法について きんたろう 05/4/11(月) 18:34 ┣Re:CSSでテキストを画像に置き換える方法について Pid 05/4/12(火) 1:32 ┃ ┗Re:CSSでテキストを画像に置き換える方法について naka@sukiero 05/4/12(火) 3:16 ┃ ┗Re:CSSでテキストを画像に置き換える方法について Pid 05/4/12(火) 11:54 ┗Re:CSSでテキストを画像に置き換える方法について Pid 05/4/12(火) 17:23 ─────────────────────────────────────── ■題名 : CSSでテキストを画像に置き換える方法について ■名前 : きんたろう ■日付 : 05/4/11(月) 17:58 -------------------------------------------------------------------------
winXP,IE6.0 こんにちは。XHTML+CSSで初めてデザインをしようと思ってます。 ざまざまなサイトを見て調べて、 XHTML上でテキストを書いて、それをCSSで画像に置き換えようと 思っているのですが、うまくできません。 現在のコードは HTMLが <ul> <li id="m_btn_bar"><img src="images/navi_03.jpg" width="12" height="17" /></li> <li id="m_btn001"><a href="#" title="コンセプト"><span>コンセプト</span></a></li> <li id="m_btn_bar"><img src="images/navi_03.jpg" width="12" height="17" /></li> </ul> CSSが ul{ list-style:none; } ul li { display:inline; } ul li a span { display:none; } #m_btn001 a { background:url(../images/navi_btn_01.jpg) no-repeat; width:79px; height:17px; } となっています。 display:none;でテキストのみを消すことができると書いてあったのですが、 上記コードだとテキストと背景画像両方消えてしまいます。 情報不足の場合、指摘していただきながら教えて頂ければと思います。 よろしくお願いします。 |
> display:none;でテキストのみを消すことができると書いてあったのですが、 違います。display:none; は指定された要素そのものを表示しません。 よって、a要素が空となってしまい、背景画像も表示されないという案配です。 <ul> <li id="m_btn001"><a href="#"><img src="../images/navi_btn_01.jpg" alt="コンセプト" width="79" height="17"></a></li> </ul> では駄目なのでしょうか。画像が表示されない環境では、alt属性値が展開されます。 |
カヅサツさん こんにちは。早速の回答ありがとうございます。 >違います。display:none; は指定された要素そのものを表示しません。 >よって、a要素が空となってしまい、背景画像も表示されないという案配です。 なるほど。 ><ul> ><li id="m_btn001"><a href="#"><img src="../images/navi_btn_01.jpg" alt="コンセプト" >width="79" height="17"></a></li> ></ul> このやり方も考えましが、参考にしているサイトで 始めに書いたような、テキストを画像に置き換えているやり方をしていたので それでやってみたいと思って質問させていただきました。 自分でもやりながらまたアドバイスを待ちたいと思います。 |
▼きんたろうさん: >><ul> >><li id="m_btn001"><a href="#"><img src="../images/navi_btn_01.jpg" alt="コンセプト" >>width="79" height="17"></a></li> >></ul> >このやり方も考えましが、 『テキストを画像に置き換えているやり方』であれば,まさにこれですよ(object 要素は IE では使い物にならないし)。それにどの道,img 要素の alt 属性は文法的に必須(無ければ文法エラー)です。 何をおやりになりたいのかイマイチ分からないので,もう少し詳しく説明して頂けますか。もしくは『参考にしているサイト』はどこか教えて下さい。 それから,一つのページ内で同じ id 属性値を何度も使うことはできません。http://www.kanzaki.com/docs/htminfo.html で XHTML の文法や精神を学んでおくと良いと思います。 |
>もしくは『参考にしているサイト』はどこか教えて下さい。 こちらかも? http://hpb.cool.ne.jp/wforum/wforum.cgi?mode=allread&no=5339&page=0 |
ほほぅ,参考になりますた。 質問者さんはまず以下を熟読しませう。 http://www.shoshinsha.com/pukiwiki/pukiwiki.php?%A5%AF%A5%ED%A5%B9%A5%DD%A5%B9%A5%C8%A1%A2%A5%DE%A5%EB%A5%C1%A5%DD%A5%B9%A5%C8 * * * おまけ。ページ内の全ての <a href="URI">TEXT</a> を <img src="URI" alt="TEXT" /> に 変換してみるブックマークレット。たぶん IE だと動きません(IE のバグ)。 javascript: (function(i) { while (i = this.length) this[--i].parentNode.replaceChild((function(anc) { this.setAttribute('src', anc.href); this.setAttribute('alt', anc.firstChild.data); return this; } ).call(document.createElement('img'), this[i]), this[i]); } ).call(document.getElementsByTagName('a')); ※こう書けばたぶん IE でも動きます。書き方の好みの問題 (^^;)。 javascript: (function() { var i, nodes = document.getElementsByTagName('a'); while (i = nodes.length) { var node = document.createElement('img'); node.setAttribute('src', nodes[i - 1].href); node.setAttribute('alt', nodes[i - 1].firstChild.data); nodes[i - 1].parentNode.replaceChild(node, nodes[i - 1]); } } )(); |
ひょっとして #m_btn001 a { display: block; width:79px; height:17px; background: url("../images/navi_btn_01.jpg") no-repeat; } #m_btn001 span { visibility: hidden; } のようにしたいのだろうかとふとオモタ。 なお,非置換インライン要素である a 要素にそのまま width/height 指定しても意味が無いので注意(→ http://www.mozilla.gr.jp/standards/webtips/webtips0030.html)。 |