Выпадающее изображение из ссылки на 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> -
Создано 16.09.2011 19:48:28
-
Михаил Русаков
Комментарии (21):
классно!спс...
Ответить
Полезно =)
Ответить
Очень полезная статья. Расскажите, как сделать так, чтобы картинка открывалась на отдельной вкладке.
Ответить
Здесь никаких скриптов не нужно. Вот код: <a target="_blank" href="images/image.jpg"><img src="images/image.jpg" alt="Картинка" /></a>
Ответить
Расскажите для самых "одарённых" например есть маркированный список. Как осуществить выпадающее изображение в этом случае. Извените за назойливость.
Ответить
Маркированный список, таблицы, контейнеры, да и вообще всё, что угодно, не имеет никакого значения. Реализуется всё аналогичным образом, а меняется лишь HTML-код.
Ответить
доброго! при наведении на ссылку фото выпадает по ячейке слева-направо и сверху-вниз. Пример (http://ya-presch.narod2.ru/uchnvske_samovryaduvannya/nash_vipuskniki/po_rokah/) ИЛИ (http://ya-presch.narod2.ru/admin/vchitel_shkoli/). А можна сделать так чтобы снять это ограничение и фото появлялось по средине экрана.а то как-то неудобно когда ссылка появляется в какой-то стороне екрана и фото прячется. Можно его удержать не отпуская нажатую ЛКМ и стрелочками вывести для просмотра. Но не каждый сообразит. Если можна ответ на nikolay61@meta.ua Благодарю!
Ответить
http://myrusakov.ru/javascript-script-gallery.html
Ответить
Ответ был правильным, вопрос был задан неправильно. Это для галереи исключительный скрипт.Но у меня на сайте большое количесво столбцов и строк таблицы, которые со времеем заполнятся. Пример (http://zalnikolay.narod2.ru/rodinne_derevo/). И когда наводишь на ссылку в правом нижнем углу, изображение нужно насильно вытаскивать на средину. Фотку нужно отвязать от той ячейки так чтобы она выпадала в центре екрана
Ответить
Края правых блоков лезут на изображение!
Ответить
Изображение раскрывается полностью. Я имел ввиду, если ссылка в правом нижнем углу екрана монитора. Фотка же сама сориентирована у верхнем левом углу ячейки, вот и получается что прячется за границы монитора. Как сменить ориентацию в данной ситуации?
Ответить
Задавайте в этом случае позицию вручную, либо уберите position: absolute;
Ответить
Удалил position: absolute, но все по прежнему.А вот как в ручную прописать - не могу сообразить!
Ответить
Плохо удалили значит, там всё теперь будет работать, но изображения будут занимать сразу место, сдвигая другой контент. А вручную прописывать - это значит смотреть координаты (left, top), сравнивать их с размерами окна и как-то менять, если они выходят за их пределы.
Ответить
Большое спасибо за сайт. Содержит очень много полезного. Все устанавливается и работает без проблем. Подскажите пожалуйста как сделать так чтобы при наведении курсора на ссылку (или картинку) выпадала не фотография, а окно подсказки (с заданным размером, цветом фона, шрифтом). И как сделать чтобы при наведении курсора на ссылку (или картинку) всплывало окно (в указанном месте экрана, с заданными параметрами размера, фона и содержанием какой либо графики)
Ответить
http://myrusakov.ru/css-window-dark.html и http://myrusakov.ru/sozdanie-vsplyvauschey-podskazki.html
Ответить
Скажите пожалуйста как сделать чтоб при наведении курсора на изображения,изображения не скрывалось ?спасибо
Ответить
Убрать соответствующее css свойство display
Ответить
Здравствуйте! А не можете подсказать, как сделать функцию, которая при наведении курсора мыши на 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> Не работает... Скажите, пожалуйста, почему.
Ответить
<div onmouseover="this.style.color='red'" onmouseout="this.style.color='green'">Меняем цвет текста</div> Работает почти во всех элементах. Пишите нужный стиль и меняйте, всё, что надо.
Ответить
Здравствуйте Михаил! Вот такой вопрос возник. Когда-то, ту на вашем сайте встречал ответ на вопрос - Как сделать всплывающее окно при наведении мышки на ссылку (или объект). Что мне нужно. На Оф.сайте Близзард по игре Diablo 3, на страницах при наведении на ссылки показывается всплывающее окошко с картинкой. При перемещении мышки по ссылке, картинка следует за мышкой. Вопрос: Не могли бы вы написать код для мышки? Это как-то связано с функцией OnMouseOver . Большое спасибо за ваш труд Михаил.
Ответить
Для добавления комментариев надо войти в систему.
Если Вы ещё не зарегистрированы на сайте, то сначала зарегистрируйтесь.