4

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?

Improve this question
1
  • Use lynx?
    – steveax
    Commented Aug 20, 2015 at 20:14

3 Answers 3

Reset to default
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.

Improve this answer
5
  • 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
    Commented Aug 21, 2015 at 8: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
    Commented Aug 21, 2015 at 9: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
    Commented Aug 21, 2015 at 9: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
    Commented Aug 21, 2015 at 9:14
  • The question is there: stackoverflow.com/questions/32137039/…
    – George T
    Commented Aug 21, 2015 at 9: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

Improve this answer
1
  • Useful idea, but not practical to run a console script every time the page changes. Also, not every page/site uses jQuery.
    – Brock Adams
    Commented Aug 20, 2015 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.

Improve this answer
0

Not the answer you're looking for? Browse other questions tagged or ask your own question.