CSS。 Сhangingimage visited link

Question

私は画像ハイパーリンクを持っています。そして、私はリンクがステータスを訪問したときにイメージを変更したい。あなたは私にそれをする方法を教えてくれますか？ JavaScriptを使用しないでください。

私は、次の操作を実行しようとしている：私は、単一の共通イメージの両方で私の画像に入社し、ここに私のコードです：

<a href="#" class="mylink"> 
    <img src="common_image.jpg" width="240px" height="240px"/> 
</a> 

そして、私のスタイル：

.mylink { 
     width: 120px; 
     height: 240px; 
     display: block; 
     overflow: hidden; 
    } 

    .mylink:visited img { 
     margin-left: -120px; 
    } 

Answer 1

src - CSSを通した画像の属性。なんらかの理由でimg-elementでなければならない場合は、変更のためにJavaScriptが必要です。

もう1つの方法は、img要素を取り除き、代わりに背景のアンカーのみを使用する方法です。 backgroundのプロパティはCSSで制御できます。ここで

は:hoverのためにそれを行う方法のsimple exampleですが、あなたの場合には:hoverは、同じように簡単に代わり:visitedに変更することができます。

あなたはsprite.pngというファイルに-imageデフォルトの画像の下に「訪問」を配置した場合、コードは次のようになります。

a.mylink { 
    width: 120px; 
    height: 240px; 
    display: block; 
    overflow: hidden; 
    background: url(sprite.png) no-repeat; 
} 

a:visited.mylink { 
    background-position: 0 -240px; 
} 

は、それがここに住んでください：http://jsfiddle.net/5ZzkY/（代わりの背景色を使用します単純化のための画像）

Answer 2

あなたは削除することもできますイメージを作成し、CSSを使用して背景を制御する

.mylink { 
    background:url('myimagepath-01.jpg') top left no-repeat; 
    width: 120px; 
    height: 240px; 
    display: block; 
    overflow: hidden; 
} 

.mylink:visited { 
    background:url('myimagepath-02.jpg') top left no-repeat; 
} 

Answer 3

あなたはこれを試みることができる：

HTML：

<a href="http://google.com" class="image">Link</a>​ 

CSS：あなたはスプライトを使用する場合は、あなたが

.image { 
    background: transparent url('http://javascript.info/files/tutorial/browser/events/rollover-sprite/button.png') no-repeat top left; 
    width: 186px; 
    height: 52px; 
    display: block; 
    text-indent: -9999px; 
} 
.image:hover { 
    background-position: 0 -52px; 
} 
.image:visited { 
    background-position: 0 -104px; 
} 

CSSの背景として画像を設定し、background-positionプロパティを使用して、その位置を移動する必要があります。例はthis fiddleにあります。

Answer 4

遊び方：訪問した背景画像の疑似セレクタが動作しません。主要なブラウザには、スニッフィングの悪用を防ぐセキュリティ上の制限があります。 this StackOverflow question