CODEWITHSUNDEEP
javascripthtmlcssstyles
kathryn
kathryn

Reputation: 125

Hide image of specific size, by CSS?

Thanks in advance for your help!

I have an RSS, I want to post the content of this RSS on my page, but the RSS is from WordPress and it contains an image of a button to comment.

Problem 1: if I hide every <img> from the RSS, I also hide images posted on the article from the blog.

Problem 2: the comment button <img> URL is sequential, so even if I could hide "wordpress.com/comments/ ... 12", the next button <img> url is "wordpress.com/comments/ ... 13" and so on :(

HTML of the image:

<img alt="" border="0" src="http://feeds.wordpress.com/1.0/comments/mulleralc.wordpress.com/35/">

There is one way to identify the comment button image: it’s 72px by 16px. So, I need to hide every picture on my page that is 72 (width) x 16 (height). Is there a way to do this in CSS or JavaScript?

Since we have coding like this:

img[src~="http://...url..."] {display: none;}

maybe there's something like:

img[height="16"] {display: none;}

Upvotes: 4

Views: 3888

Answers (4)

Paul D. Waite
Paul D. Waite

Reputation: 98796

the comment button URL is sequential, so even if I could hide "wordpress.com/commentbutton/12", the next button url is "wordpress.com/commentbutton/13" and so on :(

CSS can actually help out here. The attribute selector can select attributes which contain a value. So, this:

img[src*="feeds.wordpress.com/1.0/comments"] {display: none;}

should do it.

Upvotes: 4

hungerstar
hungerstar

Reputation: 21685

Use multiple attribute selectors.

Your image tags will have to use the width and height attributes for this to work.

HTML

<img src="your-image.jpg" width="72" height="16" />

CSS

img[width="72"][height="16"] {
     display: none;
}

OR

As suggested above, use a CSS class.

HTML

<img class="hide-from-rss" src="your-image.jpg" width="72" height="16" />

CSS

.hide-from-rss {
     display: none;
}

Upvotes: 0

federicot
federicot

Reputation: 12341

I'd recommend using multiple attribute selectors, in this case add the following code to your CSS stylesheet:

img[width="72"][height="16"] {
    display: none;
}

The only problem with this approach is that it wouldn't work in older browsers (e.g. IE 6) because they don't recognize them.

If you are using the JavaScript library jQuery, you could use the following script:

$('img').each(function () {
    'use strict';
    var img = $(this);

    if (img.width() === 72 && img.height() === 16) {
        img.hide();
    }
});

Upvotes: 3

Diodeus - James MacFarlane
Diodeus - James MacFarlane

Reputation: 114367

CSS cannot do this. It has no idea how large images are on your page. You need JavaScript to solve this.

Upvotes: -1

Related Questions