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

Опубликовано: 2019-04-21
Просмотров: 705
+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;
}
Согласитесь, всплывающий банер еще веселее...

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

samson
Joomla выходит все новыми релизами, и часто возникают вопросы, на какой делать сайт, графики ниже выхода...
4 - +9
skaz
Решил написать эту статью в связи с тем, что некоторые пользователи программы пасуют перед редактированием...
8 - +6
artnikov
Доброго здоровья. В интернете МИЛЛИОН статей на тему, как вывести сайт за кратчайший срок в ТОП 3 или ТОП...
11 - +7
samson
Темы для WP от Artisteer в админке имеют довольно много настроек, но в связи с тем, что у них не переведены...
8 - +6
skaz
Как подключить к Joomla не стандартный слайдер новостей, слайд шоу картинок. В интернете очень много...
9 - +6