469,292 Members | 1,500 Online
Bytes | Developer Community
New Post

Home Posts Topics Members FAQ

Post your question to a community of 469,292 developers. It's quick & easy.

show / hide icons or pictures

12
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.
Aug 2 '06 #1
9 18172
iam_clint
1,208 Expert 1GB
Give an example of your html code and what exactly you want the javascript to be doing.
Aug 2 '06 #2
mimenko
12
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...
Aug 2 '06 #3
iam_clint
1,208 Expert 1GB
Expand|Select|Wrap|Line Numbers
  1. <script>
  2. function hide(which) {
  3. var hide = new Array();
  4. hide = document.getElementsByName(which);
  5. for (i=0; i<hide.length; i++) {
  6.   hide[i].width = 0;
  7.   hide[i].height = 0;
  8. }
  9. }
  10. </script>
  11. <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>
  12. <img src="http://www.thescripts.com/images/noavatar.gif" name="a">
  13. <img src="http://www.thescripts.com/images/logo.jpg" name="b"><br>
  14. <img src="http://www.thescripts.com/images/noavatar.gif" name="a">
  15. <img src="http://www.thescripts.com/forum/images/cnome_buttons/reply.gif" name="c"><br>
  16. <img src="http://www.thescripts.com/images/logo.jpg" name="b">
  17. <img src="http://www.thescripts.com/forum/images/cnome_buttons/reply.gif" name="c"><br>
  18. <img src="http://www.thescripts.com/forum/images/cnome_buttons/reply.gif" name="c">
  19. <img src="http://www.thescripts.com/images/noavatar.gif" name="a">
  20.  
heres an example i made up for you.
Aug 3 '06 #4
iam_clint
1,208 Expert 1GB
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.
Aug 3 '06 #5
mimenko
12
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
Aug 3 '06 #6
iam_clint
1,208 Expert 1GB
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.
Aug 3 '06 #7
mimenko
12
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';
}
}
Aug 4 '06 #8
iam_clint
1,208 Expert 1GB
Expand|Select|Wrap|Line Numbers
  1. <script>
  2. function hide(which) {
  3. var hide = new Array();
  4. hide = document.getElementsByName(which);
  5. for (i=0; i<hide.length; i++) {
  6.   hide[i].style.display = 'none';
  7. }
  8. }
  9. function show(which) {
  10. var hide = new Array();
  11. hide = document.getElementsByName(which);
  12. for (i=0; i<hide.length; i++) {
  13.   hide[i].style.display = 'inline';
  14. }
  15. }
  16. </script>
  17. <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>
  18. <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>
  19. <img src="http://www.thescripts.com/images/noavatar.gif" name="a">
  20. <img src="http://www.thescripts.com/images/logo.jpg" name="b"><br>
  21. <img src="http://www.thescripts.com/images/noavatar.gif" name="a">
  22. <img src="http://www.thescripts.com/forum/images/cnome_buttons/reply.gif" name="c"><br>
  23. <img src="http://www.thescripts.com/images/logo.jpg" name="b">
  24. <img src="http://www.thescripts.com/forum/images/cnome_buttons/reply.gif" name="c"><br>
  25. <img src="http://www.thescripts.com/forum/images/cnome_buttons/reply.gif" name="c">
  26. <img src="http://www.thescripts.com/images/noavatar.gif" name="a">
  27.  
Heres how it could be done.
Aug 4 '06 #9
mimenko
12
Thank you very much. Exactly what I wanted.

Phil
Aug 4 '06 #10

Post your reply

Sign in to post your reply or Sign up for a free account.

Similar topics

10 posts views Thread by oLE | last post: by
2 posts views Thread by Mateo | last post: by
1 post views Thread by Dinesh Narayan | last post: by
3 posts views Thread by cal | last post: by
5 posts views Thread by Alexnb | last post: by
1 post views Thread by CARIGAR | last post: by
reply views Thread by zhoujie | last post: by
1 post views Thread by Geralt96 | last post: by
reply views Thread by harlem98 | last post: by
By using this site, you agree to our Privacy Policy and Terms of Use.