Hide all images, and show certain ones ONCLICk

mfalcone108 · 01-29-2010, 11:38 PM

Hey guys, I'm new to the forums, so if i post anything wrong let me know.

I'm trying to use links to hide all the images, and show just ones from a certain category. I've used the img name attribute to group them and tried to do a function that shows only one img.

here's the script...

<script language="javascript">

function showone(x) {
document.getElementByName('a').style.display='none';
document.getElementByName('b').style.display='none';
document.getElementByName('c').style.display='none';

document.getElementByName(x).style.display='block';
}
</script>

and the code...

<a href="#" onClick="showone('a'); ">show CAT. A</a><br>
<a href="#" onClick="showone('b'); ">show CAT. B</a><br>
<a href="#" onClick="showone('c'); ">show CAT. C</a><br>
<a href="#">show all cats</a><br>

<br>

<img name="a" src="imgs/a1.jpg" /><br>
<img name="b" src="imgs/b1.jpg" /><br>
<img name="a" src="imgs/a2.jpg" /><br>
<img name="a" src="imgs/a3.jpg" /><br>
<img name="b" src="imgs/b2.jpg" /><br>
<img name="c" src="imgs/c1.jpg" />

Here's what it looks like...
http://mattfalcone.com/tests/showhide.html

except the links don't work like they should, and I can't figure out why.

I'm an idiot with javascript, so if feel free to make fun of me, and if anyone knows how to get this simple function to work, please let me know and I'de appreciate it.

Jazzo · 01-29-2010, 11:58 PM

It's document.getElementsByName. Elements, not element.

mfalcone108 · 01-30-2010, 12:32 AM

Ok, I changed that, so the script now looks like...

<script language="javascript">

function showone(x) {
document.getElementsByName('a').style.display='none';
document.getElementsByName('b').style.display='none';
document.getElementsByName('c').style.display='none';

document.getElementsByName(x).style.display='block';
}

</script>

and it still isn't working.

Anything else I'm missing?

Jazzo · 01-30-2010, 12:38 AM

Well, if the script works, I guess not. Also, a word of advice, use "onclick" not "onClick". Although they both work, "onclick" is the correct one.

mfalcone108 · 01-30-2010, 01:09 AM

I don't know why this isn't working, but I might be using the wrong idea in the first place...

Is there an easier way to put images into groups according to criteria determined by me, and have links that filter the groups by category (example is how youtube works, where you can see certain categories of videos by clicking on that category)

Old Pedant · 01-30-2010, 01:52 AM

You have to get the array and then apply the styles one element of the array at a time.

Code:

var images = document.getElementsByName('a');
for ( var i = 0; i < images.length; ++i ) images[i].style.display='none';

But a better way to do what you want:

Code:

<html>
<head>
<title>Untitled Document</title>
<style type="text/css">
#holder img { visibility: hidden;}
</style>
<script type="text/javascript">
function show(which) 
{
    var images = document.getElementById("holder").getElementsByTagName("img");
    for ( var i = 0; i < images.length; ++i )
    {
        var image = images[i];
        image.style.visibility = ( image.src.indexOf(which) > 0 ) ? "visibile" : "hidden";
    }
}
</script>
</head>
<body>
<a href="#" onclick="return show('/a'); ">show CAT. A</a><br>
<a href="#" onclick="return show('/b'); ">show CAT. B</a><br>
<a href="#" onclick="return show('/c'); ">show CAT. C</a><br>
<a href="#" onclick="return show('/');">show all cats</a><br>
<br>
<div id="holder">
<img src="imgs/a1.jpg" /><br>
<img src="imgs/b1.jpg" /><br>
<img src="imgs/a2.jpg" /><br>
<img src="imgs/a3.jpg" /><br>
<img src="imgs/b2.jpg" /><br>
<img src="imgs/c1.jpg" />
</div>
</body>
</html>

Or you could base it on name or on class name or or or ... But if your image file names really match the pattern, why not use them?

Jazzo · 01-30-2010, 01:56 AM

Actually, you might not want to change visibility. Making an element's visibility "hidden" makes it invisible but it still takes up space (unless of course it's absolutely positioned.) Since it's not absolutely positioned, it will still take up space, although it will be invisible.

display: none causes an element to be both invisible and take up no space.

Old Pedant · 01-30-2010, 02:17 AM

Agreed. But I figured that was his design decision.

mfalcone108 · 01-30-2010, 09:23 PM

Thanks for the help guys, this worked to get the show/hide function working...

<script language="javascript">

function showone(x) {

var images = document.getElementsByName('a');
for ( var i = 0; i < images.length; ++i ) images[i].style.display='none';

var images = document.getElementsByName('b');
for ( var i = 0; i < images.length; ++i ) images[i].style.display='none';

var images = document.getElementsByName('c');
for ( var i = 0; i < images.length; ++i ) images[i].style.display='none';

var images = document.getElementsByName(x);
for ( var i = 0; i < images.length; ++i ) images[i].style.display='block';

}

</script>

It's in action here...
http://mattfalcone.com/tests/showhide.html

Only one problem now. The images are now side by side, in 2 columns, but when i click on "show category a," it shows only the imgs with name="a" but they stack on top of eachother instead of being in order and side by side.

Not sure if this is fixable, but if anyone knows I'de appreciate it. Thanks again for the help so far.

gusblake · 01-31-2010, 09:35 PM

I think this is what Julian was talking about. To get them to stay where they are, use visibility instead of display (values for visibility are "visible" and "hidden").