Плавное увелечение картинки (HTML, CSS, JavaScript)

[Naked]

Народ вопрос такой: есть сайт __http://studionw.ru/ , на этой страничке:
__http://www.studionw.ru/port/index.htm есть эффект при наведении на миниатюрную картинку она становится немного больше, при этом остальные раздвигаются... На этом сайте это реализовано на флеше, как можно это сделать на связке html, css и javascript, чтобы это не тормозило даже на модеме (ну или не очень сильно тормозило) и эффект был приблизительно такой же.
Спасибо

[savad]

Как один из возможных вариантов:
- таблица, в каждой ячейки по мини-картинки,
- в onload тега body, загрузка соответствующих увеличенных картинок (хотя их можно использовать и как мини, установив соответствующий размер),
- обработка событий картинок onmouseover и onmouseout, где меняем картинки (увеличиваем размер), изменяем размер ячейки, а плавность достигаем путем использования window.setInterval.

Проблема в том что во флеше при растягивании изображение не теряет чёткости, т.к. векторное. Здесь же у тебя будет резкая потяря качества при уменьшении/увеличении. Я когда то делал похожее и мне не понравилось, пришлось сделать что при наведении мышки поверх просто показывалась чуть большая картинка.

[BorLase]

да можно и одной обойтись

берем картинку 150*150, к примеру
в таблице показываем ее с width/height 75*75, к примеру
на onMouseOver или меняем атрибуты на 150 сразу, или последовательно 75-100-125-150 - получаем иллюзию роста картинки

дешево и сердито

[Kvarx]

Borlase,
Я вот замечал, что браузеры не умеют нормально уменьшать картинки. Во всяком случае для данных параметров не проверял, но для большего коэффицента уменьшения стороны получается просто убожище, по сравнению с тем, если уменьшить в Фотошопе.

От авторав оффлайне было предложение, чтоб загонять 3-4 картинки разных размеров в gif. Но тоже есть свои недостатки в этом способе. Во-первых вручную такие запаришься делать, надо как-то автоматизировать процесс. А во вторых, gif для фоток, помоему, больше весить будет, чем jpeg.

[Hubbitus]

Kvarx:
А во вторых, gif для фоток, помоему, больше весить будет, чем jpeg.

Весить-то меньше будет, только ГИФ для фоток, с его 256 цветами... это какие же фотки-то???

[Kvarx]

Hubbitus,

Я имел ввиду, что если полноченно фотку перегнать(не 256 цветов) в ГИФ, то у меня лично ГИФ получался больше так.

[BorLase]

по поводу уменьшения... ну, не знаю - я себе быстренько пример сделал, посмотрел - вродь бы приемлемо...

что до размеров - будет больше gif или jpeg - это от картинки зависит. у них разные алгоритмы сжатия, поэтому одна пикча будет больше весить гифкой, другая, наоборот - жпегом. тут нет однозначного ответа.

[Hubbitus]

Kvarx:
Я имел ввиду, что если полноченно фотку перегнать(не 256 цветов) в ГИФ

То она станет максимум 256 цветов максимум, ограничение ГИФ-формата. ИМХО, для фоток это не приемлемо.


А что касается уменьшения картинок браузерами, опять же ИМХО конечно, но помоему они весьма неплохо с этим справляются, вот, специально попробовал http://ru.bir.ru/imgtest/ Помоему весьма прилично смотрится во всех браузерах, смотрел в 3 основных.

[Saruman]

Hubbitus:
256 цветов максимум, ограничение ГИФ-формата

кто ж тебе сказал-то такое? А это что?

[Hubbitus]

Saruman:
кто ж тебе сказал-то такое? А это что?

Да, выпендрились ребята, действительно интересный эксперимент, весьма любопытно, спасибо.
Но, даже они не рекомендуют это использовать нормально:

While using more than 256 colors in GIF is in most cases a bad practice, and should be limited to certain technical cases where extreme size can be tolerated, a statement that the GIF image file format is limited to 256 colors is simply false.

К тому же сайт библиотеки http://angif.slashusr.org/ недоступен, поэтому я так и не вижу возможности создавать такие ГИФы (а попробовать было бы интересно)

[Saruman]

Hubbitus:
поэтому я так и не вижу возможности создавать такие ГИФы

Ну вот в GIMPе эксперимента ради попробовал - создает без проблем труколорный гиф, полагаю, Photoshop тоже создаст. А не рекомендуют только по причине extreme size, так что в случае небольших картинок, интранета и т.п. - думаю, проблем нет. Формат прописан в спецификации гифа, посему суть стандарт, а не грязный хак.

[Kvarx]

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

полагаю, Photoshop тоже создаст.

Да, я пробовал такое делать именно в Photoshop'e

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

опять же ИМХО конечно, но помоему они весьма неплохо с этим справляются

С лилиями действительно не плохо смотриться, но я имел дело с фотками, которых люди, и в этом случае мне не понравилось.

[Hubbitus]

Saruman:
Ну вот в GIMPе эксперимента ради попробовал - создает без проблем труколорный гиф, полагаю, Photoshop тоже создаст. А не рекомендуют только по причине extreme size, так что в случае небольших картинок, интранета и т.п. - думаю, проблем нет.

Ладно, ладно, сказал же что не знал, не прав, могут быть по стандарту больше - значит могут, я же не спорю! Почему-то всегда считал что ГИФ ограничен 256 цветами...

Ну зато то что я у тебя процитировал дает ответ на другое вполне ясно, что полноцветный ГИФ для фотки будет нааамного больше JPGа.

Kvarx:
С лилиями действительно не плохо смотриться, но я имел дело с фотками, которых люди, и в этом случае мне не понравилось.

Ну нет так нет, я лишь решил попробовать. Много опытов не ставил - взял первую попавшуюся картинку из винды.

[Naked]

хм, сделал, как было предложено во 2 посту, т.е. через яваскрипт, но никак не могу добится действия функции window.setInterval все ставлю, есть задержка, но потом сразу рисуется большая фотка.... т.е. плавности не добится...
Вот пример сделал (без плавности, но с плавностью было тоже самое) __http://spb0969.ru/test/test.php

[BorLase]

Забирай... для IE работает точно, FF что-то не сильно... но дальше уже сам мучайся

<html>
<head>
<script language="JavaScript">
    /*
    * This function will not return until (at least)
    * the specified number of milliseconds have passed.
    * It uses a modal dialog.
    */
     function pause(numberMillis) {
        var dialogScript = 
           'window.setTimeout(' +
           ' function () { window.close(); }, ' + numberMillis + ');';
        var result = 
// For IE5.
         window.showModalDialog(
           'javascript:document.writeln(' +
            '"<script>' + dialogScript + '<' + '/script>")');

/* For NN6, but it requires a trusted script.
         openDialog(
           'javascript:document.writeln(' +
            '"<script>' + dialogScript + '<' + '/script>"',
           'pauseDialog', 'modal=1,width=10,height=10');
 */
     }

  function big(a){
    a.width=55; pause(100); 
	a.width=60; pause(100); 
	a.width=65; pause(100); 
	a.width=70; 
  }
  
  function small (a){
    a.width=50;
  }
</script>
</head>
<body>
<table><tbody>
  <tr>
   <td>
     <img src="test.php_files/1.jpg" onmouseover="big(this);" onmouseout="small(this);" border="0" width="50">
   </td>
   <td>
     <img src="test.php_files/2.jpg" onmouseover="big(this);" onmouseout="small(this);" border="0" width="50">
   </td>
   <td>
     <img src="test.php_files/4.jpg" onmouseover="big(this);" onmouseout="small(this);" border="0" width="50">
   </td>
  </tr>
</tbody></table>
</body>
</html>

[Hubbitus]

Naked:
хм, сделал, как было предложено во 2 посту, т.е. через яваскрипт, но никак не могу добится действия функции window.setInterval все ставлю, есть задержка, но потом сразу рисуется большая фотка.... т.е. плавности не добится...

Можно добиться, вот примерчик:

<script language="JavaScript">
var steep = 1;//По сколько пикселей
var timeout = 10;//Милисекунд, скорость.

function imgResize(obj, reszTo){
	if (!window["reszdObj" + obj.name]) robj = window["reszdObj" + obj.name] = obj;
	else robj = window["reszdObj" + obj.name];
robj.reszTo = reszTo;
robj.delta = ((obj.width > reszTo)? -steep : steep);
robj.My_reSize = function (objname){
	ths = window["reszdObj" + objname];
		if ( Math.abs(ths.width - ths.reszTo) > window.steep ){
		ths.width += ths.delta;
		setTimeout(window["reszdObj" + objname].My_reSize, window.timeout, objname);
		}
	}
robj.My_reSize(obj.name);
}
</script>

<table>
	<tr>
		<td><img src="1.jpg" border=0 width=50 name="i1" onMouseOver="imgResize(this, 100);" onMouseOut="imgResize(this, 50);"></td>
		<td><img src="2.jpg" border=0 width=50 name="i2" onMouseOver="imgResize(this, 100);" onMouseOut="imgResize(this, 50);"></td>
		<td><img src="4.jpg" border=0 width=50 name="i3" onMouseOver="imgResize(this, 100);" onMouseOut="imgResize(this, 50);"></td>
	</tr>
</table>

Посмотреть можно здесь http://ru.bir.ru/imgtest/resizetest.htm

Не буду просто изменять, если кто успел уже посмотреть, посему в догонку исправление, там нужно:

setTimeout(window["reszdObj" + objname].My_reSize, window.timeout, objname);

Что правильно по стандарту и нормально работает в ФФ, но криво в ИЕ, заменить для совместимости на:

setTimeout("window.reszdObj" + objname + ".My_reSize('" + objname + "');", window.timeout);

Так проверил, работает в ИЕ, ФФ и Опере.
Ну и исправленный вариант в действии http://ru.bir.ru/imgtest/resizetest1.htm