Как заставить альтернативный текст изображения отображать вместо изображения?

Есть веб-сайт, текст которого мне интересно читать, однако изображения, сопровождающие его, могут иметь контент, который я предпочел бы не видеть. Я пытаюсь использовать расширение Firefox Stylish, чтобы добавить правило для этого сайта.

Следующие правила CSS работают почти так, как я бы предпочел:

img {
  display: none !important;
  /* visibility: hidden !important; */
}

* {
  background-image: none !important;
}

(Закомментированная строка является альтернативой; я знаю разницу между этими двумя вариантами)

В то же время я предпочел бы сохранить альтернативный текст отображаемых изображений, поскольку это может помочь мне решить, является ли конкретное изображение тем, которое я хотел бы видеть.

Есть ли способ добавить правило CSS, которое будет скрывать изображение, но отображать его alt-текст, предполагая, что последнее установлено?

Источник

3 ответа

Решение

Уверен, что сейчас это не то, что вы можете сделать только с помощью CSS. Вам нужен пользовательский скрипт.

Установите Greasemonkey, или Tampermonkey, или аналогичный. Тогда этот скрипт будет работать:

// ==UserScript==
// @name     _Hide pics except for alt text
// @include  http://YOUR_SERVER.COM/YOUR_PATH/*
// @require  http://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js
// @require  https://gist.github.com/raw/2625891/waitForKeyElements.js
// @grant    GM_addStyle
// ==/UserScript==

GM_addStyle ( "                                 \
    * {                                         \
        background-image: none !important;      \
    }                                           \
" );

waitForKeyElements ("img", hideImageExceptForAltText);

function hideImageExceptForAltText (jNode) {
    var oldSrc  = jNode.attr ("src");
    jNode.attr ("src", "");
    jNode.attr ("data-oldSrc", oldSrc);
}

Оно использует waitForKeyElements обрабатывать изображения на сайтах, управляемых AJAX.

Источник

Откройте инструмент разработчика и в консоли javascript выполните следующую команду jquery, чтобы скрыть все изображения.

$('img').attr('src','');

когда вы нажимаете ввод, все изображения будут иметь атрибут src, равный нулю, и будет отображаться альтернативный текст

Источник

Одним из вариантов является надстройка для браузера: https://chrome.google.com/webstore/detail/image-alt-text-viewer/hinbolcnfifkhlcehoakdledkfjiaeeg?hl=en (это пример Chrome).

В противном случае попробуйте:

content: attr(alt);

Это не полное решение для вас, но, надеюсь, оно поможет вам выбрать правильный путь.

Источник
Другие вопросы по тегам