How to hide images in html

[virtual]

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’

[jamygolden]

What do you mean by “randomly” hide?
You could go:
artcontainer.style.display = ‘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)

[clokey2k]

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.

artcontainer.style.display = 'none';

// vs

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

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?

[Sirlon]

So you want to rearrange the a elements randomly ?

well with jquery try:

 $(document).ready(function(){

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){

arr.push(cssclass);

return cssclass;

} else {

return get_class();

}

}

$('#art-boxes a').each(function(i,e){

$(this).removeClass($(this).attr('class').match(/rowd-d/gi));

$(this).addClass(get_class());

});

});

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

[Sirlon]

Ok thats easy ^^

and html

Hope thats want you want ;)

[renancoelho]

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…

[Sirlon]

Damn sorry i messed up

change:

var randnum = Math.floor(Math.random() * numPics);

var chosenPic = pictures[randnum];

After some sleep i will test the whole thing.

[Sirlon]

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');

[Author]

Posts