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