1. 首页
  2. 问答
  3. 更改图片src为访问过的链接

更改图片src为访问过的链接

2011-10-22 58 views
0

我有几个条目列表。更改图片src为访问过的链接

<ul>  
<li> 
    <a href="http://url" title="The Title"> 
    <img src="/badge-unvisited.png" alt="" border="0" /> 
    </a> 
</li> 
<!-- etc. --> 
</ul>

我不想使用jQuery，所以它需要CSS-只。 这是什么被访问时，改变图像的src最好和最简单的方法是什么？

来源

2011-10-22 reggie

回答

2

Afaik，你不能用css改变图像的src。

但是你可以只让一个相同大小的背景图像，然后使用：悬停类像

div { 
    background-image:url(default.jpg); 
} 

div:visited { 
    background-image:url(changed.jpg); 
}

顺便说一句甚至niftier的解决办法是使用相同的图像，包括这两个州和只需更改background-position即可。这样就减少了负载。如果你对更多的感兴趣，请寻找'css sprites'！

来源

2011-10-22 12:21:49 Anonymous

+0

的问题是，具有锚元件（“A”）的内部一个div无效。我可以使用li元素并给它一个背景。但是我无法将这个链接包裹在里面。那么我会用什么元素？带显示的区域：块是我看到的唯一选项。 – reggie

+0

HTML5允许中的块元素。否则，使用display：block的跨度将是下一个最佳解决方案，是的！ – Anonymous

4

什么是访问时更改图像的src的最好和最简单的方法？

有没有。图像的src属性超出了CSS的范围。

您将有background-image性工作来代替。

理论上可以有两个图像，并显示一个在同一时间，另一个在下次使用display: none，但这是相当缺憾，并导致被加载两个图像。

来源

2011-10-22 12:19:05

2

您可以这样形象改变属性：

ul li a:visited img { border:10px }

但要改变自己，你必须发挥创意的源泉。无论是与具有元素的背景图像，或者如果你没有支持旧的浏览器可以使用生成的内容，这样的替换图片：

ul li a:after { content:url(image.gif); }

然后

ul li a:visited:after { content:url(image-2.gif); }

来源

2011-10-22 12:20:04

相关问题

 相关问题