Treehouse: Grow your CSS skills. Land your dream job.

How to hide images in html

  • # January 31, 2011 at 3:15 pm

    I have this script which switches images,

    Unfortunately the script switches background images but the sprites which are linked to from the html stay on top and are not replaced. I need to find a way to replace the existing images or hide them.

    Is there some JS that I can add to the script to tell it to randomly hide the sprites e.g. artcontainer = ‘hide’

    # February 1, 2011 at 1:40 am

    What do you mean by “randomly” hide?
    You could go: = ‘none';

    I’m not exactly sure what the problem is – Perhaps I’m reading it incorrectly. Also are you intentionally trying to avoid jQuery? (I’m asking because my javascript capabilities are embarrassing lol)

    # February 1, 2011 at 3:15 am

    I am assuming that the ‘art-boxes’ contains thumbnailed versions of the random backgrounds? When the page loads, choose a random background, and hide it from the list of other backgrounds? A kind of reverse gallery selection?

    Again I’m with @jamy_za and although I understand your script, if it was written in jQuery it would seem to read more semantically. = 'none';
    // vs

    I also find it easier to draft out ideas – even if the script itself is not valid (I would have at least broken the procedure down!):

    $('#header').css('background-image', picture-url); //'picture-url' being the result of the math;
    $('#artcontainer a[href="'+ picture-url'"]).hide(); //Find the link to the same image, and hide it;

    The code hasn’t been tested, so may not work – but even then you can see the method I was aiming for?

    # February 1, 2011 at 10:20 pm

    Thanks for getting back to me, it’s too late for me to look at this now and my brain is fried. Anyway I have put up a very basic cleaned out version of the problem. As you can see the script changes out the background images on refresh, but the sprite css rollovers remain on top and visible even though they are also background images. I would like them to appear randomly on refresh as the other background images do, but I don’t know how to write it into the script. I’m not exactly a Jquery or JS Jenius.

    P.S. Later…..I tried out both of your solutions, but obviously I didn’t explain the problem correctly.

    # February 2, 2011 at 11:18 am

    Brain was definitely fried last night, here’s the link to the cleaned down version

    # February 2, 2011 at 8:17 pm


    # February 4, 2011 at 7:10 am

    So you want to rearrange the a elements randomly ?

    well with jquery try:

    var rows = 3;
    var cols = 4;
    var arr = new Array();
    function get_class() {
    var r = Math.ceil(Math.random()* rows);
    var c = Math.ceil(Math.random()* cols);
    var cssclass = 'row'+r+'-'+c;
    if($.inArray(cssclass, arr) < 0){
    return cssclass;
    } else {
    return get_class();
    $('#art-boxes a').each(function(i,e){

    I havn’t testet it, so don’t blame me ^^

    # February 4, 2011 at 12:53 pm

    Thanks for anwering, but that is not at all what I want to do.
    There are 5 background images which show on Refresh, my problem is that they show up behind those 12 boxes, I want each of the 5 images to show up and then have the 12 boxes show up as if it were the 6th image.

    # February 4, 2011 at 1:58 pm

    Ok thats easy ^^

    and html

    Hope thats want you want ;)

    # February 5, 2011 at 2:26 pm

    Thanks for trying, I understand the logic of it of what you are doing, but unfortunately none of the images shows up at all now.

    # February 5, 2011 at 9:03 pm

    So, you want the five background images to alternate in front of the boxes, while this happens the boxes will not be visible. Then, after the five images, the boxes show up. Is that right? Now, if you want the background images to show in front of the boxes you will have to actually put them as an image in front of the boxes with absolute positioning and a higher z-index(all this with css). then have a function change the image in front of the boxes in an interval that you specify like setInterval(). Also, when the function runs through all the images, just place an empty source and nothing will show up, therefore leting the person see the blocks… Sorry if it doesn’t make sense, but I wrote this in a real big rush.. Hope this helps…

    # February 5, 2011 at 9:24 pm

    Damn sorry i messed up


    var randnum = Math.floor(Math.random() * numPics);
    var chosenPic = pictures[randnum];

    After some sleep i will test the whole thing.

    # February 6, 2011 at 9:07 am

    Well i should read it twice after writing code without testing it or: copy/pasting is bad :P
    There is no element with the id of ‘header’ in your dom..
    Change also:

    var header = document.getElementById('contentright');
    # February 6, 2011 at 4:27 pm

    Thank you guys so much for taking a look, I’m just reading this quickly on Superbowl Sunday, so I will have another trial at it tomorrow with a fresh look and get back to you to let you know the results.

Viewing 14 posts - 1 through 14 (of 14 total)

You must be logged in to reply to this topic.