Форум программистов, компьютерный форум, киберфорум
Наши страницы
JavaScript
Войти
Регистрация
Восстановить пароль
 
Рейтинг 4.92/13: Рейтинг темы: голосов - 13, средняя оценка - 4.92
atax
0 / 0 / 0
Регистрация: 21.08.2015
Сообщений: 2
1

Всплывающее описание или окно при наведении на текс или нажатии на кнопку (с поддержкой html кода)

21.08.2015, 09:15. Просмотров 2376. Ответов 2
Метки нет (Все метки)

Уважаемые, подскажите, как сделать следующее:

1 вариант
Есть слово, при наведении на которое должно всплывать описание с картинкой, которое исчезает, когда убираешь курсор.

2 вариант
Есть кнопка, при нажатии на нее, всплывает окно с картинкой и описанием, которое закрывается, если щелкнуть за пределами этого окна.

Буду очень признателен за помощь.
P.S. можно на css, js, не имеет значения.
0
Лучшие ответы (1)
QA
Эксперт
41792 / 34177 / 6122
Регистрация: 12.04.2006
Сообщений: 57,940
21.08.2015, 09:15
Ответы с готовыми решениями:

Всплывающее окно при нажатии на кнопку
Доброго времени суток! Необходимо при нажатии на кнопку открывать готовое всплывающее окно. ...

Всплывающее окно при нажатии на кнопку
Как сделать всплывающее окно при нажатии на кнопку как на фотке? и чтобы данные она брала с БД....

Выскакивает новое окно в браузере с рекламой при нажатии на кнопку или ссылку
Здравствуйте,пытаюсь бороться с этим вирусом уже несколько дней,я уверенный пользователь ПК,поэтому...

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

Создать программу при нажатии на кнопку м или ж выводились муржской или женский пол.
Создать программу при нажатии на кнопку м или ж выводились муржской или женский пол.

2
WebProggramist
5 / 5 / 9
Регистрация: 24.06.2015
Сообщений: 64
21.08.2015, 22:33 2
1.
HTML5
1
2
3
<ol>
    <li><a href="#">Text <span>Description<img src="http://www.cyberforum.ru/html/..." /></span></a></li>
<ol>
CSS
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
ol {
    position: relative;
    width: 50px;
}
li {
    border: 1px solid #ccc;
    text-align: center;
}
a {
    display: block;
    text-decoration: none;
    color: #2B587A;
}
a span {
    display: none;
    position: absolute;
    top: 0;
    border: 1px solid #ebebeb;
    left: 100%;
}
a:hover span {
    display: block;
}
2.
HTML5
1
2
3
4
5
6
<script src="http://code.jquery.com/jquery-2.1.4.min.js"></script>
<button id="click">Click!</button>
<div id="window">
    <img src="http://www.cyberforum.ru/html/..." width="50" height="50" />
    <span>dsada</span>
</div>
CSS
1
2
3
4
5
6
#window {
    display: none;
    border: 1px solid #ccc;
    width: 100px;
    height: 100px;
}
Javascript
1
2
3
4
5
6
7
8
$(document).ready(function() {
    $('#click').click(function() {
        $('#window').fadeIn(10);
    });
    $('#click').click(function() {
        $('#window').fadeOut(10000000);
    }); 
});
Второе у меня как-то не получилось
0
newJS
Эксперт JSЭксперт HTML/CSS
2406 / 1082 / 307
Регистрация: 23.06.2011
Сообщений: 3,379
22.08.2015, 06:44 3
Лучший ответ Сообщение было отмечено atax как решение

Решение

Цитата Сообщение от atax Посмотреть сообщение
2 вариант
Есть кнопка, при нажатии на нее, всплывает окно с картинкой и описанием, которое закрывается, если щелкнуть за пределами этого окна.
оно?
Обмен готовыми решениями
1
Answers
Эксперт
37091 / 29110 / 5898
Регистрация: 17.06.2006
Сообщений: 43,301
22.08.2015, 06:44

При нажатии на ссылки или любое место в окне браузера, грузится реклама или открывается новое окно с рекламой
Здравствуйте. Не могу избавиться от рекламы которая преследует меня повсюду)) А если серьезно...

Всплывающее описание при наведении на элемент CheckedListBox
есть checkedListBox с коллекцией Items Задача при наведении мыши на элемент коллекции (не выделяя...

Выплывающая подсказка при наведении на ссылку или кнопку
У меня в GridView имеются 2 кнопки (ссылки) для удаления и редактирования. Не знаю как реализовать...


Искать еще темы с ответами

Или воспользуйтесь поиском по форуму:
3
Ответ Создать тему
Опции темы

КиберФорум - форум программистов, компьютерный форум, программирование
Powered by vBulletin® Version 3.8.9
Copyright ©2000 - 2019, vBulletin Solutions, Inc.