TIPS OF WEB: грузим без динамы, динамим, чтобы не грузить!

Sevranty

Спецвыпуск Xakep, номер #028, стр. 028-114-2

img.alt="Уменьшить картинку";

img.width=widthbig;

img.height=heightbig;

} else {

img.src=filesmall;

img.alt="Увеличить картинку";

img.width=widthsmall;

img.height=heightsmall;

}

return false;

}

//--></SCRIPT>

Вот маленький скриптик с семью параметрами. Первый параметр - это идентификатор картинки. Следующие три параметра - это свойства маленькой картинки. А последние три параметра - свойства большой картинки. Все эти параметры мы передаем из события onClick на ссылке, которую мы вешает на картинку.

<a href="JavaScript://" onClick="return ReSize(document.gallery_a,'/xakep/a-002/img1_small.gif',60,60,'/xakep/a-002/img1_big.gif',300,300);" style="cursor:hand"><img src="/xakep/a-002/img1_small.gif" width="60" height="60" border="0" alt="Увеличить-Уменьшить" name="gallery_a"></a>

Что приятно, даже если у тебя дерьмовый диалап, то при клике ты будешь наблюдать не пустоту, а растянутую превьюшку. Кстати, заодно с картинкой и ее размерами мы меняем поле ALT, что повышает юзабилити.

TIPSA 4. РАЗВОРОТ СПИСКОВ НА СТРАНИЦЕ БЕЗ ПОДГРУЗКИ

Полезная финтифлюшка для сложных страниц. Показывает список. Если кликнуть на элемент оного, то развернется связанный элемент. Для начала опишем стиль, который мы присвоим открывающимся div'ам, для этого в CSS должен быть подобный типс.

<style type="text/css">

<!--

.tip {display: none; padding-top: 3px; text-decoration: none;}

-->

</style>

После этого идет довольно простой стиль, в котором, после детекта браузера, на событие меняем видимость блока.

<script>

<!--

www = (document.getElementById) ? true : false;

var opened=0;

function list(idname){

var div;

if(!(www||ie4))return;

if(www){

div=document.getElementById(idname);

}else{

div=document.all[idname];

}

if(opened){

opened.style.display='none';

if(opened==div){opened=0;return false;}

}

div.style.display='block';

opened=div;

return false;

}

//-->

</script>

А вот здесь в линке мы вызываем нашу функцию с параметром, соответствующим id нашего дива:

<li><a href="#" onclick="return list('info1')" class="hdr">Подсказка 1</a><div id="info1" class=tip style="margin: 1 0 0 10px;"><table width="300" border="0" cellpadding="5" cellspacing="1" bgcolor="#CC0000"><tr><td bgcolor="#FFFFE4">

<p align=justify>

<img src="/xakep/a-002/img1_small.gif" width="60" height="60" border="1" alt="" align="left"><b>БЛОК 1</b><br> Текст первой подсказки. Текст первой подсказки. Текст первой подсказки. Текст первой подсказки. Текст первой подсказки. Текст первой подсказки. Текст первой подсказки.

<br><br clear="all">

</td></tr></table></div>

Саму подсказку можно оформить как угодно, например, вставить любую графику и прочую мишуру. Что сделал я, ты видишь на рисунке.

TIPSA 5. ВСПЛЫВАЮЩАЯ ПОДСКАЗКА

Это довольно нетривиальное решение, можно было и проще, но с абсолютным позиционированием, что смотрится кисло. А можно и так, как представлено ниже, правда, скриптов прибавится, но их ты всегда сможешь скачать у меня всего за $99,99... Шучу! Не бейте, не бейте!