Фоновая картинка ссылкой by webo4ka.ru

594
10 из 10
Проголосовало: 6






Всем здрасти)) Последнее время я на разныъ форумах замечаю такой вопрос,
как сделать кликабельный фон как на кино сайтах и не только.

Хотя сделать что бы кликабельным была именно картинка, а блоки были не кликабельными. Ну это вообщем просто делается с помощью position и z-index.

Ну вообщем любителям понатыкать сайт всякой рекламой этот способ будет по нраву, давайте перейдем к установке

Установка:

Представляю сразу готовый пример, его вставляем между <body> и </body>:

Код

<div class="wKlikFon"></div>  

  <div style="background: rgba(255, 255, 255, 0.9); box-shadow: inset 0px 1px 5px rgba(155, 155, 155, 0.9); border: 1px solid #555; width: 840px; height: 400px; padding-top:10px; margin: 80px auto; position:relative; z-index:2;">  
  <center><br>  
  <div style="color:#000; font-size:33px; font-family: "Arial", sans-serif; font-weight: 700;">Достижения Webo4ka.Ru</div>  
  <br><br>  
  <div style="margin:30px 0 0 30px; float:left;"><center>Пользователей</center><br>  
  <div style="background:#000; border-radius:100px; width:100px; line-height:100px; text-align:center; color:#fff; font-size:30px;">8.268</div>  
  </div>  

  <div style="margin:30px 0 0 30px; float:left;"><center>Материалов</center><br>  
  <div style="background:#000; border-radius:100px; width:100px; line-height:100px; text-align:center; color:#fff; font-size:30px;">2.921</div>  
  </div>  

  <div style="margin:30px 0 0 30px; float:left;"><center>Комментариев</center><br>  
  <div style="background:#000; border-radius:100px; width:100px; line-height:100px; text-align:center; color:#fff; font-size:30px;">12.009</div>  
  </div>  

  <div style="margin:30px 0 0 30px; float:left;"><center>Отзывов</center><br>  
  <div style="background:#000; border-radius:100px; width:100px; line-height:100px; text-align:center; color:#fff; font-size:30px;">135</div>  
  </div>  

  <div style="margin:30px 0 0 30px; float:left;"><center>Тем на форуме</center><br>  
  <div style="background:#000; border-radius:100px; width:100px; line-height:100px; text-align:center; color:#fff; font-size:30px;">6.444</div>  
  </div>  

  <div style="margin:30px 0 0 30px; float:left;"><center>Постов</center><br>  
  <div style="background:#000; border-radius:100px; width:100px; line-height:100px; text-align:center; color:#fff; font-size:30px;">62.048</div>  
  </div>  
  <div style="clear:left;"></div> <br><br><br> <a href="" style="color:#000;">Вернуться к статье</a>  
  </center>  
  </div>  
  <style type="text/css">  
  .wKlikFon {background: url('http://webo4ka.ru/wDemo/w6/wKlikFon.jpg'); background-position: 100% 100%; background-repeat:no-repeat; width:100%; height:100%; cursor:pointer; display:block; position:fixed; left:0px; top:0px;}  
  </style>  
  <script type="text/javascript">  
  $(document).ready(function() {  
  $(".wKlikFon").click(function(){window.open('http://webo4ka.ru/'); return false;});  
  });  
  </script>


$(".wKlikFon").click(function(event){window.open('http://webo4ka.ru/'); - ссылку меняем на свою...

Если кто не хочет разбирать готовый пример, объясню для чайников:

1) после <body> вствляем:

Код
<div class="wKlikFon"></div>


Это и будет кликабельный фон

1.1) Это стили к этому кликабельному фону:

Код
<style type="text/css">  
  .wKlikFon {background: url('http://webo4ka.ru/wDemo/w6/wKlikFon.jpg'); background-position: 100% 100%; background-repeat:no-repeat; width:100%; height:100%; cursor:pointer; display:block; position:fixed; left:0px; top:0px;}  
  </style>


1.2) А это js, при помощи которого будет фон кликабельным:

Код
<script type="text/javascript">  
  $(document).ready(function() {  
  $(".wKlikFon").click(function(){window.open('http://webo4ka.ru/'); return false;});  
  });  
  </script>


2) И теперь у блока который будет не кликабельным необходимо прописать стили:

Код
position:relative; z-index:2;


на этом все, будут вопросы пишите...
Автор публикации: Загрузка
Загрузка
Вовчик, это его n материал
Источник: http://webo4ka.ru/
  • Оставить первым комментарий:
Добавлять комментарии могут только зарегистрированные пользователи.
Регистрация | Вход
Меню сайта
Категории
Для помощи создания сайта uCoz 25
Скрипты и модификации для Ucoz 2118
Шаблоны форумов Ucoz 28
Шаблоны сайтов Ucoz 431
Авторство Webo4ki 309
php скрипты для ucoz 57
Графика для uCoz 40
Мини-чат
Последние комментарии
  • Marishka написал:
  • Можете добавить свои input поля, но сохраняйте их порядок в html для правильного сохранения и вывода.
  • Marishka написал:
  • Новая версия 1.3 (+6 новых станций):
    Установка:
    Демо: Перейти
  • Marishka написал:
  • Доп 8 станций:
    Код
    <div class="mSt"><p>Tropical</p><div data="2/trop_64">64</div><br><div data="2/trop_128">128</div><br><div data="2/trop_320">320</div></div>  
      <div class="mSt"><p>Нафталин FM</p><div data="2/naft_64">64</div><br><div data="2/naft_128">128</div><br><div data="2/naft_320">320</div></div>  
      <div class="mSt"><p>Rave FM</p><div data="2/rave_64">64</div><br><div data="2/rave_128">128</div><br><div data="2/rave_320">320</div></div>  
      <div class="mSt"><p>Gold</p><div data="2/gold_64">64</div><br><div data="2/gold_128">128</div><br><div data="2/gold_320">320</div></div>  
      <div class="mSt"><p>GOA/PSY</p><div data="2/goa_64">64</div><br><div data="2/goa_128">128</div><br><div data="2/goa_320">320</div></div>  
      <div class="mSt"><p>Minimal/Tech</p><div data="2/mini_64">64</div><br><div data="2/mini_128">128</div><br><div data="2/mini_320">320</div></div>  
      <div class="mSt"><p>House</p><div data="2/fut_64">64</div><br><div data="2/fut_128">128</div><br><div data="2/fut_320">320</div></div>  
      <div class="mSt"><p>Megamix</p><div data="2/mix_64">64</div><br><div data="2/mix_128">128</div><br><div data="2/mix_320">320</div></div>


    Fix работы радио:
    Находим: if(radUrl=="tm" || radUrl=="ps" || radUrl=="teo" || radUrl=="dc")
    Меняем на: if (radUrl == "tm" || radUrl == "ps" || radUrl == "teo" || radUrl == "dc" || radUrl == "gop")
  • CbIPoK2513 написал:
  • Мой вариант выдаёт аватарку картинкой, а не текстом.
  • waak написал:
  • и ещё забыл добавить что использую модуль каталог сайтов
    Последние темы
    Опрос
    469
    А
    Р
    Оцените новый дизай:)
    Статистика
    Анализ интернет сайта
    0
    онлайн
    0
    наших
    0
    чужих
    Онлайн всего: 3
    Гостей: 3
    Пользователей: 0
    0
    Сегодня были
    Топ пользователей: