Плавающий модуль-поплавок

Опубликовано: 2019-10-16
Просмотров: 839
+3
: 3
Есть специальные плагины и модули, для решения этой задачи, однако я предлагаю совершенно простое решение которое подходит для всех CMS, любых сайтов. То есть будем делать следующее:


Реализовать довольно просто. Вначале надо сделать в фотошопе соответствующую картинку, можно взять иконку и обработать соответствующим образом. Далее добавляем в index.html после тега body код:

Код PHP:
  1. <div class="art-lennov"><a href="/actions"><img src="images/lenov.png" width="36" height="117" border="0" /></a>
  2. </div>
Вот так:


Где /actions это ссылка на нужную вам страницу, то есть куда пользователь будет переходить нажимая на картинку. А images/lenov.png это путь к вашей картинке который возможно надо подкорректировать если будете менять папку для изображения. Теперь добавляем в файл стилей css положение и данные модуля:


Где top:300px; положение модуля от верха, width: 36px; height: 117px; ширина и высота соответственно ( при изменении не забудьте изменить эти же данные и в коде который вставили в index.html ). И еще параметр z-index: 20; это положение картинки над всеми другими, я поставил побольше.

Вот и все данное можно реализовать на любой системе.
Комментарии (1)
artnikov #
: 0
Доброго здоровья, dance
Это все хорошо, но вот небольшая неточность... Валидатор выдаст вам ошибку при вставке в heder: Класс <p>, а вставка получается скрипта..
Вот такой вид будет ВАЛИДНЫМ!
<div class="___"><p><a href="
Скрытый текст виден только зарегистрированным пользователям
title="___" src="
Скрытый текст виден только зарегистрированным пользователям
" alt="___" /></a></p></div>.
И еще одно, если вы уж вставляете ,то интересней будет со значение css "hover"
Вот так ( в принципе можно прописать: background-image: url('images/___');)
div.baner img
{
position: fixed;
left: -20px;
top: 275px;
width: 40px;
height: 123px;
z-index: 20;
background-attachment: fixed;
}
div.baner :hover img
{
position: fixed;
left: -5px;
top: 275px;
width: 52px;
height: 120px;
z-index: 20;
background-attachment: fixed;
}
div.baner :hover
{
position: fixed;
left: 0;
top: 275px;
width: 51px;
height: 123px;
z-index: 20;
background-attachment: fixed;
}
Согласитесь, всплывающий банер еще веселее...

Случайное из блогов

artnikov
Доброго здоровья. В интернете МИЛЛИОН статей на тему, как вывести сайт за кратчайший срок в ТОП 3 или ТОП...
11 - +7
artnikov
Пока "есть еще" время, продолжу, с вашего разрешения... Данная тема посвещена-измененнию логина ADMIN,...
1 - +6
samson
Всем известны сервисы по сбору статистики от Google, Яндекс и Liveinternet. Предлагаю свой альтернативный...
6 - +9
samson
Joomla выходит все новыми релизами, и часто возникают вопросы, на какой делать сайт, графики ниже выхода...
4 - +9
samson
Доля покупок и оказания услуг в интернете все увеличивается. Нам все больше приходится платить он лайн....
3 - +8