ホームページ作成について質問です

締切済

質問者：mdetective
質問日時：2010/01/12 07:44
回答数：2件

ホームページ制作について質問です。
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を使って作成しています）

.

通報する

この質問への回答は締め切られました。

質問の本文を隠す

回答 (2件)

最新から表示
回答順に表示

No.2

回答者： neko-ten
回答日時：2010/01/12 11:43

本質的に#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等で実装します。

- 0
- 件

通報する

No.1

回答者： mtaka2
回答日時：2010/01/12 10:46

簡単な方法としては、スタイルシートで、

.home {
text-indent: -9999px;
background-image: url(../images/gnavi01.png);
}

とかすれば、テキストをなくして画像だけを表示できます。
そのほか、各種方法とそのメリットデメリットは、
http://kikky.net/pc/css_ir1.html
の説明なかがわかりやすいかと思います。