imgタグの記述方法について、ご質問をさせて頂きたいのでよろしくお願い

解決済

質問者：pcckit
質問日時：2010/01/23 18:43
回答数：4件

imgタグの記述方法について、ご質問をさせて頂きたいのでよろしくお願いいたします。
画像のロールオーバー効果を作りたく以下の記述をしました。

［html］

<div id ="image1">
<a href="http://page.htm"></a>
</div>

［css］

#image1 a{
display:block;
width:107px;
background:url(img/3.gif) no-repeat;
height:48px;
line-height:48px;
text-decoration:none;
text-align:center;
float:left;
}

#image1 a:hover{
background:url(img/33.gif) no-repeat;
}

上記の記述を以下のhtmlチエッカーに掛けた所、以下のエラーが出ました。

http://htmllint.itc.keio.ac.jp/htmllint/htmllint …

line 460: <a> と </a> の間が空です。 → 解説 51

どうやら<a>と</a>の間に画像に表示をする、テキストを入れるということのようですが、私が今回使用している画像は既に文字の入っているもので、<a>と</a>間に何らかのテキストを入れてしまうと、文字が画像上で二重書き見たくなってしまいます。

このような場合は、どのような対処方法が御座いますでしょうか？
どなた様か、ご指導のほどよろしくお願いいたします。

通報する

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

質問の本文を隠す

回答 (4件)

ベストアンサー優先
最新から表示
回答順に表示

No.4ベストアンサー

回答者： ORUKA1951
回答日時：2010/01/23 21:33

必ず次のように書きます。

<a></a>の間に適切な文字列を入れなければなりません。

HTML
<div id ="image1">
<a href="[URL]"><span>・・・へリンク</span></a>


</div>

CSS
#image1{
width:
height:
****
}
#img a{
width:100%
height:100%;
}
#imge1 a span{
visibility:hidden; /* dispkay:none;ではない*/
/* display:none;では存在自体が消えてしまう。表示を隠すならvisibility:hidden; */
}
/* 以下はこの順番 */
#imge1 a:link,#imge1 a:visited{
}
#imge1 a::focus,#imge1 a:hover{
}
#imge1 a::active{
}

そうしないと、CSSを読めない、あるいは無効にしている訪問者にはリンクがわかりませんし、SEも判断できない。

- 0
- 件

通報する

この回答へのお礼

この度は、適切なご指導を頂きましてありがとう御座いました。
また、ご縁がありましたときはよろしくお願いいたします。

通報する

お礼日時：2010/01/24 08:08

No.3

回答者： zeff#1
回答日時：2010/01/23 20:03

「"画像のみ" ロールオーバー」

で検索したらこんなの見つけました。

スタイルシートによるロールオーバーのデザイン
http://www.geocities.jp/m_yanma/de/ro3.html

CSSに追加：
#image1 a span {
display:none;
}

HTML書き換え：
<div id ="image1">
<a href="http://page.htm"><span>文字</span></a>
</div>