info navigation

phpbb-belk.ru

темы, связанные с форумом phpbb 3.0.x



Новая тема  [ 1 сообщение ]  Просмотры: 532

Автор Сообщение
Не в сети
(Андрей)  
Администратор
Аватара пользователя

Стаж: 8 лет 7 месяцев 6 дней
Сообщения: 1223
Откуда: здешние мы


Стиль: subsilver2


Репутация: 11


Russia

Тиц и PR

перейти на сайт пользователя
Найти темы пользователя


простые спойлера или раскрытие скрытых блоков

в данной теме я буду размещать простые сборки, которые реализуют функцию спойлера (открытие/закрытие скрытого блока) при разных факторах воздействия, таких, как при наведении, по клику...

 


Открытие блоков по клику


1.простой спойлер

пример:

нажмите сюда!
здесь что-то спрятано


сделано это просто:

Код: Выделить всё

<div>
   <div style="font-size: 0.9em; font-weight: bold; cursor: pointer" onclick="hidn = this.parentNode.getElementsByTagName('div')[1]; btn = this.getElementsByTagName('img')[0]; if (hidn.style.display != '') { hidn.style.display = ''; orimg = btn.src; btn.src = 'data:image/gif;base64,R0lGODlhCQAJAMQeAOLt+ff8//z+/4CRxo2by7vF6a254X6PxICQw87a74CQxuXo84CQxM/b7/H6/v7+/oGRxouayoGSxv7+/8LN7IqZyv7//4KSxur0/MrV74OTx9Ld8trl9gwMDP///wAAACH5BAEAAB4ALAAAAAAJAAkAAAU4oFcpwzFAkWgUVLZxCQGxLgdgGtS+t6NJmY5QOEFcNo/kZGLRXGwYR0DQjDSiU8uCIJJIGJdLKgQAOw=='; } else { hidn.style.display = 'none'; btn.src = orimg; }">
      <img style="margin: 0; padding: 5px 5px 0" src="data:image/gif;base64,R0lGODlhCQAJAMQfAIqZyoGSxv3+/trl84CQxYCRxn6PxMXQ7efq9H+Pwtnk8oKTxoCQxKy44QAAANvl9rvG6fD5/o2by4GRxvb8//v9//7+/ubw+v39/ouayoKSxoOTx/7+/wwMDP///////yH5BAEAAB8ALAAAAAAJAAkAAAU84AdoGkNmX4Z4HldRirSxXMdF1zK7nXU9mk2t4+h0BIlNhWPpYTCBDQXXwRwggczgJ8BAGhLRZGIoEFAhADs=" />
      <u>нажмите сюда!</u>
   </div>
   <div style="display: none;">
      здесь что-то спрятано
   </div>
</div>


ссылку на автора написать не могу, так как нашёл его в сети очень давно и не помню уже где...


 

 


Открытие блоков при наведении


1. Простое открытие при наведении на CSS

пример:

наведите на меня!
а вот здесь что-то спрятанo


делается это очень просто:

 html-код 

Код: Выделить всё

<div id="picTxt">
наведите на меня
<br>
<span>а вот здесь что-то спрятано</span>
</div>


 css 

Код: Выделить всё

#picTxt {cursor: default;}
#picTxt span {display:none;}
#picTxt:hover span {display:block;}




 


в процессе. тема будет постоянно пополняться. как увижу в сети чего новенького - запишу.


трёхголовый белк семейства рептилоидов:
"три головы - хорошо, на как же трудно придти к согласию..."
спойлер,открытие,закрытие,блоки,при наведении,по клику
Показать сообщения за:  Поле сортировки  
Ответить на тему  [ 1 сообщение ] 

Кто сейчас на сайте:

Всего посетителей: 1, из них зарегистрированных: 0, скрытых: 0 и гостей: 1 (основано на активности пользователей за последние 5 минут)
Больше всего посетителей (122) здесь было 19 дек 2023, 12:10

Сейчас этот раздел просматривают: нет зарегистрированных пользователей и гости: 1

Часовой пояс: UTC + 2 часа



Вы не можете начинать темы
Вы не можете отвечать на сообщения
Вы не можете редактировать свои сообщения
Вы не можете удалять свои сообщения
Вы не можете добавлять вложения
Вы можете защищать свои темы паролем

Найти:
Перейти:  




cron

Текущее время: 27 апр 2024, 19:21

Создано на основе phpBB® Forum Software © phpBB Group
Яндекс.Метрика

Полная версия Мобильный вид