How to force an image's alt text to display instead of the image?

Question

There is a website whose text I am interested in reading, however the images that accompany it may have content which I'd prefer not to see. I'm trying to use the Firefox extension Stylish to add a rule for that website.

The following CSS rules work almost as I'd prefer:

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

* {
  background-image: none !important;
}

(The commented line is an alternative; I am aware of the difference between the two options)

At the same time, I'd prefer to keep the alt-text of images displayed, as it may help me decide whether the specific image is one I'd like to see.

Is there any way to add a CSS rule that will hide the image but display its alt-text, supposing the latter is set?

Answer 1

Pretty sure this is not something you can currently do with just CSS. You need a userscript.

Install Greasemonkey, or Tampermonkey, or similar. Then this userscript will work:

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

It uses waitForKeyElements to handle images on AJAX-driven sites.

Answer 2

Open developer tool and in javascript console run following jquery command to hide all images.

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

when you press enter all images will have src attribute off null and alt text will display

Answer 3

One option is a browser add-in: https://chrome.google.com/webstore/detail/image-alt-text-viewer/hinbolcnfifkhlcehoakdledkfjiaeeg?hl=en (This is a chrome example).

Otherwise, try:

content: attr(alt);

It's not the full solution for you, but hopefully it can set you on the right track.