Динамическая загрузка картинок для анонсов с помощью Ajax, jQuery и PHP

Владимир | | Ajax, CSS, HTML, JavaScript, PHP, Web разработка.

ajax_image_load

Идею этого эффекта я нагло стырил позаимствовал на сайте jomsocial. Там есть блоки (под кнопкой Learn More) с анонсами. При наведении мышки на эти блоки к ним добавляется картинка.

Реализовать такой эффект можно разными способами. Например, можно теги картинок вставить прямо в страницу и прятать/показывать их с помощью JavaScript.

Основное достоинство такого варианта – отсутствие задержек при появлении картинок (если конечно вы подождали пока страница полностью загрузится).

Но при этом увеличивается размер страницы и не факт, что посетитель вообще будет эти картинки рассматривать.

Поэтому я решил привести пример своей реализации этого эффекта.

Картинки будут загружаться только если посетитель наведет мышку на какой-нибудь блок с аннотацией. Естественно, что загрузка будет выполняться только один раз.

Если посетитель наведет курсор мышки на другую аннотацию, будет загружена картинка для неё, а предыдущая – исчезнет.

Говорят, что одна картинка стоит тысячи слов, поэтому я сделал демонстрационную страничку для этого примера.

Demo

Сразу же выкладываю архив с исходниками.

Source

А теперь разберем как это все работает.

Допустим у нас есть страница (index.html) со следующей разметкой.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
        "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">

<head>
    <title>Пердпросмотр с картинками</title>

<meta http-equiv="content-type" content="text/html;charset=utf-8" /> <meta http-equiv="Content-Style-Type" content="text/css" /> <link rel="stylesheet" type="text/css" media="screen" href="styles.css" /> </head> <body> <div id="content"> <div id="leftCol"> <div id="butterfly" class="annotaionBlock">…</div> <div id="tiger" class="annotaionBlock">…</div> <div id="elephant" class="annotaionBlock">…</div> <div id="wolf" class="annotaionBlock">…</div> <div id="fish" class="annotaionBlock">…</div> </div> <div id="rightCol"> <div id="whale" class="annotaionBlock">…</div> <div id="flamingo" class="annotaionBlock">…</div> <div id="bear" class="annotaionBlock">…</div> <div id="dog" class="annotaionBlock">…</div> <div id="cat" class="annotaionBlock">…</div> </div> </div> </body> </html>

Сразу обратите внимание на блок content. Он состоит из двух колонок (leftCol и rightCol) в которых размещены аннотации.

Всем аннотациям присвоен CSS класс annotaionBlock и уникальный id. Этот id будет использоваться для определения нужной картинки.

Сами аннотации представляют собой обычный текст с HTML разметкой или без неё.

Теперь напишем JS скрипт, который будет подгружать картинки.

<script type="text/javascript" src="jquery-1.3.1.min.js"></script>
<script type="text/javascript">
$(function() {
    $('.annotaionBlock').hover(
        function(event) {
            var curAnnotation = $(this);
            var curId = curAnnotation.attr('id');
            var annotImg = curAnnotation.children('.annotImg');
            if (annotImg.length == 0) {
                $.get('getimage.php', {img : curId}, function(data) {
                    annotImg = $('<div class="annotImg"><img src="' + data + '" alt="Картинка" /></div>').hide();
                    curAnnotation.append(annotImg);
                    $('.annotImg').not(this).slideUp('fast');
                    annotImg.slideDown('fast');
                });
            }
            else {
                $('.annotImg').not(annotImg).slideUp('fast');
                annotImg.slideDown('fast');
            }
        },
        function() {
        }
    );
});
</script>

Прежде всего мы подключаем библиотеку jQuery и пишем функцию, которая будет вызвана сразу после загрузки страницы (строки 3-25).

В этой функции мы объявляем обработчик события hover для всех элементов страницы с классом annotaionBlock, т.е. для всех наших аннотаций.

В качестве параметров этому обработчику передается 2 функции. Первая будет вызвана при появлении мышки над блоком, вторая – при выходе из него.

Вторую функцию (строки 22-23) мы оставляем пустой, т.к. вставлять и прятать картинки будем в первой.

Алгоритм работы.

1) При появлении курсора над аннотацией, сохраняем указатель на неё и её id (строки 6-7).

2) Проверяем загружен ли рисунок для данной аннотации (строки 8-9) и если нет, выполняем AJAX запрос к серверному (PHP) скрипту, в параметрах которого передаем id блока (строки 10-15).

3) После получения ответа сервера создаем скрытый тег img и вставляем его в конец блока с аннотацией (строки 11, 12). После этого применяем эффект slideUp ко всем картинкам в блоках с аннотацией кроме текущей (строка 13). И с помощью эффекта slideDown показываем картинку для данной аннотации (строка 14).

4) Если картинка была вставлена раньше, то AJAX запрос мы не отправляем, а просто показываем её и прячем остальные (с помощью эффектов slideUp и slideDown, строки 18-19).

Обратите внимание. Если применять эффекты slideDown и slideUp непосредственно к тегу img картинка будет плавно изменять как вертикальный, так и горизонтальный размеры. Т.е. она будет «выезжать» из левого верхнего угла.
Чтобы изменялась только высота картинки нужно поместить её внутрь тега div и примерять эффекты к нему.

Серверная часть

PHP скрипт, который обрабатывает запросы на получение картинок (getimage.php) должен прочитать id запрашиваемой картинки и вернуть соответствующую ссылку.

Эти ссылки можно хранить в БД или текстовом файле, выбирать случайным образом или однозначно связать с аннотациями. Всё это зависит от конкретной ситуации. Мы ограничимся простейшим вариантом с использованием оператора switch.

$image = $_GET['img'];

switch ($image) {
    case 'butterfly': echo 'http://farm1.static.flickr.com/152/408688454_2d868d0104_m.jpg'; break;
    case 'tiger': echo 'http://farm4.static.flickr.com/3284/2507729467_915274dab3_m.jpg'; break;
    case 'elephant': echo 'http://farm3.static.flickr.com/2377/1520324747_e468eab773_m.jpg'; break;
    case 'wolf': echo 'http://farm1.static.flickr.com/177/402657323_ebf5c7ce51_m.jpg'; break;
    case 'fish': echo 'http://farm2.static.flickr.com/1084/892454941_56fd34ac3c_m.jpg'; break;
    case 'whale': echo 'http://farm3.static.flickr.com/2401/2052477420_fe7fb452b0_m.jpg'; break;
    case 'flamingo': echo 'http://farm4.static.flickr.com/3303/3557243577_3c1bab1ec3_m.jpg'; break;
    case 'bear': echo 'http://farm1.static.flickr.com/172/401014816_9d879ceac6_m.jpg'; break;
    case 'dog': echo 'http://farm1.static.flickr.com/68/215233902_0f2d1ac9e5_m.jpg'; break;
    case 'cat': echo 'http://farm3.static.flickr.com/2068/2532467266_d8b5c9ea15_m.jpg'; break;
}

Как видите, у нас есть десять аннотаций и каждой соответствует своя ссылка.

И в заключение несколько слов об оформлении страницы.

Размещение аннотаций и их внешний вид задаётся с помощью CSS стилей (файл styles.css).

Я приведу только его фрагмент, который создаёт две колонки (в архиве вы найдете полный вариант).

#content {
    width: 600px;
    margin: auto;
    text-align: justify;
}

#leftCol {
    float: left;
    width: 299px;
}

#rightCol {
    margin-left: 301px;
}

Как видите, ширину всего блока с аннотациями мы установили равной 600px. Для левой колонки указали правило float: left и ширину 299px, а для правой – отступ слева 301px (внутри этого отступа будет находится левая колонка).

Вот и всё. На мой взгляд, эффект довольно симпатичный, но подходит не для всех сайтов.

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

До встречи!

Интересно почитать

Актуально про seo и поисковые системы от SeoProfy

  • А есть ли возможность сделать такое дополнение на движке WordPress (последняя актуальная версия) ? Но , чтобы при наведении на текст картинка показывалась плавно. В примере она появляется слишком резко.
    А так отличное дополнение.

    • Скорость появления картинки можно регулировать. В первом параметре эффектов slideUp и slideDown (у меня стоит fast).

      Использовать такое дополнение можно с любым движком, а не только WordPress. Вам нужно вставить JS код в файлы вашей темы (wp-content/themes/…). Его можно добавить в начало (header.php) или конец страницы (footer.php).

  • А есть ли возможность сделать такое дополнение на движке WordPress (последняя актуальная версия) ? Но , чтобы при наведении на текст картинка показывалась плавно. В примере она появляется слишком резко.
    А так отличное дополнение.

    • Скорость появления картинки можно регулировать. В первом параметре эффектов slideUp и slideDown (у меня стоит fast).

      Использовать такое дополнение можно с любым движком, а не только WordPress. Вам нужно вставить JS код в файлы вашей темы (wp-content/themes/…). Его можно добавить в начало (header.php) или конец страницы (footer.php).

  • Спасибо, интересная штука. Как раз, кое-что подобное нужно было.

  • Спасибо, интересная штука. Как раз, кое-что подобное нужно было.

  • Serator

    Если навести курсор на блок, который близок к нижней границе окна, то часть изображения появится ниже видимой части (обрежется). Если же блок находится ровно на границе видимой части (в нижней ее части), то пользователь может и не узнать о том, что появилось изображение. Как вариант решения, сделать (опционально) возможность при появлении изображения плавную прокрутку страницы.

    + возможное появление полосы прокрутки может немного исказить верстку (но это уже скорее проблема не скрипа, а верстальщика).

    А вообще здорово, но я все жду, когда css-анимация появится в лисице и можно будет творить подобные штуки без js 🙂

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

  • Serator

    Если навести курсор на блок, который близок к нижней границе окна, то часть изображения появится ниже видимой части (обрежется). Если же блок находится ровно на границе видимой части (в нижней ее части), то пользователь может и не узнать о том, что появилось изображение. Как вариант решения, сделать (опционально) возможность при появлении изображения плавную прокрутку страницы.

    + возможное появление полосы прокрутки может немного исказить верстку (но это уже скорее проблема не скрипа, а верстальщика).

    А вообще здорово, но я все жду, когда css-анимация появится в лисице и можно будет творить подобные штуки без js 🙂

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

  • Игорь

    А у меня вот какой вопрос: зачем в этой ситуации вообще задействовать серверную часть(PHP),если к примеру список ссылок можно передавать в javascript функцию, также передавать к индекс который нужно отобразить — на выходе получим линк на картинку.
    Почему тут не можно обойтись без ajax — а просто через javascript только? Конечно-же используя jquery

    • Дело в том, что часто текст анонсов берется из базы и ссылки удобно хранить там же (т.е. PHP в любом случае используется).

      Но в принципе вы правы. Можно при создании страницы сгенерировать JS функцию и в ней массив со ссылками. Это позволит сократить количество запросов к серверу.

  • Игорь

    А у меня вот какой вопрос: зачем в этой ситуации вообще задействовать серверную часть(PHP),если к примеру список ссылок можно передавать в javascript функцию, также передавать к индекс который нужно отобразить — на выходе получим линк на картинку.
    Почему тут не можно обойтись без ajax — а просто через javascript только? Конечно-же используя jquery

    • Дело в том, что часто текст анонсов берется из базы и ссылки удобно хранить там же (т.е. PHP в любом случае используется).

      Но в принципе вы правы. Можно при создании страницы сгенерировать JS функцию и в ней массив со ссылками. Это позволит сократить количество запросов к серверу.

  • Vaness

    А как сделать,чтобы в качестве анонса был заголовок, а при наведении курсора появлялся бы не только картинка, а текст (с картинками, форматированием и пр.)

    • Точно также, вставить можно все, что угодно.
      В примере вставляется тег img (строка 11), добавьте к нему текст с тегами и он тоже появится.

  • Vaness

    А как сделать,чтобы в качестве анонса был заголовок, а при наведении курсора появлялся бы не только картинка, а текст (с картинками, форматированием и пр.)

    • Точно также, вставить можно все, что угодно.
      В примере вставляется тег img (строка 11), добавьте к нему текст с тегами и он тоже появится.

  • Увлекательно! Спасибо за материал.

  • Увлекательно! Спасибо за материал.

  • Если вам не сложно, объясните на пальцах как отделить блоги друг от друга, то есть чтоб выводился один блог.
    Желательно без использования каскадных стилей.

    Чтоб было понятнее хочу на сайте в подписе сделать случайный вывод описаний своих преподов с карикатурой (чтоб карикатура выводилась при наведении на текст.

    • Но ведь в моем примере блоки не зависят друг от друга. Каждый представляет собой div c классом annotaionBlock. Остальная разметка (вокруг блока) роли не играет. Т.е. вы спокойно можете показать один блок на странице.

      Будут блоки случайными или нет для клиентской части не важно. Это работа серверного скрипта. Привести конкретный пример я, к сожалению, не могу, т.к. тут все зависит от структуры БД. Но если будут вопросы постараюсь помочь.

  • Если вам не сложно, объясните на пальцах как отделить блоги друг от друга, то есть чтоб выводился один блог.
    Желательно без использования каскадных стилей.

    Чтоб было понятнее хочу на сайте в подписе сделать случайный вывод описаний своих преподов с карикатурой (чтоб карикатура выводилась при наведении на текст.

    • Но ведь в моем примере блоки не зависят друг от друга. Каждый представляет собой div c классом annotaionBlock. Остальная разметка (вокруг блока) роли не играет. Т.е. вы спокойно можете показать один блок на странице.

      Будут блоки случайными или нет для клиентской части не важно. Это работа серверного скрипта. Привести конкретный пример я, к сожалению, не могу, т.к. тут все зависит от структуры БД. Но если будут вопросы постараюсь помочь.

  • Отлично реализовано, сейчас jQuery как то не очень часто используется, но уверен в нем будующие веб дизайна!

    • Почему не очень часто? Это одна из самых распространенных библиотек.

  • Отлично реализовано, сейчас jQuery как то не очень часто используется, но уверен в нем будующие веб дизайна!

    • Почему не очень часто? Это одна из самых распространенных библиотек.

  • Классный блог, много полезного нашел для себя. Автор молодец, я вот начинаю изучать php и готовые примеры очень впечатляют…

  • Классный блог, много полезного нашел для себя. Автор молодец, я вот начинаю изучать php и готовые примеры очень впечатляют…

  • нуб

    прикольный скрипт прочитал, за ценил но возникла проблема при установки этого скрипта на dle 8.2 я добавил там в файл main.tpl ,блок при наведении на который должна появляться картинка и код скрипта, в директорию с темой jquery-1.3.1.min.js и getimage.php при просмотре main.tpl все нормально, и все работает а если весь сайт то при наведении ничего не происходит вот ссылка на шаблон http://letitbit.net/download/1358.c19e283072f5a2fe07e4bc2cf/Default.rar.html

    • Этот скрипт отправляет обычные AJAX запросы. Не играет роли к какому движку вы его прикручиваете.
      В вашем случае, скорее всего, нужно изменить пути к файлам или скриптам.
      Посмотрите (с помощью Firebug) какие ошибки возникают и куда уходят запросы, думаю, вы сразу поймете в чем дело 😉

  • нуб

    прикольный скрипт прочитал, за ценил но возникла проблема при установки этого скрипта на dle 8.2 я добавил там в файл main.tpl ,блок при наведении на который должна появляться картинка и код скрипта, в директорию с темой jquery-1.3.1.min.js и getimage.php при просмотре main.tpl все нормально, и все работает а если весь сайт то при наведении ничего не происходит вот ссылка на шаблон http://letitbit.net/download/1358.c19e283072f5a2fe07e4bc2cf/Default.rar.html

    • Этот скрипт отправляет обычные AJAX запросы. Не играет роли к какому движку вы его прикручиваете.
      В вашем случае, скорее всего, нужно изменить пути к файлам или скриптам.
      Посмотрите (с помощью Firebug) какие ошибки возникают и куда уходят запросы, думаю, вы сразу поймете в чем дело 😉

  • Спасибо, полезная штука.

  • Спасибо, полезная штука.

  • Евгений

    Очень полезная инфа! Спасибо.
    А как можно сделать подгрузку данных в один и тот же DIV.
    Например есть несколько ссылок, и в зависимости на какую ссылку жмёшь загружается та или иная информация в один и то же DIV

    Заранее спасибо!

  • Евгений

    Очень полезная инфа! Спасибо.
    А как можно сделать подгрузку данных в один и тот же DIV.
    Например есть несколько ссылок, и в зависимости на какую ссылку жмёшь загружается та или иная информация в один и то же DIV

    Заранее спасибо!

  • Евгений

    Здравствуйте Владимир, а можно показать на небольшом примере как это реализовать. А то я к сожалению с java пока не знаком (php освоил),а java только начинаю изучать 🙂

    • Во втором листинге нужно во строке 4 заменить '.annotaionBlock' на id вашего div'а, и изменить строку 12 на
      annotImg.appendTo(curAnnotation);
      Вроде всё 🙂

  • Евгений

    Здравствуйте Владимир, а можно показать на небольшом примере как это реализовать. А то я к сожалению с java пока не знаком (php освоил),а java только начинаю изучать 🙂

    • Во втором листинге нужно во строке 4 заменить '.annotaionBlock' на id вашего div'а, и изменить строку 12 на
      annotImg.appendTo(curAnnotation);
      Вроде всё 🙂

  • Евгений

    Здравствуйте Владимир. Вот я делаю ссылку которая запрашивает файл с сервера и выводит фотки в определённый DIV. Вот эта ссылка:
    Ремонт квартир

    Так вот, данные (id_cat) уходят в виде POST запроса.
    А как можно подобную ссылку сформировать в виде GET.

    То есть чтобы скрипт list_foto.php — принимал id_cat как $_GET['id_cat'];
    Спасибо.

  • Евгений

    Здравствуйте Владимир. Вот я делаю ссылку которая запрашивает файл с сервера и выводит фотки в определённый DIV. Вот эта ссылка:
    Ремонт квартир

    Так вот, данные (id_cat) уходят в виде POST запроса.
    А как можно подобную ссылку сформировать в виде GET.

    То есть чтобы скрипт list_foto.php — принимал id_cat как $_GET['id_cat'];
    Спасибо.

  • Евгений

    Здравствуйте Владимир. Вот я делаю ссылку которая запрашивает файл с сервера и выводит фотки в определённый DIV. Вот эта ссылка:

    Так вот, данные (id_cat) уходят в виде POST запроса.
    А как можно подобную ссылку сформировать в виде GET.

    То есть чтобы скрипт list_foto.php – принимал id_cat как $_GET['id_cat'];
    Спасибо.

  • Евгений

    Здравствуйте Владимир. Вот я делаю ссылку которая запрашивает файл с сервера и выводит фотки в определённый DIV. Вот эта ссылка:

    Так вот, данные (id_cat) уходят в виде POST запроса.
    А как можно подобную ссылку сформировать в виде GET.

    То есть чтобы скрипт list_foto.php – принимал id_cat как $_GET['id_cat'];
    Спасибо.

  • Евгений

    style=»cursor:pointer; font-size:14px» onclick='$(«#TEST_DIV»).load(«».$h.»/list_foto.php», {id_cat: «.$category['id'].»});'

    Вот ссылка — тег a убрал

  • Евгений

    style=\»cursor:pointer; font-size:14px\» onclick='$(\»#TEST_DIV\»).load(\»».$h.»/list_foto.php\», {id_cat: «.$category['id'].»});'

    Вот ссылка — тег a убрал

  • list_foto.php?id_cat=category['id']

    т.е. просто добавляете к адресу нужные данные в формате
    script.php?par_1=val_1&par_2=val_2 и т.д.

  • list_foto.php?id_cat=category['id']

    т.е. просто добавляете к адресу нужные данные в формате
    script.php?par_1=val_1&par_2=val_2 и т.д.

  • Евгений

    Да, это понятно. Просто я думал как так должно работать:
    onclick='$(«#TEST_DIV»).get(«».$h.»/list_foto.php», {id_cat: «.$category['id'].»});'

    То есть вместо load применяем get 🙂

    • А что вы хотите сделать? Почему нужен именно get запрос?

  • Евгений

    Да, это понятно. Просто я думал как так должно работать:
    onclick='$(\»#TEST_DIV\»).get(\»».$h.»/list_foto.php\», {id_cat: «.$category['id'].»});'

    То есть вместо load применяем get 🙂

    • А что вы хотите сделать? Почему нужен именно get запрос?

  • AShim

    Если быстро несколько раз наводить и убирать курсор на блок подгружаются несколько картинок одновременно. Как с таким побороться?

    • Попробуйте задать время эффекта поменьше (в миллисекундах). Например,
      $('.annotImg').not(annotImg).slideUp(100);

      • AShim

        сомнительное решение

        • Я знаю, просто проблема в том, что резко дернув мышку вы можете начать анимацию во втором блоке до того как она закончится в первом. Оборвать анимацию просто так нельзя, но можно установить свойство display: none для картинки (в принципе, это и происходит после завершения анимации). Правда я не уверен, что это решение будет правильно работать во всех браузерах.

          Кстати, с сайта jomsocial, откуда я брал идею, этот эффект убрали. Но раньше скорость появления картинок у них была выше (и багов вроде небыло), поэтому я и посоветовал время уменьшить.

  • AShim

    Если быстро несколько раз наводить и убирать курсор на блок подгружаются несколько картинок одновременно. Как с таким побороться?

    • Попробуйте задать время эффекта поменьше (в миллисекундах). Например,
      $('.annotImg').not(annotImg).slideUp(100);

      • AShim

        сомнительное решение

        • Я знаю, просто проблема в том, что резко дернув мышку вы можете начать анимацию во втором блоке до того как она закончится в первом. Оборвать анимацию просто так нельзя, но можно установить свойство display: none для картинки (в принципе, это и происходит после завершения анимации). Правда я не уверен, что это решение будет правильно работать во всех браузерах.

          Кстати, с сайта jomsocial, откуда я брал идею, этот эффект убрали. Но раньше скорость появления картинок у них была выше (и багов вроде небыло), поэтому я и посоветовал время уменьшить.

  • lance

    Воспользовался вашим эффектом в таблице. Можно как-то сделать, чтобы он охватывал всю строку таблицы, а не только отдельную колонку?

    Вот примерный код того, что у меня получилось:

    <tr>
    <td id=»someid» class=»annotaionBlock»>sometext</td>
    <td>sometext</td>
    <td>sometext</td>
    <td>sometext</td>
    <td>sometext</td>
    </tr>

    Если вписываю параметр annotaionBlock в тег tr, то картинка появляется справа от таблицы, а надо снизу по центру. Заранее спасибо.

  • Прицепить эффект к строке таблицы не проблема, вы, кстати, это и сделали, когда добавили класс annotaionBlock тегу tr.
    Вопрос в другом, как эффект должен изменить разметку таблицы?
    Где будет находиться рисунок? В новой ячейке таблицы? Или в отдельной строке?

    В моем примере создан отдельный div, но вы не можете просто так вставить div в строку таблицы, он должен быть либо в ячейке (теге td), либо для него нужно вставить дополнительную строку в таблицу с длинной ячейкой.
    <tr><td colspan=»5"><img … /></td></tr>
    Попробуйте сделать разметку таблицы со вставленной картинкой и посмотрите как будет лучше.

  • lance

    Проблема в том, что так как вы сказали не получается.
    Вот код html странички для теста:

    <script type=»text/javascript» src=»http://ajax.googleapis.com/ajax/libs/jquery/1.2.6/jquery.min.js»></script>
    <script type=»text/javascript»>
    $(function() {
    $('.annotaionBlock').hover(
    function(event) {
    var curAnnotation = $(this);
    var curId = curAnnotation.attr('id');
    var annotImg = curAnnotation.children('.annotImg');
    if (annotImg.length == 0) {
    $.get('getimage.php', {img : curId}, function(data) {
    annotImg = $('<tr class=»annotImg»><td colspan=»5"><img src=»image» alt=»image» /></td></tr>').hide();
    curAnnotation.append(annotImg);
    $('.annotImg').not(this).slideUp('fast');
    annotImg.slideDown('fast');
    });
    }
    else {
    $('.annotImg').not(annotImg).slideUp('fast');
    annotImg.slideDown('fast');
    }
    },
    function() {
    }
    );
    });
    </script>
    <table width=»200" border=»1">
    <tr class=»annotaionBlock»>
    <td>sometext</td>
    <td>sometext</td>
    <td>sometext</td>
    <td>sometext</td>
    <td>sometext</td>
    </tr>
    </table>

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

  • Посмотрите с помощью firebug разметку страницы, которая получается после вставки картинки. Может быть к картинке какие-нибудь стили применяются?

  • lance

    У тега tr каким-то образом появляется style=»display: block;».

  • Чудеса, конечно, бывают, но очень редко 🙂
    Могу сказать только, что мой код этот стиль не устанавливает. Попробуйте отключить стили вообще (если не получается определить с помощью firebug откуда этот стиль берется).

  • lance

    Вы посмотрите код, который я привёл. Это голый html+js. Именно он не работает как нужно. Стилей там ни где нет. Уже всё что можно перепробовал…
    Ну в любом случае спасибо за ответы 🙂

  • Вы привели только теги script и table, стили могут быть подключены в заголовке страницы. Но, думаю, вы это уже проверили.
    Если вышлите мне почтой весь код вашей страницы, я попробую потестировать.

  • lance

    Это и есть весь код 🙂 Я просто отключил всё лишнее. В таком виде и в любом другом наблюдается данная особенность 🙂

  • Я отправил вам пример скрипта на email.
    Но, похоже, вы указали выдуманный адрес.

  • Lance

    Я в конце ошибся. Вместо ru написал ri.

  • Отправил. Теперь, похоже, адрес правильный, во всяком случае отчет об
    ошибке мне не пришел 🙂

    • 123123123

      сколько же еще будет уменьшатся бокс? 🙂

      • Avasv

        сколько же еще будет уменьшатся бокс? :)сколько же еще будет уменьшатся бокс? :)сколько же еще будет уменьшатся бокс? :)сколько же еще будет уменьшатся бокс? 🙂

        • Asdasdasd

          сколько же еще будет уменьшатся бокс? :)сколько же еще будет уменьшатся бокс? :)сколько же еще будет уменьшатся бокс? 🙂

        • Sadasd

          похоже до бесконечности 🙂

  • Jorgemoscu

    Скажите, пожалуйста, как изменить код, чтобы подгружать сразу несколько изображений (одно под другим)?

    • Добавьте несколько тегов img (листинг 2, строки 11, 12).