CSS。 Сhanging圖片訪問鏈接

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用於更改。

另一種方法是擺脫img -element，而只使用帶背景的錨點。 background -property可以通過CSS控制。

這裏是如何做到這一點的:hover一個simple example，但在你的情況下:hover可能只是簡單的改變爲:visited代替。

如果您將在下面一個名爲sprite.png默認圖像的「訪問」 - 圖像，代碼爲：

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