<MyRusakov.ru />

Создание крупного проекта на Java с нуля

Создание крупного проекта на Java с нуля

Данный курс научит Вас создавать крупные проекты на Java грамотно и быстро. В курсе Вы увидите создание большой и сложной программы на Java абсолютно с нуля.

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

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

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

Подписавшись по 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 . Большое спасибо за ваш труд Михаил.

Ответить

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