Или вот так...
<!DOCTYPE html>
<html>
<head>
<style type="text/css">
* {
margin: 0;
padding: 0;
}
img {
border: 0;
}
.imgStyle {
height:60px;
}
#data {
width: 500px;
white-space: pre-line;
}
</style>
<script type="text/javascript">
function filter(costType) {
var globalCost = costType;
var imgListTD = document.getElementById("image_list");
var images = imgListTD.getElementsByTagName("img");
for (var i = 0; i < images.length; i++) {
var altText = images[i].getAttribute('alt');
if (globalCost != undefined) {
if (altText.indexOf(globalCost) != -1) {
images[i].style.display = 'inline';
totalVisible++;
}
else {
images[i].style.display = 'none';
}
}
}
}
</script>
</head>
<body>
<table id='data' border="1">
<tr>
<td id="image_list" style="text-align:center">
<img class="imgStyle "alt="costType3 cigType0" src="item1_1.jpg" /><img class="imgStyle "alt="costType3 cigType0" src="item1_1.jpg" /><img class="imgStyle "alt="costType3 cigType0" src="item1_1.jpg" /><img class="imgStyle "alt="costType3 cigType0" src="item1_1.jpg" /><img class="imgStyle "alt="costType3 cigType0" src="item1_1.jpg" /><img class="imgStyle "alt="costType3 cigType0" src="item1_1.jpg" /><img class="imgStyle "alt="costType3 cigType0" src="item1_1.jpg" /><img class="imgStyle "alt="costType3 cigType0" src="item1_1.jpg" /><img class="imgStyle "alt="costType3 cigType0" src="item1_1.jpg" /><img class="imgStyle "alt="costType3 cigType0" src="item1_1.jpg" /><img class="imgStyle "alt="costType3 cigType0" src="item1_1.jpg" /><img class="imgStyle "alt="costType3 cigType0" src="item1_1.jpg" /><img class="imgStyle "alt="costType3 cigType0" src="item1_1.jpg" /><img class="imgStyle "alt="costType3 cigType0" src="item1_1.jpg" /><img class="imgStyle "alt="costType2 cigType0" src="item1_1.jpg" /><img class="imgStyle "alt="costType2 cigType0" src="item1_1.jpg" /><img class="imgStyle "alt="costType2 cigType0" src="item1_1.jpg" /><img class="imgStyle "alt="costType2 cigType0" src="item1_1.jpg" /><img class="imgStyle "alt="costType2 cigType0" src="item1_1.jpg" /><img class="imgStyle "alt="costType2 cigType0" src="item1_1.jpg" /><img class="imgStyle "alt="costType2 cigType0" src="item1_1.jpg" /><img class="imgStyle "alt="costType2 cigType0" src="item1_1.jpg" /><img class="imgStyle "alt="costType2 cigType0" src="item1_1.jpg" /><img class="imgStyle "alt="costType2 cigType0" src="item1_1.jpg" /><img class="imgStyle "alt="costType2 cigType0" src="item1_1.jpg" /><img class="imgStyle "alt="costType2 cigType0" src="item1_1.jpg" /><img class="imgStyle "alt="costType2 cigType0" src="item1_1.jpg" /><img class="imgStyle "alt="costType1 cigType0" src="item1_1.jpg" /><img class="imgStyle "alt="costType1 cigType0" src="item1_1.jpg" /><img class="imgStyle "alt="costType1 cigType0" src="item1_1.jpg" /><img class="imgStyle "alt="costType1 cigType0" src="item1_1.jpg" /><img class="imgStyle "alt="costType1 cigType0" src="item1_1.jpg" /><img class="imgStyle "alt="costType1 cigType0" src="item1_1.jpg" /><img class="imgStyle "alt="costType1 cigType0" src="item1_1.jpg" /><img class="imgStyle "alt="costType1 cigType0" src="item1_1.jpg" /><img class="imgStyle "alt="costType1 cigType0" src="item1_1.jpg" /><img class="imgStyle "alt="costType1 cigType0" src="item1_1.jpg" /><img class="imgStyle "alt="costType1 cigType0" src="item1_1.jpg" /><img class="imgStyle "alt="costType1 cigType0" src="item1_1.jpg" /><img class="imgStyle "alt="costType1 cigType0" src="item1_1.jpg" /><img class="imgStyle "alt="costType0 cigType0" src="item1_1.jpg" /><img class="imgStyle "alt="costType0 cigType0" src="item1_1.jpg" /><img class="imgStyle "alt="costType0 cigType0" src="item1_1.jpg" /><img class="imgStyle "alt="costType0 cigType0" src="item1_1.jpg" /><img class="imgStyle "alt="costType0 cigType0" src="item1_1.jpg" /><img class="imgStyle "alt="costType0 cigType0" src="item1_1.jpg" /><img class="imgStyle "alt="costType0 cigType0" src="item1_1.jpg" /><img class="imgStyle "alt="costType0 cigType0" src="item1_1.jpg" /><img class="imgStyle "alt="costType0 cigType0" src="item1_1.jpg" /><img class="imgStyle "alt="costType0 cigType0" src="item1_1.jpg" /><img class="imgStyle "alt="costType0 cigType0" src="item1_1.jpg" /><img class="imgStyle "alt="costType0 cigType0" src="item1_1.jpg" /><img class="imgStyle "alt="costType0 cigType0" src="item1_1.jpg" />
</td>
</tr>
</table>
<input type="button" value="costType0" onClick="filter('costType0')"/>
<input type="button" value="costType1" onClick="filter('costType1')"/>
<input type="button" value="costType2" onClick="filter('costType2')"/>
<input type="button" value="costType3" onClick="filter('costType3')"/>
</body>
</html>