- 締切済み
ホームページ作成について質問です
ホームページ制作について質問です。 http://siterepair.ddo.jp/ のグローバルナビゲーションのように、ソース上ではテキストだが、ブラウザ上では画像アイコンのボタンにする方法が知りたいです。 私のホームページのグローバルナビゲーションのソースです ※html <div id=mainImage> <ul> <li><a href="A"><img src="../images/gnavi01.png" alt="あいうえお" width="100" height="25" /></a></li> <li><a href="B">"><img src="../images/gnavi02.png" alt="かきくけこ" width="100"height="25" /></a></li> <li><a href="C">"><img src="../images/gnavi03.png" alt="さしすせそ"width="100"height="25" /></a></li> </ul> </div> ※css #mainImage{ height: 250px; width: 900px; margin-right: auto; margin-left: auto; background-image: url(../images/header.png); background-repeat: no-repeat; padding-top: 1px; } #mainImage ul { margin-left: 362px; margin-top: 233px; } #mainImage li { float: left; } 試しに、 <a herf="A" class="home">として、 .home { display: none background-image: url(../images/gnavi01.png); } のように設定したら、gnavi01.pngも一緒に消えてしまいmainImageの背景に設定した画像が表示されているだけになってしまいます。 http://siterepair.ddo.jp/ のグローバルナビゲーションのように、 <ul id="globalmenu" class="clearfix"> <li><a class="home" href="./">SEO無料</a></li> <li><a class="seoexamine" href="seoexamine/">SEO診断ツール</a></li> <li><a class="seotools" href="seotools/">SEO対策サービス</a></li> <li><a class="seoplan" href="fixedseo/">SEOプラン</a></li> <li><a class="seminar" href="seminar/">SEO対策セミナー</a></li> <li><a class="faq" href="faq/">よくある質問</a></li> <li><a class="inquiry" href="inquiry/">お問い合わせ</a></li> </ul> alt属性による説明文ではなく、テキストでの入力をしたいのですが、無知なもので色々調べましたが出来ません。 ご教授頂けるよう宜しくお願いします。（dreamweaver cs4を使って作成しています） .
- mdetective
- お礼率0% (0/3)
- HTML
- 回答数2
- ありがとう数4
- みんなの回答 （2）
- 専門家の回答
みんなの回答
- neko-ten
- ベストアンサー率55% (1287/2335)
本質的に#1さんの回答と一緒ではありますが・・・ 基本的な考えはmdetectiveさんがなさっていることとあまりかわりないです。 ただ、参考サイトとmdetectiveさんの違いは、 ・参考サイト→背景画像が、実際に表示したい画像 ・mdetectiveさん→実際に表示したい画像は、imgタグで貼付け となってます。 まず、a要素のスタイルでdisplayをblockにします。 その後、widthとheight、floatを設定します。 こうすることでa要素が幅と高さがあるブロックとなります。 このままだと、入力文字が表示されるのでtext-indentを-9999等に設定して、画面外に表示します。 表示している画像は、それぞれのa要素にclassを指定し、背景として設定します。 Ex) <style> .SampleCode a{ display:block; width:200px; height:100px; text-indent:-9999px; float:left; } .SampleCode .link1{ background-image:url("./foo/bar1.jpg") no-repeat center center; } .SampleCode .link1{ background-image:url("./foo/bar2.jpg") no-repeat center center; } </style> <body> <div class="SampleCode"> <a class="linl1">テスト1</a> <a class="linl2">テスト2</a> </div> </body> マウスオーバー等をしたい場合、a:hover等で実装します。
- mtaka2
- ベストアンサー率73% (867/1179)
簡単な方法としては、スタイルシートで、 .home { text-indent: -9999px; background-image: url(../images/gnavi01.png); } とかすれば、テキストをなくして画像だけを表示できます。 そのほか、各種方法とそのメリットデメリットは、 http://kikky.net/pc/css_ir1.html の説明なかがわかりやすいかと思います。
