Подсветка посещенных ссылок-картинок

Leopold · №1

Есть много сайтов, на которых многие ссылки сделаны картинками. Ссылка-картинка отличается (в худшую сторону) от ссылки-текста тем, что ссылка-текст меняет свой цвет при посещении (т.е. если ссылка стандартного цвета - то я знаю, что я ее еще не посещал, а если измененного - то знаю, что посещал), а ссылка-картинка - всегда отображается одной и той же картинкой.

Вопрос такой: есть ли какое-то расширение (или способ настроить такое поведение), которое позволит каким либо образом метить ссылки-картинки так, чтобы не открывая эти ссылки было видно, посещались они или нет? Например банальное отображение текста вместо картинки (если это ссылка), причем такого текста, который будет менять свой цвет при посещении.

Вот например обратное расширение есть - text to image, а мне, грубо говоря, нужно как раз расширение "image to text" (которое поиском не нашел).

Ну и если расширения такого плана не существует - просьба рассказать, каким образом можно добиться поведения, при котором по внешнему виду ссылки-картинки будет видно, посещалась она уже или нет.

В идеале хотелось бы, чтобы в текст превращались только те ссылки, картинка которых содержится в специальном списке (например если ссылка www.mozilla.com является картинкой, которая находится по адресу www.mozilla.com/1.jpg, то я вношу в список www.mozilla.com/1.jpg, и браузер определяет, что раз в списке есть www.mozilla.com/1.jpg - то данную ссылку-картинку надо отобразить текстом).

Заранее спасибо и всех с новым годом!

Отредактировано Leopold (02-01-2013 21:23:00)

okkamas_knife · №2

Leopold
это можно сделать через UserContent.css или стили
конкретный код не подскажу - не силён в этом
вобщем вам Сюда
там подробно все расписано как написать стиль и в разделе стили и CSS можно поспрашивать.

Leopold · №3

Если кто силен в CSS - просьба подсказать код (или хотя бы идею кода), который либо превратит целевую картинку-ссылку в текстовую ссылку, либо превратит все картинки-ссылки в текстовые ссылки, либо как-то будет изменять картинки ссылки таким образом, чтобы было видно, посещалась эта ссылка или нет

Заранее спасибо

Kamui · №4

Leopold
Ну так, навскидку:

Выделить код

Код:

a:visited > img
{box-shadow: 0px 0px 5px 5px !important;}

Infocatcher · №5

Kamui
https://developer.mozilla.org/en-US/docs/CSS/:visited

Note: For privacy reasons, browsers strictly limit the styles you can apply using an element selected by this pseudo-class: only color, background-color, border-color, border-bottom-color, border-left-color, border-right-color, border-top-color, outline-color, column-rule-color, fill and stroke.

Kamui · №6

Тогда так наверно:

Выделить код

Код:

:link > img
{outline: 5px solid white;
}
:visited > img
{outline-color: black !important;}

Но это вообще некрасиво.

MagicFly · №7

А как быть с "гибридными" ссылками, на примере зеленой кнопки "Firefox Free Download" на http://www.mozilla.org ?

Leopold · №8

Kamui пишет

Тогда так наверно:
Выделить код
Код:
:link > img
{outline: 5px solid white;
}
:visited > img
{outline-color: black !important;}
Но это вообще некрасиво.

Несмотря на то, что это не самый красивый вариант - на первое время пойдет. Я сделал так:

:link > img[height="высота1"][width="ширина1"]
{outline: 20px solid #цвет фона целевого рисунка 1;}
:visited > img[height="высота1"][width="ширина1"]
{outline-color: #цвет фона самой страницы; !important;}

:link > img[height="высота2"][width="ширина2"]
{outline: 20px solid #цвет фона целевого рисунка 2;}
:visited > img[height="высота2"][width="ширина2"]
{outline-color: #цвет фона самой страницы; !important;}

...

И так для каждого изображения.

Высота1/2/N и ширина1/2/N - это высота и ширина изображений, для которых применяется вся эта байда (на данный момент я детекчу целевые изображения именно по размеру).

Огромное спасибо тебе за помощь!

Тем не менее, вопрос остается открытым. Конкретные вопросы, которые осталось решить:

1) Как сделать одно единственное правило для рисунков разного размера, чтобы не копировать его по 10 раз, как это сделано сейчас (см. выше) ?

2) Какой код/синтаксис позволит вместо ширины/высоты детектить изображения по ссылке на них (как описано в стартовом посте) ?

3) Есть ли способ преобразовать картиночные ссылки в текстовые (причем чтобы текстовые ссылки, полученные на выходе - подсвечивались, если они visited) ?

Отредактировано Leopold (03-01-2013 01:41:20)

okkamas_knife · №9

Leopold пишет

Есть ли способ преобразовать картиночные ссылки в текстовые (причем чтобы текстовые ссылки, полученные на выходе - подсвечивались, если они visited) ?

есть но не уверен что возможно стилями а через скрипты это возможно 100%.
кстати как вариант решения
для посещённых картинок и текстовых добавлять рядом какой нибудь значок
может быть даже поверх если это возможно
то есть добавляем во все в скрытом виде а в зависимости от атрибута визитед переключаем для значка видимость
если его сделать полупрозрачным то вообще ок будет
в теме стилей есть такое
[Global style] Индикация (иконками) расширений файлов у прямых ссылок
то бишь если ссылка на зип один значок если на мп3 другой
можно его взять в качестве примера.

Sergeys · №10

Есть тема в faq - ищу расширение

Полезная информация

№102-01-2013 21:18:35