3

ヘッダーに大きな円形のロゴがあるサイトに取り組んでいます。ロゴは、次のように設定されたアンカー タグです。

<a id="siteLogo" href="#" shape="circle" coords="157,155,147"><i>Site Logo</i></a>

関連する CSS は次のとおりです。

i { 
   visibility: hidden; }
#siteLogo {
   background-image: url(../imgs/sprites_main2.png);
   background-position: 1000px 1000px;
   background-repeat: no-repeat;
   border: none;
   border-radius: 100%;
   display: block;
   height: 294px;
   left: 10px;
   position: relative;
   top: 8px;
   width: 294px; }
#siteLogo:hover {
   background-position: -15px -324px; }

shapeアンカー タグにおよび属性を設定するとcoords、Opera と Firefox でクリック可能な円形の (通常の正方形ではなく) 領域を持つリンクが表示されます。Chrome、Safari、および IE は、アンカー タグでこれらの属性をサポートしていません。いくつか確認したところ、HTML5 もこれらの属性をサポートしていないようです (間違っていたら訂正してください)。

私がコミュニティに提起する質問は単純です。画像マップを使用したり、HTML に画像タグを追加したりせずに、HTML5 に準拠し、主要なブラウザー (IE のサポートなしで生活できます) でサポートされている上記と同様の結果を達成できる方法はありますか?

Javascript または jQuery ソリューションを使用できます。

4

2 に答える 2

0

パディングプロパティを使用して、クリック可能な領域のサイズを大きくすることをお勧めします。

于 2012-09-13T11:34:12.150 に答える