Изменить картинку src для посещенной ссылки

Question

У меня есть список с несколькими записями.

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

Я не хочу использовать jQuery, поэтому он должен быть только для CSS.Каков наилучший и самый простой способ изменить источник изображения при его посещении?

Answer 1

Каков наилучший и самый простой способ изменить источник изображения при его посещении?

Там нет ни одного. Свойство src изображения выходит за рамки CSS.

Вместо этого вам придется работать с background-image свойствами.

Теоретически вы могли бы иметь два изображения и показывать одно за другим, а другое - за другим, используя display: none, но это довольно глупо и приводит к загрузке обоих изображений.

Answer 2

По крайней мере, в Webkit и Firefox это невозможно, поскольку стилизация посещенных ссылок позволяет использовать различные сценарии атаки.

http://blog.mozilla.com/security/2010/03/31/plugging-the-css-history-leak/
https://bugzilla.mozilla.org/show_bug.cgi?id=147777
https://bugs.webkit.org/show_bug.cgi?id=24300

Answer 3

Афаик, вы не можете изменить изображение src только с помощью css.

Но вы можете просто сделать его фоновым изображением того же размера, а затем использовать класс: hover, например

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

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

Кстати, еще более удачным решением было бы использовать одно и то же изображение, включая оба состояния, и просто изменить background-position.Таким образом, меньше нагрузки.Ищите «css sprites», если вас интересует больше!

Answer 4

Вы можете изменить свойства изображения следующим образом:

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); }

Answer 5

css не может изменить dom, я могу предложить установить фоновое изображение, а затем скрыть img

a{background-image:url(badge-visited.png);width:50px;height:50px;}
a:visited img{display:none;}