<MyRusakov.ru />

JavaScript, jQuery и Ajax с Нуля до Гуру

JavaScript, jQuery и Ajax с Нуля до Гуру

Видеокурс "JavaScript, jQuery и Ajax с Нуля до Гуру" научит Вас "вдыхать жизнь" в страницы, делая их с потрясающими эффектами и максимальным удобством для пользователя.

Курс научит Вас писать скрипты на JavaScript, а также обучит использованию библиотеки jQuery и технологии Ajax.

Практически любой красивый сайт (с красивыми галереями изображений, слайдерами, плавными переходами и так далее) использует jQuery. А практически на любом серьёзном сайте вовсю используется технология Ajax, которая делает работу с сайтом максимальной удобной.

Поэтому курс "JavaScript, jQuery и Ajax с Нуля до Гуру" Вам просто необходим, если Вы хотите создавать по-настоящему достойные сайты.

Подробнее
Подписка

Подписавшись по E-mail, Вы будете получать уведомления о новых статьях.

Подписка Подписаться

Добавляйтесь ко мне в друзья ВКонтакте! Отзывы о сайте и обо мне оставляйте в моей группе.

Мой аккаунт Мой аккаунт Моя группа
Опрос

Каким движком Вы предпочитаете пользоваться?

Объект Image в JavaScript

Объект Image в JavaScript

Для работы с изображениями в JavaScript используется объект Image. Данный объект является очередным свойством объекта Document. И о том, как управлять изображениями через JavaScript, Вы узнаете из этой статьи.

Конструктор у объекта Image практически не используется (да и он классический). Методы у него присутсвуют (наследуются от объекта Object), но ничего интересного из себя не представляют. Поэтому в этой статье мы разберём самое важное в объекте Image - его свойства.

Прежде чем начать обрабатывать изображение необходимо его создать. Разумеется, создание происходит в HTML, поэтому знакомый Вам тег:

<img name = 'img' src = 'image1.jpg' />

Теперь мы можем обратиться к этому объекту через JavaScript:

document.write(document.img)

Как видите, обращение к объекту Image очень простое: сначала пишится объект Document, а затем его свойство с именем объекта Image (это имя мы задали в атрибуте "name"). В результате выполнения этого скрипта Вы увидите: "[object HTMLImageElement]". Это сработал метод toString(), но, впрочем, забудьте, что я сейчас написал - это тема будущих статей.

ВНИМАНИЕ: Необходимо соблюдать очень важное правило: нельзя обращаться к тому, чего ещё не существует. Какой вывод из этого можно сделать? Очень простой: пока не создано изображение, его нельзя обрабатывать. То есть Вы не можете запустить приведённый здесь скрипт ДО того, как появилось изображение. На это очень часто напарываются новички, поэтому не забывайте, что прежде чем работать с чем-либо, необходимо для начала это создать.

Теперь переходим к свойствам. Начнём со свойства border. Данное свойство отвечает за размер рамки вокруг изображения. Разумеется, мы его можем и прочитать, и записать. Давайте изменим размер рамки нашего изображения:

document.img.border = 5;

Разумеется, есть два свойства, отвечающие за ширину и высоту изображения. Это свойства width и height объекта JavaScript. Давайте их выведем:

document.write("Ширина изображения - " + document.img.width + "<br />");
document.write("Высота изображения - " + document.img.height);

И последнее свойство, которое мы рассмотрим - это src. Данное свойство отвечает за путь к картинке. И давайте с Вами решим такую задачу: есть картинка и есть кнопка. При нажатии на кнопку картинка меняется.

<script language = 'javascript'>
  var flag = 0;
  function changeImage() {
    if (flag == 0) {
      document.img.src = 'image1.jpg';
      flag = 1;
    }
    else {
      document.img.src = 'image2.jpg';
      flag = 0;
    }
  }
</script>
<img name = 'img' src = 'image1.jpg' />
<form>
  <input type = 'button' value = 'Сменить изображение' onClick = 'changeImage()' />
</form>

Теперь поясню, как работает данный скрипт. Сначала мы описываем саму функцию. Создаётся переменная flag. Это некий флаг, который переключается при смене изображения. Дальше идёт функция changeImage(), которая и занимается сменой изображения. Изображению присваивается тот путь к картинке, которому соответствует флаг. После смены изображения меняется и значение флага (чтобы в следующий раз было другое изображение). За пределами скрипта создаётся форма с одной кнопкой. Здесь обратите внимание на атрибут "onClick". Этот атрибут отвечает за обработку события "Клик мыши по кнопке". О событиях мы поговорим отдельно, но здесь достаточно понять принцип. В значении атрибута "onClick" стоит функция, которую надо выполнить при нажатии на кнопку. Таким образом, у нас и меняется изображение. Надеюсь, что понятно объяснил.

Остальные свойства объекта Image в JavaScript используется достаточно редко, поэтому я их опустил. А самое важное я Вам поведал. В следующей статье мы перейдём к следующему свойству объекта Document - объект Link.

Удачи!

Копирование материалов разрешается только с указанием автора (Михаил Русаков) и индексируемой прямой ссылкой на сайт (http://myrusakov.ru)!

Добавляйтесь ко мне в друзья ВКонтакте: http://vk.com/myrusakov.
Если Вы хотите дать оценку мне и моей работе, то напишите её в моей группе: http://vk.com/rusakovmy.

Если Вы не хотите пропустить новые материалы на сайте,
то Вы можете подписаться на обновления: Подписаться на обновления

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

Порекомендуйте эту статью друзьям:

Если Вам понравился сайт, то разместите ссылку на него (у себя на сайте, на форуме, в контакте):

  1. Кнопка:

    Она выглядит вот так: Как создать свой сайт

  2. Текстовая ссылка:

    Она выглядит вот так: Как создать свой сайт

  3. BB-код ссылки для форумов (например, можете поставить её в подписи):

Комментарии (30):

Alim_(I) Alim_(I) 04.05.2011 21:44:52

У меня не получается, у меня вместо картинки в таблицах двух, типо инпута такое "Рисунок" в двух. Можете помочь чем-нибудь?

Ответить

Admin Admin 05.05.2011 12:29:39

Не понятен вопрос.

Ответить

Alim_(I) Alim_(I) 05.05.2011 17:41:13

Ладно разобрался уже...

Ответить

brussens brussens 29.10.2011 01:20:42

Блин, и пришёл же такой набор слов в голову))))

Ответить

star05 star05 19.05.2012 16:58:32

У меня не работает последний на странице скрипт. Видимо, по причине того, что из тела скрипта не работает ссылка на изображение. Ссылка на изображения работает только из кода html вне скипта. Еще подскажите, пожалуйста, где почитать как внутри языка Java в ссылках на изображения подниматься на папку вверх (если картинки лежат не в одной папке с html-файлом).

Ответить

Admin Admin 19.05.2012 17:51:57

Чтобы работало изображение, надо указывать правильно путь. Если скрипт находится в другом месте (например, в какой-нибудь папке), то путь будет совсем другим. А про Java на данном сайте ничего вообще нет, никогда не было и вряд ли будет.

Ответить

star05 star05 19.05.2012 21:04:13

я не знал, что JavaScript и Java - это разные языки) Имел ввиду JavaScript

Ответить

Admin Admin 19.05.2012 21:44:15

Что касается подъёма вверх по папкам, то он аналогичен подъёму вверх в HTML, то есть "../".

Ответить

star05 star05 20.05.2012 10:56:36

Спасибо!

Ответить

Rus_wk Rus_wk 10.02.2015 11:26:16

По поводу языка Java вот хороший ресурс. http://javarush.ru/ Сделано по принцыпу комикса, но зато как и на этом сайте: от простых вещей постепенно к более сложным

Ответить

soffrick soffrick 25.05.2012 11:37:02

Обязательно ли заключать input в форму? <form> <input type = 'button' /> </form>

Ответить

Admin Admin 25.05.2012 17:49:37

Нет, но лучше так не делать.

Ответить

Tao Tao 28.02.2013 14:01:31

Здравствуйте, Михаил. Подскажите, можно ли использовать в качестве свойства src строковую переменную? Спасибо.

Ответить

Admin Admin 28.02.2013 21:29:29

src и подразумевает только строку.

Ответить

Tao Tao 28.02.2013 21:44:39

я имел ввиду имя переменной, то есть например часть кода: st = 'image/' + '1.jpg'; document.img.scr = st; уже разобрался, понял что можно. не получилось с первого раза, потому что писал имя переменной в кавычках. вопрос другой возник, правда не подходит для этого топика. как вывести на "экран" переменную полученную в javascript в html. (знаю что не понятно, но как смог сформулировал :) ) Например переменную st='ыыы' нужно вписать в <span>бе-бе-бе-</span> чтобы получилось: бе-бе-бе-ыыы Как это сделать?

Ответить

Admin Admin 28.02.2013 21:49:04

st="бе-бе-бе"; st = st + "ыыы";

Ответить

Tao Tao 28.02.2013 21:54:43

не правильно поняли. как вывести переменную st в блоке span.

Ответить

Admin Admin 01.03.2013 10:55:04

Обратиться к блоку сначала нужно, для этого можно поставить у него id. Далее у этого блока есть свойство innerHTML, вот его и надо менять, тогда и будет меняться содержимое <span>.

Ответить

Tao Tao 01.03.2013 13:48:12

Спасибо, теперь понял.

Ответить

sergkosm sergkosm 07.04.2013 01:18:18

Привет, Михаил! по поводу переключения картинок при нажатии. Как сделать так, чтобы в переключении участвовало три изображения. Нужно что-то делать с переменной flag? добавлять условия?

Ответить

Admin Admin 07.04.2013 11:15:12

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

Ответить

sergkosm sergkosm 10.04.2013 01:50:54

<script type="text/javascript"> var flag = 0; function changeImage() { if (flag == 0) { document.img.src = 'fo.png'; flag = 1; } else { if(flag == 1) { document.img.src = 'fo1.png'; flag = 0.5; } else { document.img.src = 'globe.png'; flag = 0; } } } </script> Я пока попробовал без массива, такой код может быть? У меня работает, все три картинки при щелчке сменяются.

Ответить

Admin Admin 10.04.2013 11:14:19

Можно, но если потребуется 10 картинок, то замучаетесь подобным образом делать.

Ответить

vanyavi vanyavi 10.06.2013 21:15:28

У меня не сменяется изображение при нажатии на кнопку, где ошибка? <script language = 'javascript'> var flag = 0; function changeImage() { if (flag == 0) { document.img.src = 'C:\Users\ноутбук\Desktop\ихображения\барсик\1 (2).jpg'; flag = 1; } else { document.img.src = ''C:\Users\ноутбук\Desktop\ихображения\барсик\1.jpg'; flag = 0; } } </script> <img name = 'img' src = 'C:\Users\ноутбук\Desktop\ихображения\барсик\1.jpg' /> <form> <input type = 'button' value = 'Сменить изображение' onClick = 'changeImage()' /> </form>

Ответить

Admin Admin 10.06.2013 21:17:25

Пути надо указывать относительные и уж тем более без русских символов и пробелов.

Ответить

Tao Tao 10.10.2013 14:49:54

Михаил, подскажите. У объекта есть свойство background-image. Я хочу, чтобы путь к файлу (url) можно было задавать с помощью переменой. Как это сделать? path = 'image/im1.jpg'; document.getElementById('im1').style.background-image = 'url(path)'; Этот код не работает, потому что ищется картинка path.

Ответить

Admin Admin 10.10.2013 21:04:49

...bacgkground-image = path; - вот так попробуйте.

Ответить

Павел Павел 16.10.2013 15:09:51

Долго мучился с последним скриптом. Оказалось слишком тщательно списал и первый и второй скрипт, и пока не поменял в первом img name = 'img' на img name = 'img1' у второго скрипта замена не работала.

Ответить

Rus_wk Rus_wk 10.02.2015 11:37:28

Исправьте, пожайлуста, в предпоследнем абзаце "...чтобы в следующий раз было друое изображение..." слово "другое"

Ответить

Eric Eric 21.02.2015 21:45:27

Не работает в HTML5. Какой код должен быть для него?

Ответить

Для добавления комментариев надо войти в систему.
Если Вы ещё не зарегистрированы на сайте, то сначала зарегистрируйтесь.