hide .img javascript onload

Question

Why this code does not work correct? I searching .img attribute but style is not changing and always picture is visible.

HTML

    <script type="text/javascript">
    function displayDate()
    {
            $('img[alt=image2]').css("display","none");
            $('img[alt=image3]').css("display","none");
            $('img[alt=image4]').css("display","none");

            $('img[alt=image2]').css("visibility","visible");
            $('img[alt=image3]').css("visibility","visible");
            $('img[alt=image4]').css("visibility","visible");
    }
</script>

HTML

<body OnLoad="displayDate()">
<img src="im.jpg" alt="image2"/>
<img src="im.jpg" alt="image3"/>
<img src="im.jpg" alt="image4"/>
</body>

you can see error in chrome

enter image description here

you wanna make invisible each img or just three, as above in the question? — Talha Akbar
– Talha Akbar, Commented Jan 6, 2013 at 12:26
yes I would like te invisible each img but this code not working correct. I don`t know why? and pictures are visible — Rafał Developer
– Rafał Developer, Commented Jan 6, 2013 at 12:27
What exactly is not working correctly? Any errors in the error console? Does the function fire at all? Does a console.log( $('img[alt=image2]')) show that jQuery is actually finding the element? — Pekka
– Pekka, Commented Jan 6, 2013 at 12:28
You are sure, that you implemented jQuery? Because your code contains jQuery syntax. — axel.michel
– axel.michel, Commented Jan 6, 2013 at 12:28

huysentruitw · Accepted Answer · 2013-01-06 12:47:59Z

4

I think your problem is that you don't have the jQuery library included while you are using jQuery syntax. So try to include the jQuery library by adding this to the <head> of your page:

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

The jQuery way to execute something on load is like this:

$(function() {
   // this code will execute on load
});

The jQuery way to hide an element is like this:

$('img[alt="image2"]').hide();

To hide the images that have an alt containing the word 'image' you can do this (other selector options can be found here):

$(function() {
    $('img[alt*="image"]').hide();
});

Instead of using the alt attribute, an other option is to assign a class to the images, so you can select the images depending on their class:

$(function() {
    $('.myImageClassName').hide();
});

<img class="myImageClassName" />

or to wrap them in a div with a unique id:

$(function() {
    $('#myImageContainer img').hide();
});

<div id="myImageContainer">
    <img />
    <img />
    <img />
</div>

edited Jan 6, 2013 at 12:47

answered Jan 6, 2013 at 12:28

huysentruitw

28.2k10 gold badges95 silver badges141 bronze badges

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

4 Comments

Rafał Developer Over a year ago

yes I know way with option hide but I need to know way with changing attribute. Do you know where I made mistace?

huysentruitw Over a year ago

Did you include the jQuery library? See first section of my answer.

Rafał Developer Over a year ago

yes now my code is working correct but this what I would like to fix in website which I developing all teh time I can see.

huysentruitw Over a year ago

best way to have the images hidden at startup is to assign the same class attribute to all images and to add display: none in your css file. Later, to do animations, you select the images depending on that classname.

user1846747 · Accepted Answer · 2013-01-06 12:29:27Z

1

Just try having an id for each img tag and try using this jquery hide() function...

$('#your_img_id').hide();

might work...

answered Jan 6, 2013 at 12:29

user1846747

1 Comment

Rafał Developer Over a year ago

I would like to use way with changing attribute

Collectives™ on Stack Overflow

hide .img javascript onload

2 Answers 2

4 Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

4 Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related