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

質問

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

［html］

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

［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.html

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

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

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

回答No.4

ORUKA1951 · ベストアンサー

必ず次のように書きます。
<a></a>の間に適切な文字列を入れなければなりません。

HTML
<div id ="image1">
<a href="​[URL]"><span>・・・へリンク</span></a>
<!-- と必ず適切な文字列を入れなければなりません -->
<!-- 【anotherHTMLlintに指摘される以前の問題だよ】-->​
</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も判断できない。

お礼

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

回答No.3

zeff

「"画像のみ" ロールオーバー」
で検索したらこんなの見つけました。

スタイルシートによるロールオーバーのデザイン
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><!-- image1 end -->

お礼

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

回答No.2

edomin7777

＃１です。

たぶん、＃１のやり方だと減点はされないけど
「<a> と </a> の間に空白文字しか含まれていません。」→解説52

となりそうです。ｗ

お礼

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

回答No.1

edomin7777

１つの案として…、
・全角スペースを１個入れる。

じゃ、だめ？