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

IMHO.WS (https://www.imho.ws/index.php)

- Веб-программирование (https://www.imho.ws/forumdisplay.php?f=29)

- - Плавное увелечение картинки (HTML, CSS, JavaScript) (https://www.imho.ws/showthread.php?t=102877)

Naked

25.04.2006 17:03

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

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

savad

25.04.2006 22:44

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

shurik90

05.05.2006 18:19

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

BorLase

06.05.2006 11:40

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

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

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

Kvarx

06.05.2006 16:28

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

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

Hubbitus

09.05.2006 17:43

Цитата:

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

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

Kvarx

09.05.2006 21:03

Hubbitus,

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

BorLase

09.05.2006 22:54

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

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

Hubbitus

10.05.2006 10:25

Цитата:

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

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

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

Saruman

10.05.2006 17:25

Цитата:

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

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

Hubbitus

11.05.2006 10:22

Цитата:

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

11.05.2006 13:33

Цитата:

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

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

Kvarx

11.05.2006 14:31

Цитата:

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

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

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

Цитата:

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

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

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

Hubbitus

11.05.2006 15:12

Цитата:

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

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

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

Цитата:

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

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

Naked

11.05.2006 16:57

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

BorLase

11.05.2006 18:49

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

Код HTML:

<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

12.05.2006 12:17

Поправочка в догонку

Цитата:

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

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

Код:

<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

Часовой пояс GMT +4, время: 20:43.