CSS. Изменение изображения, посещенного ссылкой

У меня есть изображение-гиперссылка. И я хочу изменить изображение, когда ссылка имеет статус посещения. Не могли бы вы показать мне, как это сделать? Предпочтительно без использования JavaScript.CSS. Изменение изображения, посещенного ссылкой

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

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

источник

2012-04-16 Michael

Как вы относитесь к «вы хотите изменить изображение»? Вы хотите изменить источник изображения? –

Я бы посмотрел на использование спрайтов background-image и css. Это должно указывать вам, по крайней мере, в правильном направлении. Вы можете использовать одно изображение и переключить фоновое положение на: посещенный. –

Да, я хочу посмотреть другое изображение – Michael

Вы не можете изменить src - атрибут изображения через CSS. Если это по какой-то причине должно быть img-element, тогда вы застряли с JavaScript для изменения.

Другой альтернативой было бы избавиться от элемента img и использовать вместо него только якорь с фоном. С помощью CSS можно управлять качеством background.

Вот simple example о том, как это сделать для :hover, но вы случай :hover может так же легко изменить на :visited вместо.

Если вы поместите «посетили» -image ниже изображения по умолчанию в файл с именем 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-16 09:45:17

К сожалению, ваш код не работал. Это решение подходит для зависания статуса, но не для посещения.Если замена была посещена с помощью зависания в моем варианте, поэтому она тоже хорошо работает – Michael

@Andrei См. Мой обновленный CSS и пример. Кажется, правильный способ записи селектора - «a: visited.myLink». –

Результат схож ... – Michael

Вы можете удалить изображение и управлять фон через 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-16 09:35:04 ilBeatz

Тогда это не будет один файл изображения. Это то, что происходит после OP. –

Я думаю, что это будет означать создание 2-х изображений для каждой ссылки и назначение идентификаторов для каждого из них, а не практическое в том смысле, что CSS окажется огромным, если бы было несколько ссылок, используя этот эффект на странице. –

Этот подход не работает со статусом «посетил» – Michael

Вы можете попробовать это:

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.

источник

2012-04-16 09:49:25 scumah

Игра с: посещением псевдоселектора для фонового изображения не работает. Существует ограничение безопасности в основных браузерах, чтобы предотвратить эксплойт snifing. См. this StackOverflow question

источник

2012-10-29 10:52:40 MrSo

CSS. Изменение изображения, посещенного ссылкой

ответ

Смежные вопросы