show / hide icons or pictures

mimenko

Hello,

I'd want to show and hide the same icons (pictures) on a web page that contains several icons. Some are identical, some are different (for ex : 3 items "A", 4 items "B", 2 items "C").
Is it possible to make radio buttons or check cases to show all the same items on the page (and to hide them if no action is done on the buttons) ?
(I'd want one button for items "A", one another for items "B", and a third for items "C").
All the items are located in absolute position on the page.

Thanks a lot for your help.

iam_clint

Give an example of your html code and what exactly you want the javascript to be doing.

mimenko

Sorry, I don't have any html code for the moment. I'd just want to know if my request is possible or not, and in what language (javascript, dhtml,...).

The items I've told are small pictures (icons) that are located in all the web page, like that :

A C B
B A C
B C A C A
...

All the letters "A" represents the same icon, and so on for the letters B and C.
My question is : is it possible to hide (and show) with one button ALL the icons "A", with another button ALL th icons "B", ... ?

Thanks a lot, I'm French and beginner with programming, and I didn't find a solution on websites...

iam_clint

Expand|Select|Wrap|Line Numbers

 
<script>

function hide(which) {

var hide = new Array();

hide = document.getElementsByName(which);

for (i=0; i<hide.length; i++) {

  hide[i].width = 0;

  hide[i].height = 0;

}

}

</script>

<input type="button" value="Hide A" onclick="hide('a');"><input type="button" value="Hide B" onclick="hide('b');"><input type="button" value="Hide C" onclick="hide('c');"><br>

<img src="http://www.thescripts.com/images/noavatar.gif" name="a">

<img src="http://www.thescripts.com/images/logo.jpg" name="b"><br>

<img src="http://www.thescripts.com/images/noavatar.gif" name="a">

<img src="http://www.thescripts.com/forum/images/cnome_buttons/reply.gif" name="c"><br>

<img src="http://www.thescripts.com/images/logo.jpg" name="b">

<img src="http://www.thescripts.com/forum/images/cnome_buttons/reply.gif" name="c"><br>

<img src="http://www.thescripts.com/forum/images/cnome_buttons/reply.gif" name="c">

<img src="http://www.thescripts.com/images/noavatar.gif" name="a">

heres an example i made up for you.

iam_clint

now if you wanted to show them also you won't want to do it this way you will want to give each one a style of hidden instead of resizing the image to 0.

mimenko

Yeah ! Great !
But I don't understand the way to show the items. It's probably with "visibility", but I don't know how to proceed...
How can I do if I want the items are hidden at the first state ?
Thanks a lot for all.

Phil

iam_clint

look up CSS styles hidden on google and then change image.width and image.height to the css hidden style and the div will then be labled a b c not the actual images itself.

mimenko

Quote:

Originally Posted by iam_clint

look up CSS styles hidden on google and then change image.width and image.height to the css hidden style and the div will then be labled a b c not the actual images itself.

Thanks, but I'm so bad with web programming ! I've tried this, but it's not the solution :

function show(which) {
var show = new Array();
show = document.getElementsByName(which);
for (i=0; i<show.length; i++) {
show[i].style.display = 'true';
}
}

iam_clint

Expand|Select|Wrap|Line Numbers

 
<script>

function hide(which) {

var hide = new Array();

hide = document.getElementsByName(which);

for (i=0; i<hide.length; i++) {

  hide[i].style.display = 'none';

}

}

function show(which) {

var hide = new Array();

hide = document.getElementsByName(which);

for (i=0; i<hide.length; i++) {

  hide[i].style.display = 'inline';

}

}

</script>

<input type="button" value="Hide A" onclick="hide('a');"><input type="button" value="Hide B" onclick="hide('b');"><input type="button" value="Hide C" onclick="hide('c');"><br>

<input type="button" value="Show A" onclick="show('a');"><input type="button" value="Show B" onclick="show('b');"><input type="button" value="Show C" onclick="show('c');"><br>

<img src="http://www.thescripts.com/images/noavatar.gif" name="a">

<img src="http://www.thescripts.com/images/logo.jpg" name="b"><br>

<img src="http://www.thescripts.com/images/noavatar.gif" name="a">

<img src="http://www.thescripts.com/forum/images/cnome_buttons/reply.gif" name="c"><br>

<img src="http://www.thescripts.com/images/logo.jpg" name="b">

<img src="http://www.thescripts.com/forum/images/cnome_buttons/reply.gif" name="c"><br>

<img src="http://www.thescripts.com/forum/images/cnome_buttons/reply.gif" name="c">

<img src="http://www.thescripts.com/images/noavatar.gif" name="a">

Heres how it could be done.