hide an image in javascript using its src

Question

I have an image defined as following:

<div id="logo" class="exhibit-flowingFacet">
  <div class="wrapper">
    <img src="path/to/the/image/logo.png">
    </img>
  </div>
</div>

I want with a javascript get the image by its src and hide it.

function hideImage() { 
  if (document.getElementById() 
  {
    if (document.getElementById('logo').getElementsByClassName('wrapper').src=="path/to/the/image/logo.png")
    {
      document.style.visibility = 'hidden';
    }  
  }
};

hideImage();

But the code didn't work!! any idea?

you can add an id to the img attribute. and then with jquery you can use: $("#id").hide(); — Vincent Hogendoorn
– Vincent Hogendoorn, Commented Sep 11, 2013 at 15:01
the problem is I cannot edit the definition of the document. — user2747249
– user2747249, Commented Sep 11, 2013 at 16:15

jukempff · Accepted Answer · 2013-09-11 15:02:27Z

3

With jQuery you could write

$('img[src="path/to/the/image/logo.png"]').hide();

answered Sep 11, 2013 at 15:02

jukempff

9656 silver badges12 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Stano · Accepted Answer · 2013-09-11 17:14:50Z

0

Try this script:

function hideImage() {
    var path = 'path/to/the/image/logo.png';
    var img = document.getElementById('logo').getElementsByTagName('img')[0];
    if (img && img.getAttribute('src').indexOf(path) > -1) {
        img.style.visibility = 'hidden';
    }
}

if (window.addEventListener) {
    window.addEventListener('load', hideImage, false);
} else if (window.attachEvent) { // for older IE8-6 compatibility
    window.attachEvent('onload', hideImage);
}

JSFiddle

edited Sep 11, 2013 at 17:14

answered Sep 11, 2013 at 15:26

Stano

8,9796 gold badges33 silver badges46 bronze badges

4 Comments

user2747249 Over a year ago

thx I tried it works for seconds and then a java script appears:img is undefined PS.the image is not definied directly under the devision with the logo.have we to pass by the div with the className wrapper?

Stano Over a year ago

I am sorry i don't know why it doesn't work. Can you try the following modification? jsfiddle.net/ZC4yA/4 (the querySelector method works with IE8, it's still a bit more compatible than getElementsByClassName) or this jsfiddle.net/ZC4yA/3 (if you want also IE7 compatibility)

user2747249 Over a year ago

Thx a lot I used yours code to generate my exact case jsfiddle.net/amani1988/QCwVg/4 and it works :) but one I copy the code in my javascript file definied by <script> </script> it works no more! I think it requires an external javascript source that have to be added.Have you an idea?

Stano Over a year ago

Look at the source code of these two jsfiddles in your browser: jsfiddle.net/QCwVg/5/show or jsfiddle.net/QCwVg/6/show - the javascript should be executed after document is created (else .getElementById will return undefined as you said in your first comment), so either in the onload handler, or before the closing </body> tag.

Rahul Tripathi · Accepted Answer · 2013-09-11 15:05:42Z

0

You can try this:-

$('img[src="path/to/the/image/logo.png"]').css("display","none");

or try this:-

    this.style.display = "none";

answered Sep 11, 2013 at 15:05

Rahul Tripathi

173k33 gold badges292 silver badges341 bronze badges

Comments

urzeit · Accepted Answer · 2013-09-11 15:06:30Z

0

getElementsByClassName('wrapper') is an array, which is why you have to access the src-attribute of the first element - at least in your case.

if (document.getElementById('logo').getElementsByClassName('wrapper')[0].src=="path/to/the/image/logo.png")

answered Sep 11, 2013 at 15:06

urzeit

2,9091 gold badge22 silver badges37 bronze badges

Comments

Jdsmith.It · Accepted Answer · 2020-02-19 08:04:13Z

0

You have to make sure you have a link to jquery library in your header using this code

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>

You could diplay:none in css if you wanted it not to render on the screen, just pass the image source into the function

function hideImage(imageSrc) { 
$('img[src=" + imageSrc + "]').css("display","none");

}

and turn it back on using

$('img[src="path/to/the/image/logo.png"]').css("display","block");

edited Feb 19, 2020 at 8:04

answered Sep 11, 2013 at 15:04

Jdsmith.It

1801 silver badge9 bronze badges

Collectives™ on Stack Overflow

hide an image in javascript using its src

5 Answers 5

Comments

4 Comments

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

5 Answers 5

Comments

4 Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related