Ноя 27

Программируем слайдер на jQuery и JavaScript

Я написал новую заметку для сайта "Уголок веб-разработчика" про то, как запрограммировать простейший слайдер на jQuery: http://codething.ru/jq_slider.php. Надеюсь кому-нибудь пригодится!

Мар 03

Скрипт увеличивающейся при наведении картинки

Скрипт увеличивающейся при наведении картинки

При наведении мышкой картинка увеличивается. Довольно часто необходимо решать эту задачу, особенно часто это используется в выдаче рекламных блоков. Желательно, также, чтобы картинка при наведении мышки увеличивалась, но не ломала верстку страницы.

Рассмотрим решение данной задачи с помощью JavaScript-скрипта и библиотеки jQuery.

<html>
 <head>
  <script src="jquery.js"></script>
 </head>
 <body>
  <img src='small.png' onmouseover='bigImage(this, "big.png");' align="left"/>
  <p>Какой-то текст, показывающий, что увеличенное изображение не ломает верстку, а размещается поверх содержимого страницы.</p>

  <div id="big" style="display: none; top: 0px; left: 0px; position: absolute; z-index: 1000;"></div>
  <script>
  function bigImage(obj, fname)
  {
   $("#big").css("left", $(obj).offset().left);
   $("#big").css("top", $(obj).offset().top);
   $("#big").html("<img src='"+fname+"' onmouseout='bigImageHide();'/><br/>");
   $("#big").show();
  }

  function bigImageHide()
  {
   $("#big").hide();
  }
  </script>
 </body>
</html>

Исходная картинка small.png загружается традиционно средствами HTML, но к ней мы добавим событие onmouseover (срабатывающее при наведении мышки), которое будет вызывать написанную нами функцию bigImage();

Для вывода увеличенной картинки на экран, создадим контейнер big, задав ему абсолютное позиционирование поверх других элементов сайта (z-index: 1000).

В функцию bigImage() передаются два параметра - информация о текущем элементе и название увеличенной картинки.

Функция bigImage() задает координаты контейнера big такими же, как и у уменьшенной картинки, после чего в контейнер размещается HTML-код увеличенного изображения. Увеличенное изображение содержит событие onmouseout (срабатывает, когда мышка ушла с объекта), по которому вызывается функция bigImageHide() - скрывающая с экрана контейнер big.

Полезный совет по использованию примера скрипта увеличения картинки:

  • Если вам надо передать ссылку, просто передавайте её третьим параметром в функции bigImage(). В саму функцию bigImage() также следует внести изменения, добавив в HTML-выдачу соответствующий тег <A> с параметром ссылки.

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

Фев 02

Вебдванольный интерфейс от Twitter

Если хотите, чтобы ваши сайты смотрелись модно и современно, то следует обратить внимание на framework Bootstrap от Twitter. Удобная вещь для построения пользовательских интерфейсов в стиле Веб 2.0, с использованием HTML 5, CSS 3 и Javascript.

Взять можно отсюда: http://twitter.github.com/bootstrap/index.html, скрипты лицензированы под Apache License v2.0.

Примеры из раздела Examples не самые удачные, их можно не смотреть, а лучше посмотреть примеры и прочитать документацию из разделов верхнего меню.

При использовании стоит учитывать тот факт, что Bootstrap не будет  работать корректно в старых браузерах, например,  таких как Opera 9 или IE 6.

Янв 16

Новый год — новый материал на сайт

Часто, ориентируясь на материалы сайта codething.ru, пользователи писали что у них не выходит сделать загрузку JavaScript'а в режиме AJAX. Ничего не выходит, мол. На самом деле, проблема очень просто решается с помощью библиотеке jQuery, а как именно, я и показал в новом материале:

http://codething.ru/ajax_script.php

Следующий материал выйдет скоро (не придется ждать и года) и будет посвящен передаче через протокол JSON.

p.s. Всех поздравляю с новым наступившим 2012-м годом!