1

我有一个图像超链接。我想在链接访问状态时更改图像。你能告诉我怎么做吗？最好不使用 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;
    }
4

4 回答 4

2

您不能通过srcCSS 更改图像的 - 属性。如果出于某种原因，它必须是img-element，那么您将被 JavaScript 卡住以进行更改。

另一种选择是去掉img-element 并只使用带有背景的锚点。background-property 可以通过 CSS 来控制。

这是一个简单的例子，说明如何做到这一点:hover，但在你的情况下: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/（为简单起见，使用背景颜色而不是图像）

于 2012-04-16T09:45:17.607 回答
1

使用 :visited 的背景图像伪选择器不起作用。主要浏览器中存在安全限制，以防止嗅探漏洞。看到这个 StackOverflow 问题

于 2012-10-29T10:52:40.227 回答
0

您可以删除图像并通过 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;  
}
于 2012-04-16T09:35:04.253 回答
0

你可以试试这个：

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属性移动其位置。你可以在这个 fiddle中看到一个例子。

于 2012-04-16T09:49:25.500 回答