Форум

ksa · #11 (**permalink**) 10.08.2011, 13:36

Теоретически может сработать такой вариант...

<!DOCTYPE html>
<html>
<head>
<style type="text/css">
* {
	margin: 0;
	padding: 0;
}
img {
	border: 0;
}
.imgStyle {
	height:60px;
}
#data {
	width: 500px;
	word-spacing: 0;
}
</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>

Но у меня ИЕ7 не желает такое поддерживать...

ksa · #12 (**permalink**) 10.08.2011, 13:39

Или вот так...

<!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>

aleha · #13 (**permalink**) 10.08.2011, 15:27

Класс, я их выстроил в одну большую строку. И на выходе получил одну большую строку, которую не ограничил даже стиль таблицы.
На вскидку приписал туже ширину <td> в котором лежат все картинки и о чудо, они стали переноситься на новую строку и теперь там нет дырок.
Наверно, то из-за чего это всё произошло останется в тайне.

ksa · #14 (**permalink**) 10.08.2011, 15:32

Сообщение от aleha

о чудо, они стали переноситься на новую строку и теперь там нет дырок

Вот что делает крест животворящий! (с)

Форум

Справочник

Discord чат

Курсы javascript