1

そのため、ページに一連のクリック可能な画像があります。必要なすべての画像を含む単一の画像を生成することでこれを最適化しようとしました。スプライトを使用して必要な画像を選択する予定です。スプライトにアンカータグを追加する最良の方法を見つけるのに苦労していますが？

だから私は、できればJavaScriptを使用せずに、スプライトをサポートするクリック可能なHTML要素を求めています。JavaScriptを使用してそれを行うことはできますが、避けたいと思います。

OK、これが私のコードです。

.touringEscorted {
    height:125px;
    width: 214px;
    background-image: url('/Images/Travel2New/ToursImages/ToursBanners.jpg');
    background-position: 0 0;
}

.touringNew {
    height:125px;
    width: 214px;
    background-image: url('/Images/Travel2New/ToursImages/ToursBanners.jpg');
    background-position: -10px 0;
}

私はもう試した

<a href="#"><div class="touringEscorted"></a>

と

<a href="#" class="touringEscorted">&nbsp;</a>

と他のいくつか。スプライト/背景画像とアンカータグを同時に使用する方法はないようです。私は正しいですか？助言がありますか？

4

3 に答える 3

4

では、：

<a href="#" class="touringEscorted"></a>

動作するはずですがdisplay:block;、CSSに追加します：

.touringEscorted {
    height:125px;
    width: 214px;
    background-image: url('/Images/Travel2New/ToursImages/ToursBanners.jpg');
    background-position: 0 0;
    display:block;
}
于 2012-08-31T12:35:02.543 に答える
2

このような？

<a class="sprite sprite1" href="javascript:;">Link Text</a>

sprite {
  display: block;
  background: url(path/to/image/file.ext);
  text-indent: -9999px;
}
sprite1 {
  width: WWpx;
  height: HHpx;
  background-position: -NNpx - MMpx;
}
于 2012-08-31T12:33:05.073 に答える
1

Googleは画面外のテキストをスパムと見なしませんか？私は修正を思いついた。リンクを別の要素（この場合はテーブル）に配置します。要素とリンクに背景画像クラスを次のように追加しました。

CSSコード：

.sprite{ 
    background: url('images/sprite.png') no-repeat top left; 
}   
.sprite.termite { 
    background-position: 0px -499px; 
    width: 150px; height: 113px;
    display: block;
}

HTMLコード：

<td class="td sprite termite">
    <a href="termite-photos.html" title="termite control" class="sprite termite"></a>
</td>

テーブル内の画像を完全にレンダリングしてクリックします！

于 2014-12-19T08:29:44.473 に答える