<MyRusakov.ru />

React JS, Redux, ES2015 с Нуля до Гуру

React JS, Redux, ES2015 с Нуля до Гуру

Данный курс - это обширный курс по JavaScript и фреймворку React, который позволит Вам с нуля создавать мощные современные, динамические JavaScript-приложения.

Вы узнаете о тонкостях работы с "профессиональным" JavaScript, а так же узнаете о нововведениях в его новый стандарт ES2015, Вы узнаете, как организовать профессиональное окружение для FrontEnd, изучите профессиональный фреймворк - ReactJS.

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

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

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

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

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

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

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

Выпадающее изображение из ссылки на JavaScript

Выпадающее изображение из ссылки на JavaScript

Описание: Сегодня я выкладываю достаточно интересный скрипт, который создаёт выпадающее изображение из ссылки на JavaScript. Вы просто наводите мышкой на ссылку и появляется соответствующее изображение, а когда уводите мышку от ссылки, изображение исчезает. Обратите внимание, что изображения накладываются поверх контента, благодаря чему не происходит никаких сдвигов и рывков. Если же кому-то нужно, чтобы изображение не накладывалось на контент, спросите в комментариях - обязательно отвечу.

Результат: Наведите курсор мыши на ссылку.

Моя бабушка (82 года) Мой дядя

Код JavaScript (вставлять между тегами <head> и </head>):

<script language = "JavaScript">
  function showLinkImage(id) {
    document.getElementById(id).style.display = "block";
  }
  function hideLinkImage(id) {
    document.getElementById(id).style.display = "none";
  }
</script>

Код HTML (вставлять между тегами <body> и </body>):

<table align="center">
  <tr>
    <td align="center" valign="top">
      <a href="#" onmouseover="showLinkImage('float_1')" onmouseout="hideLinkImage('float_1')">Моя бабушка (82 года)</a>
      <div id="float_1" style="display: none; position: absolute;">
        <img src="foto5.jpg" alt="Фото 1" />
      </div>
    </td>
    <td align="center" valign="top">
      <a href="#" onmouseover="showLinkImage('float_2')" onmouseout="hideLinkImage('float_2')">Мой дядя</a>
      <div id="float_2" style="display: none; position: absolute;">
        <img src="foto6.jpg" alt="Фото 2" />
      </div>
    </td>
  </tr>
</table>

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

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

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

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

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

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

  1. Кнопка:

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

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

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

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

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

aselka88 aselka88 21.09.2011 16:19:19

классно!спс...

Ответить

pashara pashara 08.10.2011 15:58:15

Полезно =)

Ответить

pefon pefon 02.12.2011 17:30:42

Очень полезная статья. Расскажите, как сделать так, чтобы картинка открывалась на отдельной вкладке.

Ответить

Admin Admin 02.12.2011 21:01:19

Здесь никаких скриптов не нужно. Вот код: <a target="_blank" href="images/image.jpg"><img src="images/image.jpg" alt="Картинка" /></a>

Ответить

pefon pefon 03.12.2011 12:41:04

Расскажите для самых "одарённых" например есть маркированный список. Как осуществить выпадающее изображение в этом случае. Извените за назойливость.

Ответить

Admin Admin 04.12.2011 13:10:58

Маркированный список, таблицы, контейнеры, да и вообще всё, что угодно, не имеет никакого значения. Реализуется всё аналогичным образом, а меняется лишь HTML-код.

Ответить

nikolay61 nikolay61 03.06.2012 16:45:21

доброго! при наведении на ссылку фото выпадает по ячейке слева-направо и сверху-вниз. Пример (http://ya-presch.narod2.ru/uchnvske_samovryaduvannya/nash_vipuskniki/po_rokah/) ИЛИ (http://ya-presch.narod2.ru/admin/vchitel_shkoli/). А можна сделать так чтобы снять это ограничение и фото появлялось по средине экрана.а то как-то неудобно когда ссылка появляется в какой-то стороне екрана и фото прячется. Можно его удержать не отпуская нажатую ЛКМ и стрелочками вывести для просмотра. Но не каждый сообразит. Если можна ответ на nikolay61@meta.ua Благодарю!

Ответить

Admin Admin 03.06.2012 17:00:42

http://myrusakov.ru/javascript-script-gallery.html

Ответить

nikolay61 nikolay61 03.06.2012 21:06:10

Ответ был правильным, вопрос был задан неправильно. Это для галереи исключительный скрипт.Но у меня на сайте большое количесво столбцов и строк таблицы, которые со времеем заполнятся. Пример (http://zalnikolay.narod2.ru/rodinne_derevo/). И когда наводишь на ссылку в правом нижнем углу, изображение нужно насильно вытаскивать на средину. Фотку нужно отвязать от той ячейки так чтобы она выпадала в центре екрана

Ответить

ppk-center ppk-center 11.06.2012 20:25:59

Края правых блоков лезут на изображение!

Ответить

nikolay61 nikolay61 12.06.2012 16:17:14

Изображение раскрывается полностью. Я имел ввиду, если ссылка в правом нижнем углу екрана монитора. Фотка же сама сориентирована у верхнем левом углу ячейки, вот и получается что прячется за границы монитора. Как сменить ориентацию в данной ситуации?

Ответить

Admin Admin 12.06.2012 17:17:53

Задавайте в этом случае позицию вручную, либо уберите position: absolute;

Ответить

nikolay61 nikolay61 18.06.2012 23:24:01

Удалил position: absolute, но все по прежнему.А вот как в ручную прописать - не могу сообразить!

Ответить

Admin Admin 19.06.2012 08:51:24

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

Ответить

URF007 URF007 30.05.2013 13:38:07

Большое спасибо за сайт. Содержит очень много полезного. Все устанавливается и работает без проблем. Подскажите пожалуйста как сделать так чтобы при наведении курсора на ссылку (или картинку) выпадала не фотография, а окно подсказки (с заданным размером, цветом фона, шрифтом). И как сделать чтобы при наведении курсора на ссылку (или картинку) всплывало окно (в указанном месте экрана, с заданными параметрами размера, фона и содержанием какой либо графики)

Ответить

Admin Admin 30.05.2013 14:39:20

http://myrusakov.ru/css-window-dark.html и http://myrusakov.ru/sozdanie-vsplyvauschey-podskazki.html

Ответить

sevjan sevjan 11.09.2013 19:53:50

Скажите пожалуйста как сделать чтоб при наведении курсора на изображения,изображения не скрывалось ?спасибо

Ответить

Admin Admin 12.09.2013 19:58:16

Убрать соответствующее css свойство display

Ответить

alsheshka alsheshka 20.02.2014 10:39:06

Здравствуйте! А не можете подсказать, как сделать функцию, которая при наведении курсора мыши на div меняла бы его background-color в style. Я сделал вот такое чудо: <script language = "JavaScript"> function BGF(id) { document.getElementById(id).style.background-color = "green"; } </script> А в html-коде написал вот так: <div style="background-color: white;" id="color" onmouseover="BGF('color')">Любой текст</div> Не работает... Скажите, пожалуйста, почему.

Ответить

tikkiwiki tikkiwiki 13.05.2014 12:35:09

<div onmouseover="this.style.color='red'" onmouseout="this.style.color='green'">Меняем цвет текста</div> Работает почти во всех элементах. Пишите нужный стиль и меняйте, всё, что надо.

Ответить

Web-дизайнер. Web-дизайнер. 28.09.2014 13:20:59

Здравствуйте Михаил! Вот такой вопрос возник. Когда-то, ту на вашем сайте встречал ответ на вопрос - Как сделать всплывающее окно при наведении мышки на ссылку (или объект). Что мне нужно. На Оф.сайте Близзард по игре Diablo 3, на страницах при наведении на ссылки показывается всплывающее окошко с картинкой. При перемещении мышки по ссылке, картинка следует за мышкой. Вопрос: Не могли бы вы написать код для мышки? Это как-то связано с функцией OnMouseOver . Большое спасибо за ваш труд Михаил.

Ответить

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