3

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?

George T
  • 698
  • 9
  • 18

3 Answers3

2

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.

Brock Adams
  • 90,639
  • 22
  • 233
  • 295
  • Thanks for the suggestion! I used your script as a base to make one that hides the images (instead of just changing src) and display a link to show them. However, it still doesn't happen until after the page is loaded, and the images are displayed for a moment. Is there any way to make it run while the page is loading, so that the image doesn't display at all? – George T Aug 21 '15 at 08:59
  • Yes, but that's a new/separate issue. Mark this as accepted and ask another Q for the additional problem. Be sure to include the relevant code. – Brock Adams Aug 21 '15 at 09:02
  • Firefox is mentioned in this question and as far as I know the name greasemonkey is not used in other browsers. In any case, it will be mentioned in the other question too. – George T Aug 21 '15 at 09:05
  • Oops, I see the FF mention now. I just keyed on [Stylish] for some reason. It's a cross-browser extension. I was the first to mention Greasemonkey and that script is also cross-browser. – Brock Adams Aug 21 '15 at 09:14
  • The question is there: http://stackoverflow.com/questions/32137039/how-to-make-a-greasemonkey-script-affect-elements-in-a-page-before-theyre-displ – George T Aug 21 '15 at 09:32
1

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

Muhammad Nasir
  • 2,126
  • 4
  • 35
  • 63
  • Useful idea, but not practical to run a console script every time the page changes. Also, not every page/site uses jQuery. – Brock Adams Aug 20 '15 at 20:28
0

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.

DavidMichaelangelo
  • 44
  • 13