私は10個のボタンにイメージテキストとそれぞれのホバー状態を持っています。 背景の位置、幅、高さを使用して、背景イメージのスプライトの一部とホバーの背景位置のみを表示し、ホバースタイルを表示します。 また、要素上でイメージ置換クラスを使用して、アクセス可能でインデックス可能なままにします。背景画像とのリンク
ので(測定はランダムです):それはこれを行うための良い方法である場合
[CSS]
.menu{background-image:url(path/to/sprite.png);}
.button-1{width:200px;height:30px;background-position:0 0;}
.button-1:hover{background-position:0 -30px;}
.button-2{width:250px;height:30px;background-position:100px 0;}
.button-2:hover{background-position:100px -30px;}
/* Image Replacement Class (H5BP, @necolas && BEM) */
.ir{border:0;font:0/0 a;text-shadow:none;color:transparent;background-color:transparent;}
[HTML]
<a href="someLink.html" class="menu button-1 ir">Button 1</a>
<a href="someOtherLink.html" class="menu button-2 ir">Button 2</a>
私が知りたいのは何です次のように異なる方法で実行する必要があります。
<a href="someLink.html"><img src="image.png" width="200" height="30" alt="Button 1"/></a>
JavaScriptを使用して、ホバー上の画像をスワップします。
アクセシビリティとロボットの面で違いはありますか?
ありがとうございます。
は、私にはよさそうです。私の唯一のことは、デザインを見直して、単純に保守性のためにテキストとしてHTMLにとどまることができるかどうかを確認することです。 – chipcullen
ねえ。テキストとしてHTMLにとどまることはどういう意味ですか? – Francisc
私は、たとえそれらがCSSで適用された背景画像であっても、テキストを画像で置き換える必要はないと考えました。私はあなたのイメージ交換の理由を知らない - 私はただそれをすべての費用をかけて回避しようとする。メンテナンスは苦痛です。 – chipcullen